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