RefreshToken is missing in token response

[tpvlaxmi]

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 auth0-developer-hub/spa_react_javascript_hello-world at basic-authentication (github.com) github location.

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 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

[tpvlaxmi]

I could be able to resolve getting refresh token issue by enabling “Refresh Token Rotation” and “Refresh Token Rotation” properties under Auth0 application settings in Auth0 page.

Now I am having different problem that refeshToken is not storing in local Storage. .
Following properties are mentioned in authorize call.

useRefreshTokens: true,
cacheLocation: ‘localstorage’,

I have used following code block to get local storage and also used developer tools to see local storage. Both the cases length of the local storage is 0.

      const refresh_token = new LocalStorageCache;
      const key = refresh_token.allKeys().find(key => key.includes(AUTH0_KEY_PREFIX));
      const refresh_token_value = refresh_token.get(key);
      Helper.addToRespField("Got refresh Token" + refresh_token_value);

I would appreciate your help on above problem.

Thanks
Laxmi

[tpvlaxmi]

I was setting cacheLocation as authorizationParams instead at Auth0Provider level. After moving that value to it Auth0Provider, I can see local storage is getting populated with the information.

const authorizationParams = {
    scope: scope,
    redirect_uri: redirectUri,
    audience: audience,
    connection: connectionId
  };

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      cacheLocation="localstorage"
      cache={customStorageCache}
      useRefreshTokens={true}
      onRedirectCallback={onRedirectCallback}
      authorizationParams={authorizationParams} >
      {children}
    </Auth0Provider>
  );

On refresh it was navigating to login screen even refreshToken is enabled. I have to add isLoading check to app.tsx file and auto login only when isAuthenticated is not true. It took care of redirecting to “loginWithRedirect → returnTo” page.
It will be helpful, if someone is having issues.

const { isLoading } = useAuth0();
    return (
        <>
            {isLoading && (
                <div className="page-layout">
                    <PageLoader />
                </div>
            )}
            {!isLoading && (
                <Routes>
                    <Route
                        path="/"
                        element={<Home />} />
                    <Route
                        path="/home"
                        element={<Home />} />
                    <Route
                        path="/callback"
                        element={<CallbackPage />} />
                    <Route
                        path="/protected"
                        element={<AuthenticationGuard component={MyProtectedPage} />}
                    />
                    <Route
                        path="*"
                        element={<NotFoundPage />} />
                </Routes>
            )}
        </>
    );

[tyf]

Hey there @tpvlaxmi thanks for following up with the community on the resolution, much appreciated!

Linking documentation to authorizationParams for future reference - Hopefully this helps others in realizing that cacheLocation is not a property of authorizationParams but Auth0Provider like you mentioned:

AuthorizationParams | @auth0/auth0-spa-js

Cheers!