Redirect URI problem with Auth0-spa-js and Angular

Hello Community,

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.

I am using the ‘optimal htaccess for Angular apps’ from Optimal .htaccess configuration for Angular 15, Angular 14, Angular 13, Angular 12, Angular 11, Angular 10, Angular 9, Angular 8, Angular 7, Angular 6, Angular 5 (and older) app in production incl. fix for the angular browser caching issue. · GitHub .

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?

Hi @bytech,

Did you use our quickstart guide to set this up?

https://auth0.com/docs/quickstart/spa/angular2/01-login

Can you post the code to your callback handler?

Let me know,
Dan

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.

Hi, I just tried the Angular Quick start and couldn’t reproduce your issue.

Do you have any public repository we can try?

1 Like

Thank you, wassimchegham.

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.

1 Like

Sure. No worries. Let me know whenever you have an app I can try out and reproduce your issue. Cheers.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.