auth0-angular: TypeError: this.router.navigateByUrl is not a function when handling callback
Checklist
- The issue can be reproduced in the auth0-angular sample app (or N/A).
- I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
- I have looked into the API documentation and have not found a suitable solution or answer.
- I have searched the issues and have not found a suitable solution or answer.
- I have searched the Auth0 Community forums and have not found a suitable solution or answer.
- I agree to the terms within the Auth0 Code of Conduct.
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
ofAuthService
callsthis.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 ofAuthService
, which attemps to redirect to theerrorPath
but fails again because still nonavigateByUrl()
: 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)
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:
Which is reported here https://github.com/ngx-translate/core/issues/1317, and can be solved comparable to that github issue:
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.