How to successfully hide my tokens..?

1

I am currently working on a small site, that requires fetching a data from an API.
The API requires an accessToken for authentication purposes.
Currently, it’s in a .js file, but I realized that if I keep it this way it can be easily accessed from devTools from the sources tab.:frowning::frowning::frowning::frowning::frowning:
How do I get to hide my tokens and still make things work…???

2

Yes, this is a common problem. You cannot completely hide them on the font end. You could “obscure” them a bit by encoding them (like ROT13 or something) but ultimately someone can figure them out.

To truly hide them, you create a backend. The backend makes the call with the secret token/key and your frontend makes a call to your backend - that way the frontend never sees the token/key and it is secure.

3

Can you link me to an article or a post which explains how to do this, please…:slight_smile:

4

How to build a backend? That would require a few books.

If you finish the Apis And Microservices Certification section of FCC, this will be easy for you. Even just getting halfway through may be enough. But there is no article that will teach you how to build a server from scratch and set up API endpoints.

5

This…looks like a good challenge…:sunglasses: :sunglasses: :sunglasses: :sunglasses: :sunglasses:
Okk, I am on it.
I just completed the React section…now onto this…thank you :slight_smile:

1 Like
6

It occurred to me that I did this on a recent app, a simple timezone comparer. (I actually do this a lot, but on this one, it is all the server does.) I didn’t want to expose by Google key so instead of having the FE call google, I had it call the BE (server, running on heroku) and it called Google and sent back the data. The app code is here and a working app is here.

The server is Node/Express and is exactly the kind of thing FCC will have you doing. I also hide the actual key in a .env file, which is a common strategy so it isn’t visible on gihub.