auth0-angular: TypeError: this.router.navigateByUrl is not a function when handling callback

Checklist

Description

First of all, I apologise for not having a reproduction of the problem on my machine. It only appears after deployment.

After a successful connection, an error occurs during callback handling : TypeError: this.router.navigateByUrl is not a function

Reproduction

For context, the app only allows authenticated users.

So when a user arrives, he’s immediately redirected to the Auth0 login page. But after redirection, the app remains stuck on {url}/?code=...&state=.... The user looks correctly authenticated, redirecting to {url} manually works fine.

When you inspect the console, the following message appears:

main.a3a2f6c09ba54b50.js:1 ERROR TypeError: this.router.navigateByUrl is not a function
    at ie.navigateByUrl (main.a3a2f6c09ba54b50.js:1:375082)
    at main.a3a2f6c09ba54b50.js:1:377309
    at main.a3a2f6c09ba54b50.js:1:68368
    at k._error (main.a3a2f6c09ba54b50.js:1:67846)
    at k.error (main.a3a2f6c09ba54b50.js:1:60212)
    at k._error (main.a3a2f6c09ba54b50.js:1:60455)
    at k.error (main.a3a2f6c09ba54b50.js:1:60212)
    at k._next (main.a3a2f6c09ba54b50.js:1:67792)
    at k.next (main.a3a2f6c09ba54b50.js:1:60100)
    at main.a3a2f6c09ba54b50.js:1:76087

After comparing the minified code and the source, here what I think happens :

  • the handleReirectCallback of AuthService calls this.navigator.redirect() : auth.service.ts
  • for a reason I don’t know, the navigator has a router that has no navigateByUrl() method, and raises a TypError : abstract-navigator.ts
  • it is then caught by the catchError in the constructor of AuthService, which attemps to redirect to the errorPath but fails again because still no navigateByUrl() : auth.service.ts

I have no idea how the router can have no navigateByUrl() method. Maybe also check its presence before trying a redirection ?

For the record, downgrading to auth0-angular v1 works fine.

Additional context

Here is the app.routing.module.ts :

const routes: Routes = [
    {
        path: 'forbidden',
        component: ForbiddenComponent
    },
    {
        path: '',
        loadChildren: () => import('./features/core/core.module').then(m => m.CoreModule),
        canActivate: [authGuardFn]
    }
];

Here is the config of the AuthModule :

AuthModule.forRoot({
    domain: environment.auth0Domain,
    clientId: environment.oauth2ClientID,
    authorizationParams: {
        audience: environment.auth0Audience,
        redirect_uri: window.location.origin,
        scope: `${environment.scope} profile email`
    },
    errorPath: '/forbidden',
    useRefreshTokens: true,
    cacheLocation: 'localstorage',
    httpInterceptor: {
        allowedList: [ ... ]
    },
    useFormData: false
}),

auth0-angular version

2.2.1

Angular version

16.1.8

Which browsers have you tested in?

Chrome, Firefox

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 15 (8 by maintainers)

Most upvoted comments

Thank you for confirming. I am happy it was resolved on your application as well!

Hello @frederikprijck,

Thanks a lot for coming back to this issue ! I confirm it solved the problem also on the original project.

Hey @ThomasGaboriau,

Trying to look into this again, I am unable to reproduce this anymore. I pulled your reproductions again and I am getting a different error:

i18n-title-strategy.ts:7 ERROR Error: NG0200: Circular dependency in DI detected for InjectionToken HTTP_INTERCEPTORS. Find more at https://angular.io/errors/NG0200
    at throwCyclicDependencyError (core.mjs:228:11)
    at R3Injector.hydrate (core.mjs:9297:13)
    at R3Injector.get (core.mjs:9189:33)
    at injectInjectorOnly (core.mjs:652:33)
    at ɵɵinject (core.mjs:656:60)
    at inject (core.mjs:740:12)
    at http.mjs:1650:40
    at http.mjs:1624:76
    at R3Injector.runInContext (core.mjs:9152:20)
    at http.mjs:1624:57

Which is reported here https://github.com/ngx-translate/core/issues/1317, and can be solved comparable to that github issue:

TranslateModule.forRoot({
    defaultLanguage: 'en',
    loader: {
        provide: TranslateLoader,
        useFactory: i18nLoaderFactory,
-       deps: [HttpClient]
+       deps: [HttpBackend]
    }
}),

-export function i18nLoaderFactory(http: HttpClient): TranslateHttpLoader {
-    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
-}

+export function i18nLoaderFactory(http: HttpBackend): TranslateHttpLoader {
+    return new TranslateHttpLoader(new HttpClient(http), './assets/i18n/', '.json');
+}

Once I do that, I can run your sample without any issues and see the title being updated. I think this is a fair solution because you probably do not want interceptors to run when fetching the translation files.

Closing this, but let me know if I am missing something and I am happy to reopen and try and investigate further!

Please open a new issue, make sure to provide a reproduction for us to look into.

Thanks

I’m using the latest v1 version of @auth0/auth0-angular, 1.11.1

Hello, I confirm, removing the TranslateService does fix the issue. Having it unused, only in the constructor, is enough for the issue to come back.

Thanks for the reproduction. Just want to update that I can see the issue but I am not sure this is an issue with our SDK. Will continue investigation as well.