Angular SDK, auth state lost upon page refresh with refreshtokens

[chris_b]

Hi all,

I am currently doing an implementation with auth0 where I want to have an angular frontend for an api.

I enabled the refresh token rotation in my spa application, set a reuse interval of 30 seconds and enabled offline access in the api application.

When I download the quickstart example which is already configured I can do page reloads without losing authentication. However, as soon as I add useRefreshTokens: true to the environment configuration I see the login screen again.

I confirmed with chrome developer tools that for the login a refreshtoken is returned. The whole response looks like this:

access_token: "eyJhbGc..."
expires_in: 86400
id_token: "eyJhb.."
refresh_token:  "v1.Mf0.."
scope: "openid profile email offline_access"
token_type: "Bearer"

When I reload a page I don’t see any requests made to a token endpoint. Also, with cacheLocation: 'localstorage' page reloads work, but this is probably not ideal? I expected that I don’t have to use localStorage with refreshtokens.

app module:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent,
    NavBarComponent,
    FooterComponent,
    HeroComponent,
    HomeContentComponent,
    LoadingComponent,
    ExternalApiComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    NgbModule,
    HighlightModule,
    FontAwesomeModule,
    AuthModule.forRoot({
      cacheLocation: 'localstorage',
      useRefreshTokens: true,
      ...env.auth,
      httpInterceptor: {
        ...env.httpInterceptor,
      },
    }),
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true,
    },
    {
      provide: Window,
      useValue: window,
    },
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        languages: {
          json: () => import('highlight.js/lib/languages/json'),
        },
      },
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Is there any configuration I am missing in my tenant?

Hopeing for any tips in the right direction.

Best
Chris

[dan.woda]

Hi @chris_b,

You can use the cacheLocation: 'localstorage' setting. This setting is storing the refresh token in localstorage, which is different from storing an access token in localstorage.

There’s more info on the subject here: Can I save Refresh Token into localStorage if `Refresh Token Rotation` is enabled? - #3 by dan.woda

[chris_b]

Hi @dan.woda,

thanks for the reply and the linked information!

[dan.woda]

No problem, please let us know if you have any questions.