I’ve an Angular 8 app that uses auth0-spa-js 1.6.3 for the login process. The process gets handled by the Auth0 hosted login.
After successful login, I am properly redirected to the uri specified in the config’s redirect_uri. But before anything can be loaded from it (resolver at said URI doesn’t fire; the ngOnInit that set’s the title of the page doesn’t get applied) I get redirected to root of the domain.
When I try loading the redirect_uri directly, whether logged in or not, it loads. It’s only during the login process that something hi-jacks it.
The Auth0 logs show now errors, but each login generates six entries…
Success Exchange Authorization Code for Access Token a few seconds ago N/A AppName
Success Silent Auth Successful silent authentication a few seconds ago N/A AppName
Success Exchange Authorization Code for Access Token a few seconds ago N/A AppName
Success Silent Auth Successful silent authentication a few seconds ago N/A AppName
Success Login Successful login a few seconds ago Username-Password-Authentication AppName
Success Exchange Authorization Code for Access Token a few seconds ago N/A AppName
Any ideas on where I should look to get the redirect_uri to load properly and not get get hi-jacked when loading during login?
Thank you for the speedy reply. Yes, I’ve gone through and reviewed multiple times the instructions from the Auth0 docs quoted, applied them verbatim, without any issues or needs for tweaks.
I’ve added a service to it where my config values are available. No other changes. My handleAuthCallback method (hope that this is the part you’ve asked me to post) is:
private handleAuthCallback() {
// Call when app reloads after user logs in with Auth0
const params = window.location.search
if (params.includes('code=') && params.includes('state=')) {
let targetRoute: string // Path to redirect to after login processsed
const authComplete$ = this.handleRedirectCallback$.pipe(
// Have client, now call method to handle auth callback redirect
tap(cbRes => {
// Get and set target redirect route from callback results
targetRoute = cbRes.appState && cbRes.appState.target ? cbRes.appState.target : '/'
}),
concatMap(() => {
// Redirect callback complete get user and login status
return combineLatest([
this.getUser$(),
this.isAuthenticated$
])
})
)
// Subscribe to authentication completion observable
// Response will be an array of user and login status
authComplete$.subscribe(([user, loggedIn]) => {
// Redirect to target route after callback processing
this.router.navigate([targetRoute])
})
}
}
Anything about the Auth0 logs that I’ve quoted that looks unusual? Three success exchanges and two silent auths looks like something might be looping… restarting the auth midway through and perhaps app state loses context?
I’ve tried doing a code step-by-step progression, but the login fails from what seems like an auth0 server api call timeout caused by my throttling it with step-by-step. The end result is that I’m not able to test using this method.
I’ve also searched the entire app for every kind of redirect I can think of: Angular’s redirectbyUrl, window.location calls, and .htaccess redirects. Nothing that looks suspicious or which I’ve doubts with understanding the function.
We have an inside facing app, so no quick link that I can post with a repo. I’ll work on doing a step-by-step repo rewind to an earlier, custom implementation of Auth0, which worked but wasn’t following the docs.
I haven’t done that yet because we had a messy transition from a customised Auth0 implementation to standard. Many of the commits on that branch can’t be compiled as a result.
Thanks again for confirming things are working properly on your end.