How do refresh token works in auth0 angular12 using auth0/auth0-angular?

[purvibarot]

Hi, I'm trying to use refreshed token for calling the backend API when existing token gets expired with auth0 in angular12 SPA, But i'm not finding any proper explanation in any documentation.

I've tried calling getTokenSilently() method which resulting the Token, but i'm not sure that is that a correct one or not as i'm still recieveing 401! I am completely lost with it, should i've to call getIdTokenClaims again ?, or i've to use token returned by method getTokenSilently() ? or i've to use token returned by method getTokenSilently() to get the access token ?

Here is my configuration of auth0 as per the documentation of Refresh Token.

AuthModule.forRoot({
      domain: environment.auth0_client_domain,
      clientId: environment.auth0_client_id,
      audience: `${environment.audience}`,
      useRefreshTokens: true,
      httpInterceptor: {
        allowedList: [`${environment.serverUrl}/*`],
    }
}),

Here also, i've modified all the settings in auth0 dashboard as per the documentation.

Additionally , i've set ID Token Expiration to 60 sec, but i'm still able to use that token for longer, so is there anything missing?

Regards, Purvi.

[frederikprijck]

Can you please provide a reproduction? This is supposed to work fine once u use useRefreshTokens to true. u can use our playground ( in this repo) or our quickstart sample: https://github.com/auth0-samples/auth0-angular-samples/tree/master/Sample-01

[purvibarot]

Hi @frederikprijck ,

Thank you for your response.

Here, I've one question. if i am using angular SDK, do i need to make any additional step to renew access token with the use of refresh token, as mentioned in document or it'll be managed by SDK it self ? And if it's managed by SDK then do i get new access token in idTokenClaim$ ?

In my code i'm using the auth0 method getTokenSilently() when access token gets expired which resulting the refresh token, but it seems not ok, as while i'm passing that refresh token in header bearer it's not working with API!

Also when i'm decoding both JWT, the decoded JWT of access token and refresh token seems different, so is there any additional change needed to get the same decoded JWT ? Because it feels like that might be the issue!

Any help would be appreciated.

[liyakhatalikhan]

I am having the same issue. In my interceptor I am getting token and adding it to header. But something else is removing the headers before it sends to backend api.

[frederikprijck]

@purvibarot Our SDK will never expose a Refresh Token to you through the methods available in the SDK.

getTokenSilently() returns an AccessToken, either from the cache or a renewed token with or without using a Refresh Token (depending on your configuration).

Also when i'm decoding both JWT, the decoded JWT of access token and refresh token seems different, so is there any additional change needed to get the same decoded JWT ? Because it feels like that might be the issue!

An Access Token and Refresh Token are different, even more so a Refresh Token is not a JWT. So could you elaborate on what u mean here ?

[frederikprijck]

@liyakhatalikhan That seems unrelated to our SDK, you might want to debug your own application and see what is causing this, but our SDK does not remove a token from the headers.

[frederikprijck]

Closing this as I believe there isn't any action required here. But feel free to continue the conversation if you have any further questions.

[mikkimichaelis]

Hi,

I downloaded https://github.com/auth0-samples/auth0-angular-samples/tree/master/Sample-01 as suggested above, but found no use of getTokenSilently() in the code.

I am using auth0/auth0-angular running in SPA useRefreshTokens: true cacheLocation: ‘localstorage’

when idTokenClaims$ fires it passes an expired auth token.

My question is, if I receive an expired auth token should I then call getAccessTokenSilently()?

It was my understanding that "Renewing the Access Token is handled by the SDK.” as is instructed here https://community.auth0.com/t/gettokensilently-userefreshtokens-getidtokenclaims-how-to-use-it-correctly/55619/3

But apparently that is not the case.

UPDATE I’ve been working on this issue now about an hour, with every page refresh of my SPA producing an expired auth token. However, all of a sudden, now upon page refresh nothing at all is being provided, neither idTokenClaims$ or isAuthenticated$ or user$ fires. Everything still works just fine for logging in, just now when logged and a page refresh, Auth0 thinks it has nothing to share, even though my user should still be logged in.

[frederikprijck]

Hey @mikkimichaelis ,

Our SDK comes with an interceptor that, when configured correctly, should take care of refreshing the access token for you when needed.

If that's not happening, I suggest you look into whether or not the interceptor is configured correctly. If you believe it is and there is a bug in our SDK, please open another issue with a reproduction.

Thanks.

[mikkimichaelis]

Thanks @frederikprijck, but I don’t need to use the interceptor. I’m using a firebase back end and only need to use the auth0 authToken once to exchange it for a firebase authToken. OnceI have the FB authToken I can essentially ignore Auth0. However, I was seeing these expired tokens passed upon app startup, causing my auth routines to try to exchange the expired token for a new FB token, but that is (fortunately) no longer happening, as I still have a valid FB authToken, and Auth0-angular is again keeping quiet on app startup