codetomake.com

reactjs - How to use external api access tokens without exposing them to the user? - Stack Overflow

2024.12.12 20:59



Skip to main content Stack Overflow About Products OverflowAI Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand OverflowAI GenAI features for Teams OverflowAPI Train & fine-tune LLMs Labs The future of collective knowledge sharing About the company Visit the blog

current community

Stack Overflow help chat Meta Stack Overflow

your communities

Sign up or log in to customize your list.

more stack exchange communities

company blog Log in Sign up Just browsing Stack Overflow? Help us improve your experience. Sign up for research Home Questions Tags Users Companies Labs Jobs Discussions Collectives

Communities for your favorite technologies. Explore all Collectives

Teams

Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

Try Teams for free Explore Teams Teams

Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs

How to use external api access tokens without exposing them to the user?

Ask Question Asked 4 years, 2 months ago Modified 3 years, 7 months ago Viewed 887 times 3

Sorry if this might be a bit of a trivial question, but I wanna be sure and couldn't exactly find a definitive answer online.

I am writing a small app that uses Mapbox, and I am using react-map-gl for it. They require the access token on the client side, so they suggest using an environment variable. My question is would it be okay to simply create a .env file in the front-end folder and put the variable there?

Thanks!

reactjs access-token Share Improve this question Follow edited Apr 22, 2021 at 13:22 sdgluck 27.1k 12 12 gold badges 80 80 silver badges 95 95 bronze badges asked Sep 25, 2020 at 20:09 Guy Schwartzberg Guy Schwartzberg 195 1 1 silver badge 5 5 bronze badges 2 yes you can use a .env, just make sure its in your gitignore so its never pushed up with your code, in this case its not ever accessible to the user, its simply in your local environment – BRose Commented Sep 25, 2020 at 20:22 Will do, thank you very much! – Guy Schwartzberg Commented Sep 25, 2020 at 20:23 Add a comment |

1 Answer 1

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 4

You can't get away from revealing API keys on the front end. If someone wants to dig around in your source code, they will find them.

However, you should always configure any API key that is visible on the Internet to be restricted to specific referrers, i.e. the domain of your website.

Usually this is done during creation of an API key through your provider's dashboard.

For Mapbox, you can read the documentation on restricting API tokens here . It states:

You can make your access tokens for web maps more secure by adding URL restrictions. When you add a URL restriction to a token, that token will only work for requests that originate from the URLs you specify. Tokens without restrictions will work for requests originating from any URL.

(emphasis my own)

They require the access token on the client side, so they suggest using an environment variable. My question is would it be okay to simply create a .env file in the front-end folder and put the variable there?

There are two reasons one uses environment variables in front-end development:

As a convenience, to keep environment-specific configuration removed from source code.

To keep sensitive information out of source code. You shouldn't commit API tokens or other similarly sensitive details to your version control.

Using environment variables in front-end code will not to keep their values secret from the end user. Whatever the value of an environment variable is at build time will be visible in the compiled output.

Share Improve this answer Follow edited Sep 25, 2020 at 20:55 answered Sep 25, 2020 at 20:31 sdgluck sdgluck 27.1k 12 12 gold badges 80 80 silver badges 95 95 bronze badges Add a comment |

Not the answer you're looking for? Browse other questions tagged reactjs access-token or ask your own question .

The Overflow Blog “You don’t want to be that person”: What security teams need to understand Featured on Meta Updates to the 2024 Q4 Community Asks Sprint Stack Overflow Jobs is expanding to more countries

Linked

2 How to use javascript api while protecting api key?

Related

35 Securing my API to only work with my front-end 6 Keeping API credentials secret in React app 2 How to pass Authorization token in a React application 1 How to pass authentication token with every React request to back end API? 2 How to use token-based authentication with axios and react 1 Use access token with Reactjs Frontend 1 Best practice to safely store API token in React frontend application? 0 How to handle an API key in a React frontend without users having to login 1 How to keep user s (not my) API tokens securely? 1 Store external API token with Node

Hot Network Questions

Humans try to help aliens deactivate their defensive barrier What are these 16-Century Italian monetary symbols? How does this Paypal guest checkout scam work? Convert pipe delimited column data to HTML table format for email How to explain why I don't have a reference letter from my supervisor Are pigs effective intermediate hosts of new viruses, due to being susceptible to human and avian influenza viruses? Only selecting Features that have another layers feature on top White perpetual check, where Black manages a check too? What's the justification for implicitly casting arrays to pointers (in the C language family)? Longest bitonic subarray suspected stars and bars problem considered incorrect, in need for some further insight List of mathematicians or physicists once a high school teacher How to remove clear adhesive tape from wooden kitchen cupboards? Can one produce Pantone Metallics with LaTeX? What's a modern term for sucker or sap? When was to list meaning to wish lost? Is it possible that the committee contacts only one reference while applicants need to provide two? How to achieve infinite rage? reverse engineering wire protocol Is outer space Radioactive? Bash script that waits until GPU is free I've heard that nuclear thermal propulsion will get 800-900 ISP. Is this the same as it got on ground tests or is it a prediction of vacuum isp? Find a fraction's parent in the Stern-Brocot tree How to estimate the latency of communication? more hot questions Question feed

Subscribe to RSS

Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-js
Stack Overflow
Questions Help Chat
Products
Teams Advertising Talent
Company
About Press Work Here Legal Privacy Policy Terms of Service Contact Us Cookie Settings Cookie Policy
Stack Exchange Network
Technology Culture & recreation Life & arts Science Professional Business API Data Blog Facebook Twitter LinkedIn Instagram

Site design / logo © 2024 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2024.12.12.20262