Refresh token workflow for Angular SPA

[gwanjari]

Hi, I’ve integrated Okta into an existing SPA using okta-angular and okta-auth-js libraries for SSO. Currently the app is setup with refresh_token grant type to allow for longer sessions on SPA (more than default of 1 hr offered by access tokens).

It it working well, the library automatically sends a refresh token request after access token expiration and new access token is stored in browser localstorage.

There’s one part which I need to understand:

An active okta session is not required to get new access and refresh tokens in this case. For example, my okta session expired → I go to SPA → if access token is expired, Auth js sdk calls /token to refresh this token and my SPA session is extended while okta session is still expired.

So, the Auth JS SDK fetches new tokens every hour irrespective of okta session status.

How does this work? how is my SPA able to authenticate user without a valid okta session?

I want to set refresh token expiration to be 24 hours. Is this the right way to implement longer session durations for SPA?

Some info about the integration:

• Application Type: Angular SPA, OIDC
• Grant type: Authorization Code and refresh token
• PKCE: yes
• Authentication policy: 2 hour max okta session time.
• SDK: okta-angular

Thanks!

[SitaRam]

Your SPA can authenticate users without a valid Okta session due to the use of refresh tokens:

• Refresh tokens are independent of the Okta session
• Token-based authentication is used in your SPA
• The Okta Auth JS SDK automatically handles token refresh

Also, setting a 24-hour refresh token expiration is reasonable, but you can consider “Refresh token rotation” for more enhanced security!

[gwanjari]

Thanks @SitaRam for explanation, it makes sense. I’ve enabled refresh token rotation, also since my SPA is an internal tool will go with the default refresh token expiration which is ‘never expiring’.