Twitch api works local but not on deployment

[nova977]

Hey, So I am making a website using Next.Js and I wanted to include a button/icon that shows when the streamer is live or not.
My logic is this.
Call API
if API results returns data object that means the streamer is live.
if Api results returns nothing that means the streamer is offline.
The problem is that it works locally but not on deployment. I am a new developer and I don’t know what I am doing wrong since it works on localhost.
This is my API call.

export async function getServerSideProps(context) {
const res = await fetch(
“https://api.twitch.tv/helix/streams?user_login=imaqtpie”,
{
headers: {
Authorization: process.env.AUTH,
“Client-Id”: process.env.CID,
},
}
);
const data = await res.json();
console.log(data);
return {
props: { results: data },
};
}

[Dist]

You shouldn’t be storing your OAuth token in an environment variable like this.

First off, they expire, so whatever the token is will eventually die and the variable that gets built into your Next JS page will eventually be useless.

Secondly, for making requests in your NextJS page you should be using the Implicit Auth Flow https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-implicit-code-flow and using the token from that to make requests.

You would have a much easier time debugging if you log the variables used by your function so you know what you’re actually sending, and also logging the response body on a non-200 response so you can see what specifically the error is from Twitch (which in this case I expect to be an issue with the token you’re attempting to send).

[nova977]

I am fairy new but Implicit Auth flow would require whoever visits the landing page to login correct?
What I am trying to do is just have some type of notification on a particular streamer and see if he is live or not. This is the landing page. What would i need to do if I dont want users to login to just see if the streamer is live, since its just a landing page. Would i need to implement a backend to call the twitch api? Im a bit confused, I also understand the tokens expire.

Thank you again for the help.

[Dist]

All Helix requests require an OAuth token, which in the front end can only be obtained by the user going through the Implicit flow. If you don’t wish the user to log in then you’ll need to make the request from your backend server using an App Access Token https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-client-credentials-flow and you would also need to implement some form of caching on your server so that a spike in traffic, or users repeatedly refreshing your site, wont hit the rate limit.

[nova977]

Thank you so much!