Cannot read property 'scope' of undefined - Using Refresh Tokens

Please include the following information in your post:

  • **Which SDK this is regarding: auth0-react
  • **SDK Version: 1.8.0
  • **Platform Version: Node 16.11.0

The issue is changing to refresh token rotation for SPA.

I was using the PKCE authentication flow with silent authentication on a Single Page Application and it was working fine, until recently when Safari and Edge recently put more browser security to block the cookie from Auth0.
After reading a lot about this topic, there are many suggestions to move to the Refresh Token Rotation pattern. I have looked at all the different discussions and tutorials and there are no examples that I can see of this working.
Since changing to the refresh token rotation authentication I have been getting the error “cannot read property ‘scope’ of undefined” when I try to get a refresh token. The Original request for the Authorization Code works, but then the request to get the refresh token fails.

In the dashboard, my app is configured as a SPA with rotating refresh tokens at 30 seconds. There is an absolute expiration at 60 seconds.
It my API settings I have configured a token expiration of 60 seconds and the allow offline access has been enabled.

When using the auth0/auth0-react SDK I have configured the settings as (Information ommited):

const providerConfig = {
domain: ‘myDomain.au.auth0.com’,
clientId: myClientId,
audience: myAPIname,
redirectUri: ‘https://myUrl/home’,
scope: ‘offline_access’,
useRefreshTokens: true,
cacheLocation: ‘localstorage’,
onRedirectCallback,
};

I can see the flow being this:
Login and granted access
Returns an access token and refresh token from the /oauth/token endpoint
SPA calls an API with the access token and the response is returned
Then the SPA requests a new refresh token and the error is returned.
{“error”:“access_denied”,“error_description”:“Cannot read property ‘scope’ of undefined”}

The SPA then gets into a loop of requesting refresh tokens each of them failing with the same error message

I have managed to solve the issue so the refresh token is now working. There was a rule set up when I first created the auth flow which was preventing the refresh token working since it didn’t have any scopes in the token.

However, I would like to know if this code is still necessary for any reason?

function (user, context, callback) {
var permissions = user.permissions || ;
var requestedScopes = context.request.body.scope || context.request.query.scope;
var filteredScopes = requestedScopes.split(’ ‘).filter( function(x) {
return x.indexOf(’:’) < 0;
});

var allScopes = filteredScopes.concat(permissions);
context.accessToken.scope = allScopes.join(’ ');

callback(null, user, context);
}

I do not get the support of Auth0. There are so many questions when working with the refresh token rotation pattern that is not answered anywhere.
I have now discovered that the above code ensures the scopes are returned in the access token to ensure validation. However, because there is no scope sent when asking for a refresh token the above code fails as the scope is undefined.
Even if this error is handled the return token doesn’t contain scope when sent back to the client so the token is useless. I am failing to understand if the token refresh rotation pattern has ever been implemented anywhere with scopes associated with the token