search

AzureAD / microsoft-authentication-library-for-js

Microsoft Authentication Library (MSAL) for JS
http://aka.ms/aadv2
MIT License
3.67k stars 2.65k forks source link

User login is required on non-guard route Angular #2433

Closed rotirk20 closed 4 years ago

rotirk20 commented 4 years ago

Library

Important: Please fill in your exact version number above, e.g. msal@1.1.3.

Framework

Angular

Description

The problem is that when we come to the front part of the page in which we didn't put in route msalGuard shows an error in console User login is required.For silent calls, request must contain either sid or login_hint.We are login with accounts who are connected to Azure AD.So somehow we need to set that Msal doesn't start at home page or first page..only on dashboard and admin part which is set with canActivate MsalGuard.Also If you refresh few times or log in into the dashboard and come back to the home everything starts to work from endpoints..And yes Locally everything works without problems only on production VM machine which is connected with AD Azure acc.

Error Message

User login is required.For silent calls, request must contain either sid or login_hint

Security

Regression

MSAL Configuration

// Provide configuration values here.
// For Azure B2C issues, please include your policies.

Reproduction steps

function MSALConfigFactory(): Configuration {
  return {
    auth: {
      clientId: environment.CLIENTID,
      authority: environment.AUTHORITY,
      validateAuthority: true,
      redirectUri: environment.REDIRECTURI,
      postLogoutRedirectUri: environment.POSTLOGOUTREDIRECTURI,
      navigateToLoginRequestUrl: false,
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: isIE, // set to true for IE 11
    },
    system: {
      loadFrameTimeout: 30000,
    }
  };
}

function MSALAngularConfigFactory(): MsalAngularConfiguration {
  return {
    popUp: !isIE,
    consentScopes: [
      'user.read',
      'openid',
      'profile',
    ],
    unprotectedResources: ['https://www.microsoft.com/en-us/'],
    protectedResourceMap,
    extraQueryParameters: {}
  };
}

Expected behavior

It should normally open the views which are not in MsalGuard.

Browsers/Environment

sameerag commented 4 years ago

@rotirk20 Can you please provide your angular route configuration?

rotirk20 commented 4 years ago

@rotirk20 Can you please provide your angular route configuration? @sameerag 

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'branch/:id', component: BranchInfoComponent },
{ path: 'booking/:bookingBusiness', component: BookingComponent},
{
path: 'dashboard', component: DashboardComponent, canActivate: [MsalGuard],
children: [
{ path: 'home', component: StatisticsComponent},
{ path: 'branches', component: BranchesComponent },
{ path: 'branch/:id/edit', component: EditBranchComponent },
{ path: 'add-branch', component: AddBranchComponent },
{ path: 'appointments', component: AppointmentsComponent },
{ path: 'users', component: ManageUsersComponent },
{ path: 'user/:id/edit', component: EditUserComponent },
{ path: 'add-service', component: ServicesComponent },
{ path: 'add-user', component: AddUserComponent },
{ path: 'system', component:  SystemComponent },
{ path: 'settings', component:  SettingsComponent }
]
}
]
rotirk20 commented 4 years ago

Solved..Removed MsalInterceptor from app.module because we don't use it on whole app only on few components like profile and etc..So we did use the endpoint for profile https://graph.microsoft.com/v1.0/me in which we send the accessToken which we get with this.broadcastService.subscribe('msal:acquireTokenSuccess')

rotirk20 commented 4 years ago

Not fixed..I only get the token id type not the access token type..Is there any way to tell the msal interceptor to call only on specific routes?

jasonnutter commented 4 years ago

@rotirk20 Yes, you can use the protectedResourceMap to configure the MSAL Interceptor: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular9-sample-app/src/app/app.module.ts#L26

rotirk20 commented 4 years ago

@jasonnutter That is correct! I set my link in protectedResourseMap with null security and it works! Thank you..

const protectedHost = 'link';
export const protectedResourceMap: [string, string[]][] = [
  ['https://graph.microsoft.com/v1.0/me', ['user.read']],
  [protectedHost, null]
];