New API Authentication feature - expose bearerToken to the front end?

Hi – I’m trying out the new Labs API Auth feature and have successfully followed this tute to get my spotify connected.

What I’m not clear on is whether it’s safe to expose the bearerToken, it says

You can get the bearer token by using the <your_api_provider>.bearerToken and pass it to the native SDK that you are using, such as the Spotify web API wrapper or the Octokit libraries from GitHub.

So I just return the bearer token along with the status from my netlify function for my front end to use – is that ok or will people be able to get all up in my spotify account? Thanks!

1 Like

Hi felixthehat,

Thank you for your question and being extra cautious with security and the web! These network requests are being exchanged using HTTPS, so you can rest assured knowing that the data, like your bearer token, is encrypted.

ST

2 Likes

Thanks Sam-tan! Ah this is where I think I’m going wrong, I am exposing my bearer token


  if (secrets.spotify) {
    return {
      statusCode: 200,
      body: JSON.stringify({ ready: secrets.spotify.isLoggedIn, token: secrets.spotify.bearerToken }),
    }
  }

I assume this is bad? I don’t expose my client ID or secret tho. Thanks again for the help!

I’m reading Spotify’s documentation:

Looking at that, it clearly asks you to store the token in client-side data. So, based on that I’m assuming, exposing that to client-side is safe.

I share your confidence :grimacing:

One thing you can check to be sure, if the front-end is making requests to Spotify with some authorization headers, you don’t need to worry as there’s nothing you can do to prevent it.

Yo I think someone has used my exposed bearer token to make my Spotify wrapped embarrassing

Hey @felixthehat :wave:

Sorry to hear that. I would suggest asking Spotify the best way to handle the exposed bearerToken in this case then. Other folks with a similar set up may have encountered something similar.

1 Like

Here are the headers on the spotify api request, inc token

Yeah so as you can see, the token is exposed right in the network tab, so anyone could look it up and use it.

This is why @hillary suggested to ask Spotify regarding their recommendations on how to keep the bearer token safe. We can advise on how to get the token from our integrations, which is something you’ve already managed to do. As to how to integrate it with the library and keeping it secure, we can’t say as each library might be needing it differently.

An alternative would be to use Netlify Functions. You can try running the library inside Netlify Functions and return a JSON data to the front end. This would at least help you keep the token hidden from everyone but in this case, the bearer token would have to be embedded as an environment variable in Netlify UI. So, this would probably not be the right way to go forward.

2 Likes

I was trying to avoid building out a fixed api with functions, but you’re right I think it’s the only way to keep the token private. Thanks all for your advice, I’ve done just that:

https://spotifapi.netlify.app/

(was a lame joke, but appreciate the sympathy :grimacing:)