MsalGuard on Redirect URI - getting into redirect loop

[santhosh1248]

Core Library

MSAL.js v1 (@azure/msal or msal)

Core Library Version

1.4.4

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

1.1.2

Description

Hello, I'm implementing msal in my angular application and I'm using msal-v1 library.

I have taken angular-7 sample from the documented samples and tried implementing the below code in my enterprise application.

I have added popup as false in app.module.ts

and on app-routing.module.ts, I have added MsalGuard on the empty route as my application wont have any login button and the default landing page also needs authentication.

By doing this, if I directly hit the domain URL(i.e. redirect URI) with out any route, I was able to authorize and get token properly in the localstorage, but if we clear local storage and then directly navigate to profile path, I was not able to get the token as it is entering a continuously redirect loop.

the application is redirecting to /#id_token=eyJ and then to /profile/#id_token=eyJ and so on.

please guide me on how to guard all routes in my angular application and not enter the redirect loop.

Error Message

No response

Msal Logs

No response

MSAL Configuration

MsalModule.forRoot(
      {
        auth: {
          clientId: "app client id",
          authority:
            "https://login.microsoftonline.com/tenant.onmicrosoft.com/",
          validateAuthority: true,
          redirectUri: window.location.origin,
          postLogoutRedirectUri:
            window.location.origin,
          navigateToLoginRequestUrl: true,
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: isIE, // set to true for IE 11
        },
      },
      {
        popUp: false,
        consentScopes: ["user.read", "openid", "profile"],
        unprotectedResources: ["https://www.microsoft.com/en-us/"],
        protectedResourceMap,
        extraQueryParameters: {},
      }
    )

Relevant Code Snippets

const routes: Routes = [
  {
    path: "",
    component: HomeComponent,
    canActivate: [MsalGuard],
  },
  {
    path: "profile",
    component: ProfileComponent,
    canActivate: [MsalGuard],
  },
];

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

Reproduction Steps

1. refer to Angular-7 Sample in the msal-v1 samples folder.
2. in app.module.ts - mark popup as false.
3. add MsalGuard on redirect URI on the routing configuration.
4. run the application and directly redirect to profile component.

Expected Behavior

get authorized on all routes and get access token without entering the redirect loop.

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

No response

Source

External (Customer)

[jo-arroyo]

@santhosh1248 If you removed the MsalGuard from the default landing page, and directly navigate to the profile path, do you still see this issue?

[santhosh1248]

@jo-arroyo I don't see an issue after removing MsalGuard from the landing page and directly navigate to profile path.
what can I do to make oauth work on landing page as well?

[jo-arroyo]

@santhosh1248 Having MsalGuard on the landing page is triggering the redirect loops. Is there a reason you chose to use msal-angular v1 and Angular 7? Our recommendation would be to upgrade to msal-angular v2 and follow the instructions here in order to guard the landing page as well.

[santhosh1248]

@jo-arroyo angular version upgrade is scoped for our future releases and for now, our application should be on angular-7 version. is there any way, I could solve this in msal-v1 version?

[jo-arroyo]

@santhosh1248 Can you try registering another redirectUri in the Azure Portal (e.g. 'auth-redirect'), setting that as the redirectUri in your app, and creating a new route with that redirectUri?

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [
      MsalGuard
    ]
  },
  {
    path: 'auth-redirect',
    component: HomeComponent
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [
      MsalGuard
    ]
  }
];

[santhosh1248]

@jo-arroyo it is working fine now, but when authenticating from path other than home page, I see a small UI glitch of home page as the auth-redirect is set to HomeComponent and then to the desired page.
is there anyway we can hide the UI glitch of loading home component?

[jo-arroyo]

@santhosh1248 We generally do not recommend setting the MsalGuard on the home page/all paths as looping is an issue. This has been specifically addressed in msal-angular v2 (see the FAQ here), but we are no longer making changes to msal-angular v1. Having another path (auth-redirect) is a workaround, but I admit it may not be perfect. You may wish to investigate if you can have the route without a component, or other strategies.

[ghost]

@santhosh1248 This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.