3

Long story short I have just somewhat finished building an application with NextJs, NextAuth and SWR, I use SWR to call multiple Twitch API's, to authenticate the Twitch API I use my Twitch applications Client-Id, and the logged in users Bearer token which is taken from the NextAuth's session object.

My concern is whenever SWR performs and API function to populate the page with data or update it, you can easily view the request headers when capturing the network calls in chrome or firefox dev tools here. This is majorly concerning that this is a production environment and it still happens, this also violates Twitch developers documentation and pretty sure there tos "Warning: Treat your token like a password. For example, never use access tokens in any public URL, and never display tokens on any web page without requiring a click to de-obfuscate."

Is there a way or solution to hiding these?

Now my next best question is how can I stop this from happening and is their even a way?

MatDoak
  • 132
  • 5
  • 17
  • It's not clear what your concern is here. Bearer tokens must be passed along in request headers so they will always be visible to the client – Phil Oct 26 '21 at 23:49

1 Answers1

5

No need to be alarmed. It's ok to include Bearer tokens in the request's Authorization header - in fact that's the standard way to send them. You can't hide it from Chrome's Dev Tools as that would defeat its purpose.

The advice you read never use access tokens in any public URL might mean don't ever display them in a URL like mywebsite.com/?token=[abcd] because then it would be accessible via browser history, or don't send a token designed for one service to a different website.

This has nothing to do with SWR - it's standard HTTP behaviour.

Ro Milton
  • 2,281
  • 14
  • 9
  • Cool thanks for a relevant answer, I'm no pro at this stuff so I wasn't sure if these sought are things are okay to be seen as such. – MatDoak Oct 27 '21 at 02:36