How to resolve adal-angular4 infinite loop on redirect after authentication

Question

I am building an Angular 8 app that authenticates the user against Microsoft Azure Active Directory using adal-angular4. I have an ASP.NET Core API set up and associated with a client app on Azure.

I have followed the following documentation to set up Active Directory: -

https://azure.microsoft.com/en-gb/resources/samples/active-directory-dotnet-webapp-webapi-openidconnect-aspnetcore/

and the following for setting up my Angular app and my .NET Core API using adal-angular4: -

https://www.digital-moves.eu/2018/07/19/authentication-with-azure-ad-angular-6-client-web-api/

The redirect URL appears to work, in that the correct callback component in my application is hit. However, at this point the app gets into an endless loop of re-attempting the login and redirecting. Eventually the login attempt produces the exception 'we couldn’t sign you in. Please try again', presumably due to being locked out.

In my app.module.ts: -

  providers: [
    AdalService, { provide: HTTP_INTERCEPTORS, useClass: AdalInterceptor, multi: true },
    RefreshTokenService

My adal config file: -

  private adalConfig = {
      tenant: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      clientId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      redirectUri: 'http://localhost:4200/auth-callback',
      postLogoutRedirectUri: "http://localhost:4200/end-session",
      endpoints: { "https://visionapi2019.azurewebsites.net": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" },
      cacheLocation: 'localStorage'
    };

  constructor(private adal: AdalService){
    this.adal.init(this.adalConfig);
  }

  ngOnInit() {
    this.adal.login();
  }

In my callback component I have the following: -

  ngOnInit() {
    this.adal.handleWindowCallback();
    this.router.navigate(['test-api']);
  }

Navigation to component 'test-api' works, but then the infinite loop begins.

Thanks!

Not really - it's sometimes hard to tell because the looping happens so quickly. But occasionally I have seen this: "sockjs.js:2998 WebSocket connection to 'ws://localhost:4200/sockjs-node/455/b4sklziq/websocket' failed: WebSocket is closed before the connection is established." — Stephen Banbury
Can you check whether this link provides you any clarity? stackoverflow.com/questions/52123856/… — Suhas Parameshwara
Thanks. Nothing immediately obvious with this, but I'll keep delving. — Stephen Banbury
Solved! I used [RouterModule.forRoot(routes, { useHash: false })] in my router and also removed this.adal.login() from ngOnInit() in the app.component - I guess it was re-attempting to log in for each redirect and then failing due to the hash in the url removing the id_token. — Stephen Banbury

Stephen Banbury Stephen Banbury · Accepted Answer · 2019-07-30T10:24:59

Solved the problem. I used [RouterModule.forRoot(routes, { useHash: false })] in my router and also removed this.adal.login() from ngOnInit() in the app.component - I guess it was re-attempting to log in for each redirect and then failing due to the hash in the url removing the id_token. Now the login and redirect works fine.

How to resolve adal-angular4 infinite loop on redirect after authentication

1 Answers