Problem enabling useRefreshTokens with Angular

Help
,
1

I have an Angular application that is working perfectly except when third party tokens is blocked in the browser. From the documentation I can find, this is fixed when useRefreshTokens is turned on, but when I turn this on the application stops working as the HTTPInterceptor stops adding the token onto the header of HTTP requests. Normally the silent token call gets an access token and an id token and the interceptor adds the access token to the header of the request. After enabling useRefreshTokens the silent token call gets an access, id and refresh token but doesn’t add anything onto the header in the intercept. I have enabled all the settings in the tenant that I can find documentation on, including enabling refresh token rotation, the leeway setting on this and making sure refresh token is enabled in the grant types for the application.

3

Hi @robvvv,

Would you please share a code snippet with your Auth0 config? Obscure sensitive data please.

4

Below is the app.module.ts. The useRefreshTokens and the cacheLocation are the new lines in the setup. I have tried many variations of the scope including removing it. The AuthGuard has also been placed on all of the routes except the registration page and I have tried removing AllowAnonymous (which we require for registration).

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { DxToolbarModule } from 'devextreme-angular/ui/toolbar';
import { DxTabsModule } from 'devextreme-angular/ui/tabs';
import { DxPopupModule } from 'devextreme-angular/ui/popup';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthModule, AuthHttpInterceptor } from '@auth0/auth0-angular';
import { DxReportViewerModule } from 'devexpress-reporting-angular';
import { DxButtonModule } from 'devextreme-angular/ui/button';
import { DxDropDownBoxModule } from 'devextreme-angular/ui/drop-down-box';
import { DxDataGridModule } from 'devextreme-angular/ui/data-grid';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DxToolbarModule,
    DxTabsModule,
    DxReportViewerModule,
    DxButtonModule,
    DxPopupModule,
    DxDropDownBoxModule,
    DxDataGridModule,
    HttpClientModule,
    AuthModule.forRoot({
      domain: 'xxxxxxxxxxxxx.us.auth0.com',
      clientId: 'xxxxxxxxxxxxxxxxxxxxxxx,
      useRefreshTokens: true,
      cacheLocation: 'localstorage',
      authorizationParams: {
        redirect_uri: window.location.origin
      },
      httpInterceptor: {
        allowedList: [
          {
            // Match any request that starts 'https://{yourDomain}/api/v2/' (note the asterisk)
            uri: 'https://www.xxxxxxxxxxxx/*',
            allowAnonymous: true,
            tokenOptions: {
              authorizationParams: {
                // The attached token should target this audience
                audience: 'https://xxxxxxxxxxxxxxxxxxx',
                // The attached token should have these scopes
                //scope: 'read:current_user'
              }
            }
          }
        ]
      }
    }),
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {};
}
1 Like
5

Thanks for sharing this. Your AuthModule config looks good to me.

Have you inspected the token you are trying to send (you can use jwt.io) and confirm that the audience (aud) claim in the token matches the one you’ve provided here?