How can I prevent users from seeing and reusing the twitch_auth_token
sent in request headers by my Twitch extension?
In my Twitch extension frontend, I retrieve an auth token like this:
twitch.onAuthorized((authData) => {
resolve(authData);
});
const headers = {
headers: {
'twitch_auth_token': auth.token
}
};
const response = await api.getViewerID(headers, authentication.getChannelId());
On the backend, I validate this twitch_auth_token
using the twitch secret for the extension.
However, since the token is sent as a header from the frontend, users can easily see it in Chrome DevTools’ network tab and extract it.
Because of this, they can take that token and make unauthorized API calls directly by passing the same header — which I want to prevent.
As a frontend developer, what’s the best way to securely pass this token to the backend without exposing it in visible request headers or enabling users to reuse it maliciously? Are there better alternatives or best practices to protect the token from being inspected or misused?