Authrization Code Flow for SPA

I’m making a simple twitch chat client in SPA.
(This SPA is hosting using Nodejs + Express, https .)

I’m implemented authentication through Implicit Flow to log in to the chat server and get chat badge information.
However, I couldn’t find a way to safely store the access token received from the authentication server.

So, I tried to implement it using the Authrization Code Flow method.

With a request redirected to a link such as “https://myprogram.com?code=[Authrization Code]”, the Express server exchanges code for access_token and refresh_token, then refresh_token is stored in httponly cookie and access_token is sent to client in header .

For security, the access_token is stored in a local variable in javascript.

However, since the access_token disappears when the user refreshes the page in this way, the access_token must be reissued every time using refresh_token .

I was wondering if reissuing the access_token every time the user refreshes the page is the correct implementation. Is there a better way?

Store the Token into the server session instead of a JS local variable.

You could use localstoage, but a server session works fine for this, and you never send the access token to the front end as you use express sessions to handle security instead.

Personally I use express-session to handle my express sessions.

Taking a server generated access token and pushing it out to the “JS Frontend” to utilise is a tad overkill here and kinda defeats the purpose of generating the token on the server in the first place.

1 Like

It’s the first time I’ve heard of express-session. thank you for telling me. I’ll try it!

One more question. If the access_token should not be passed to the JS Front, does it have to go through the Express server that has the access_token when making a request from the Front to the Twitch API?

There are two methods here

  1. You pass the token from the backend to the front end. Store it in a varaible and call the API directly from the frontend (like you already have been doing)
  2. Your frontend calls your backend and the backend loads the token from session and then calls the API proxying the data back to the user via the backend. This also means you can add server side caching, no need to call the API if you got the same data recently.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.