I’ve added in auth0.js to my single page application. I have login and logout working and to make authenticated requests to my API I’m passing along the access token in the header of each request.
However, I noticed that my access tokens have an expiration associated with them.
My question is what is the prescribed way to deal with getting new access tokens so that the user can continue to make API requests?
From reading through the docs it seems that calling checkSession is the appropriate way to get a new access token? I’m currently just calling checkSession a few minutes before the access token expires to get a new access token. Is this the correct way to deal with access token expiration?
Hi @john_rambo, thanks for joining the Auth0 Community!
This is called “silent authentication” and you are correct: typically checkSession is called either when the application first loads or a bit before the token expiration (or both). The checkSession method calls Auth0 and sees if the user is authenticated on the server. If so, an access token is returned.
Also, remember that you can set the access_token expiry via the Dashboard in the APIs section (note that there is a separate field for browser flows). This doc explains how.
Here’s an example of using checkSession in Angular in the same way you describe.
Some feedback folks. There are two libraries auth0-spa-js, and auth0-js. This answer seems to answer an auth0-spa-js question with a reference to an implementation with the auth0-js library. This all is quite confusing especially if you don’t realize there are two libraries yet.
That page does seem to indicate that in the auth0-spa-js library, the auth0.getTokenSilently() function is the one that you should use. Tbh, I did not have much luck with it so I’m going to move to the other library. Although the cookies says ‘isAuthenticated’ since I already logged in, then refresh the page. The getTokenSilently results in the below error:
set the audience when calling getTokenSilently({audience: <from Dashboard - API - Detail>}) , and also set Allow Skipping User Consent to enabled
and then modify etc/host (https://auth0.com/docs/api-auth/user-consent ) and run the application in HTTPS
Essentially making sure you don’t run from localhost and run on HTTPS. It still does not work on refresh with ‘getTokenSilently’ here so there is still something I’m doing wrong though.
Edit2: I assumed it no longer works due to the new ITP rules in browsers:
" However, the browser must have third-party cookies enabled. Otherwise, checkSession() is unable to access the current user’s session (making it impossible to obtain a new token without displaying anything to the user)."
My browser for local dev is actually set to allow third party cookies. However, I do see these two warnings:
Thanks for your feedback. This thread and my reply happened just a few weeks after the release of the Auth0 SPA SDK in 2019 so it’s possible some of those links have changed.
Auth0 SPA SDK largely replaced Auth0.js for single page applications for most use cases. That migration guide you posted is a great resource for understanding the difference between the two. This article I wrote last year also explains a few of the differences.
We’ve also just released special SDKs for both React and Angular:
As for ITP and getTokenSilently, we’ve also introduced a new feature called Refresh Token Rotation that can help with this. With refresh token rotation enabled on the Auth0 Dashboard, every time a client exchanges a refresh token to get a new access token, a new refresh token is also returned. This takes the place of the silent authentication approach that uses a third party http only cookie.
