Authenticate to Azure AD from Angular 9 Application

Question

Trying to authenticate with Azure AD from my Angular application. It is so hard to understand how to do it due to so many obsolete exemples on the web. I've been following the most up-to-date documentation on github but I keep getting this error when accessing the app :

ClientConfigurationError: No redirect callbacks have been set. Please call handleRedirectCallback() with the appropriate function arguments before continuing

What should I do to make it work ?

app-routing.module.ts

const routes: Routes = [
 { path: '', component: AppComponent, canActivate: [MsalGuard] },
 { path: 'auth-callback', component: DashboardComponent }
];

app.module.ts

const config = {
  auth: {
    clientId: 'my-client-id',
    //popUp: true,
    consentScopes: ['https://graph.microsoft.com/User.ReadWrite'],
    redirectUri: 'http://localhost:4200/auth-callback',
  }
};


@NgModule({
 declarations: [
 AppComponent,
 DashboardComponent
 ],
 imports: [
 MsalModule.forRoot(config),
 BrowserModule,
 AppRoutingModule
 ],
 providers: [
{
  provide: HTTP_INTERCEPTORS,
  useClass: MsalInterceptor,
  multi: true
}
]
,
bootstrap: [AppComponent]
})
export class AppModule {

constructor() {
  const myMSALObj = new UserAgentApplication(config);

   function authCallback(error, response) { }

    myMSALObj.handleRedirectCallback(authCallback);
 }

Answer 1

You need to add a callback, even if it does nothing. You can add it to the module constructor.

@NgModule({ ... })
export class AppModule {
  constructor(msalService: MsalService) {
    msalService.handleRedirectCallback(_ => { });
  }
}

I created not so long ago a blog post about exactly that! Angular 9 broke my authentication flow, so had to figure things out.

You can check the full code there and all the details that you should pay attention to. https://www.pshul.com/2020/03/29/authenticate-your-angular-9-to-azure-ad-using-msal/