How to hide mapbox's api token?

I know that api keys should be hidden - like by using using serverless lambda functions or .env files, but, I’ve been using mapbox’s api, and instead of an api key, they are giving a JWT access token (I don’t know what that is, I saw it on their docs), and I don’t know how to hide that, or if I should hide that. Any help on this matter would be appreciated

I know that api keys should be hidden …

Yes, unless you want everyone on the internet to use it.

… like by using using serverless lambda functions or .env files

Sure, because it is impossible to hide info on the frontend. If you want it hidden, it has to be on the backend.

…instead of an api key, they are giving a JWT access token…

I don’t understand that. I’m no expert, but to me those are two different things.

I don’t know what that is

Do you know what a cookie is? A JWT is a long, encoded strings. It has 3 sections, each of which is JSON encoded in base64. The first section is the header, next the payload (what we usually care about), and then the signature (which makes it impossible to fake). Usually we care about the payload, which is encoded but not encrypted by default.

A web site can use a JWT like a cookie. I log into the site and it sends back a JWT. I can store that JWT (in my browser for example, or even in a cookie. I think an http only cookie is the best for security. Then when you make future requests to that site, you send back that JWT as a passcode to let you in. You can even set it up so the user doesn’t need to log in again - they just stay logged in on that computer, even after a reboot.

But what you are describing doesn’t make sense to me, that they use JWT instead of an API key. I mean, yes, you can, but you have to get the JWT somehow first, usually after successfully logging in. If they are just giving you a JWT before hand, then I would expect it to have the same storage issues as a key.

Maybe I am misunderstanding.

I’ve an account for the genius.com API, and they gave me a Client ID and Client Secret, but also let me generate a JWT, which my backend now sends as Bearer token for requests.

I’m not using the full powers of the API, I only want to have access to their music data, but I think theoretically I could have a website where users can login with their genius accounts, my backend would use the Client ID and Client Secret to generate a JWT for the user, which would authorise them to make POST and PUT requests to the API via my webpage.

I haven’t really thought about this, might be totally wrong. But yeah @farisp you definitely want to hide that token just as you’d hide an API key.

As far as I can tell, you use the access token like an API key.

https://api.mapbox.com/geocoding/v5/mapbox.places/Los%20Angeles.json?access_token=YOUR_MAPBOX_ACCESS_TOKEN

You can do more with it and they have a Tokens API. But you hide and use it the same way as an API key.

Just to be clear, you can not hide an API key in frontend code by just adding it to a .env file. If you bring in the value and then access it in your frontend code it is leaking the value. You have to have a backend that does all the work and the client just talks to the backend.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.