refresh_token is getting null from Auth0 on React App

Question

I’m trying to get the refresh token from Auth0 after login. I’m currently using a React app with Auth0Lock to login. Based on suggestions from various sources, I enabled Allow Offline Access and set scope to offline_access.

But I’m still getting the refresh_token as null. Any help or suggested way to achive refresh_token ?

Answer 1

Check this point to retrieve refresh_token from Auth0 :

• Enable Allow Offline Access for your API, Go to Applications > APIs > [YourApi] > Access Settings.

• Enable Grant Types for your Application, Go to Applications > [YourSpaApp] > Advanced Settings > Grant Types and check refresh_token.

• Make sur to add scope offline_access in your first /authorize request.

React auth0:

• To get a refresh token when a user logs in, pass useRefreshTokens={true} as a prop to <Auth0Provider.../>. (The default setting is false)

Answer 2

I am also having similar problem. I have followed all the steps mentioned above. Here is my application details.

I have Static React web application. I am deploying the app into Node Express server. Accessing the application using localhost. I am using auth0-react 2.0.0 react component and sample code has taken from following github https://github.com/auth0-developer-hub/spa_react_javascript_hello-world/tree/basic-authentication.

My requirement to get accessToken using refreshToken when it expires. However, https://<my_domain.auth0.com>/oauth/token URL is returning everything except refreshToken. So I could not get new accessToken when original is expired.

Offline access is enabled and Refresh Token grant is selected for Auth0 application. When we try to get refresh token from other programming language it works.

Auth0 Provider code:
const domain = “valid_auth0_domain”;
const clientId = “valid_client_id”;
const redirectUri = “http://localhost:8080/callback”;
const connectionId = “valid connectionid”;
const scope = “openid offline_access”;
const audience = “valid audience”;
const promptType = “login”;
return (
<Auth0Provider
domain={domain}
clientId={clientId}
authorizationParams={{
useRefreshTokens: true,
cacheLocation: ‘localstorage’,
scope: ‘openid offline_access’,
redirect_uri: redirectUri,
audience: audience,
connection: connectionId
}}
onRedirectCallback={onRedirectCallback}
>
{children}

);

Authorization Call request:

https://.auth0.com/authorize?client_id=<client_id>&scope=openid+offline_access&domain=.auth0.com&useRefreshTokens=true&cacheLocation=localstorage&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fcallback&audience=https%3A%2F%2FXXX.co&connection=XYZ&prompt=login&response_type=code&response_mode=query&state=ZHBxYVBZMy1ja2hQRmVEekl1a1BJZ040S1lhR3lGV0t%2BbFNoeDBaZllmNw%3D%3D&nonce=SzNoSUtadVVDfmVCLXZydWlBZnREMFIwQTIzT3pDVkN3ZkpET3BFLmg5dw%3D%3D&code_challenge=G_gEA3lWJ46wzdFHTH2ppRUmYO0B5HCS-t54s7Y_oWU&code_challenge_method=S256&auth0Client=eyJuYWXYZXX

Note: I have tried both memory/localstorage as cacheLocation. In both cases refreshToken is not fetched at token call.

No parameters are fed to getAccessTokenSilently method.

const token = await getAccessTokenSilently();

Request Payload:

client_id=<client_id>&code_verifier=_GAb6EDotFpJyzB%7E%7EIhDmB4Z1HjuAN-3ydF1Zqj2_bK&grant_type=authorization_code&code=XXXXX&redirect_uri=http://localhost:8080/callback

Authorization Token Call Response:

access_token: “<acces_token>”
expires_in: 1800
id_token: “<id_token>”
scope: “openid offline_access”
token_type: “Bearer”

I would appreciate your response.

Thanks Laxmi

---- Update ----- I have resolved the problem by enabling “Refresh Token Rotation” and “Refresh Token Rotation” properties under Auth0 application settings in Auth0 page.

enter image description here