After building an application using NextJs, NextAuth, and SWR, I encountered a concern. I utilize SWR to call multiple Twitch APIs, authenticating with my Twitch applications Client-Id and the user's Bearer token from the NextAuth session object.
The issue arises when SWR interacts with the API to update or populate the page data, as the request headers are easily visible in network calls captured by browser dev tools like Chrome or Firefox https://i.sstatic.net/ptYii.png. This poses a significant security risk, especially in a production environment, violating Twitch developers' guidelines which advise against exposing tokens publicly without proper protection.
Is there a way to conceal this sensitive information?
My primary question now is how can I prevent this exposure and if any solutions exist?