Msal and angular 4 redirect Url

Question

I am using msal.js to authenticate the user. I successfully receive a token. In the redirectURl of the Azure portal, I indicated the path as " http: // localhost: 44340 ".

My app.routing module looks like this:

 const routes: Routes = [
  { path: 'authentication', component: LoginComponent },
  { path: '', redirectTo: '/lists', pathMatch: 'full' , canActivate: [AuthenticationGuard] },
  { path: 'lists', component: ApplicationContainer ,  canActivate: [AuthenticationGuard]}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

My problem is that when a user logs in, I get a token and when redirecturi reaches '/ lists'. I have a guard. Inside the protection, the token value is not set, since the page is not redirected. That's why it gives false all the time, and they redirect me back to the login page.

Answer 1

This is probably due to the hash fragment.

Angular 4, ( Angular JS - 1.6) $locationProvider , # #id_token Azure B2C AD.

Angular JS, , msal-angularjs.

https://www.npmjs.com/package/@azure/msal-angularjs

:

. HTML5 , , $ locationProvider hashPrefix

app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(false).hashPrefix('');
}]);

AAD , URL- AAD ( {yourBaseUrl}/# {AADTokenAndState}) "#", .

Answer 2

MSAL GitHub:

npm install @azure/msal-angular --save