How to set a Environment Variables for Frontend

Hi there,

I am new to extension development, and I am struggling with using environmental variables in my extension application.

I am using React for the frontend, and I created a .env file in my root directory.
but no matter what I put in the .env file:
like

EXT_CLIENT_ID=abcdefg12345
EXT_SECRET=mysecret
EXT_OAUTH=myoauth

or

REACT_APP_CLIENT_ID=abcdefg12345
REACT_APP_TWITCH_SECRET=mysecret
REACT_APP_TWITCH_OAUTH=myoauth

I cannot get those variables and values in my project when tried to
console.log(process.env ===>, process.env) got an empty {} as an output.
(I used webpack and parsed env if it has as follows:

...
const env = dotenv.config().parsed;

  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});
...

)

On top of that, how can I add those variables and get the values after I push to the twitch dev console and make it alive?

Thank you.

You should not be putting any of those values into your frontend at all. Everything in the frontend files is public, so you must NEVER store private data, such as OAuth tokens or app/extension secrets, in the frontend or the extension config service.

Not only is it in violation of the Twitch Developer Agreement to expose that data to users, but a malicious user could take advantage of those credentials to render your extension unusable.

Thank you for your reply so quickly @Dist , and for the suggestion.

Yes, I also tried to use OAuth authorization code flow to get the OAuth, by passing the correct params as the doc described:

GET https://id.twitch.tv/oauth2/authorize
    ?client_id=<your client ID> // I got this correct id
    &redirect_uri=<your registered redirect URI> // set to https://localhost:8080
    &response_type=code
    &scope=<space-separated list of scopes>

But what I got is CORS error with redirect to /login route to the Twitch API.
Is that a correct response? Or is there any way to get this Twtich OAuth programmatically?

Thank you.

You need to send the user you wish to auth to that URL. You shouldn’t be using fetch, or cURL, or anything like, you need to send the user to that link.

Once the user is on that Twitch auth page, they can choose to accept or deny the authorization, at which point they’ll be redirected to your server. From that point on your server can continue the process programmatically, exchanging the code for an Access Token and Refresh Token, and using the refresh token to get new tokens each time they expire, but that first step can not be done programmatically as it requires the user to go to that link and explicitly consent to the scopes you’re asking for.

Hi @Dist, thank you for your detailed answer. Now I got a better understanding of this concept.

So as you explained above, no matter which method(OAuth implicit code flow or OAuth authorization code flow) I use, at the very first time, in order to get an OAuth Token, a user has to complete the authentication flow by himself/herself, like using a customise login page or using a third-party tool like the https://twitchapps.com/tokengen/.

Then after this first-time authentication, I can use fetch/axios/cURL in my own Backend Server to query this URL with a POST method to update the OAuth Token as follows:

POST https://id.twitch.tv/oauth2/token
    ?client_id=<your client ID>
    &client_secret=<your client secret>
    &code=<authorization code received above>
    &grant_type=authorization_code
    &redirect_uri=<your registered redirect URI>

Hopefully, I fully get the idea this time.

Thank you again.

The Implicit auth flow (like those used by 3rd party token gen sites) don’t come with a refresh token, so for that flow the user would need to go through the process each and every time the token expired.

For the Auth Code flow the process is:

  1. Send the user to the Twitch Auth page, with your apps details in the url as documented.
  2. User is redirected to your server with a code
  3. Your server exchanges that code for an Access Token and refresh token (this is a 1 time thing, the code can only be used once).
  4. To get a new user token programmatically from here on, use the refresh token from step 3. With the Refresh Token process Authentication | Twitch Developers

Hi @Dist, thank you very much, really appreciated your detailed information with process steps. It’s really helpful.

Thank you, again.