search

AzureAD / microsoft-authentication-library-for-js

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

Infinite loop when using with Azure Ad B2C #3713

Closed jeromechrist closed 3 years ago

jeromechrist commented 3 years ago

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.14.2

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.0.0

Description

Following this issue I've encountered while trying the samples with Azure AD B2C

https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/issues/7#issuecomment-854313384

The bug only happens on Safari

Safari

Edge (did not reproduce the issue)

Mac OS

Error Message

I didn't find any in the console

Msal Logs

No response

MSAL Configuration

/**
 * This file contains authentication parameters. Contents of this file
 * is roughly the same across other MSAL.js libraries. These parameters
 * are used to initialize Angular and MSAL Angular configurations in
 * in app.module.ts file.
 */

 import { LogLevel, Configuration, BrowserCacheLocation } from '@azure/msal-browser';

 const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;

 /**
  * Enter here the user flows and custom policies for your B2C application,
  * To learn more about user flows, visit https://docs.microsoft.com/en-us/azure/active-directory-b2c/user-flow-overview
  * To learn more about custom policies, visit https://docs.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-overview
  */
 export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi",
         editProfile: "b2c_1_edit"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://jeromechristb2c.b2clogin.com/jeromechristb2c.onmicrosoft.com/B2C_1_susi",
         },
         editProfile: {
             authority: "https://jeromechristb2c.b2clogin.com/jeromechristb2c.onmicrosoft.com/B2C_1_edit"
         }
     },
     authorityDomain: "jeromechristb2c.b2clogin.com"
 };

 /**
  * Configuration object to be passed to MSAL instance on creation. 
  * For a full list of MSAL.js configuration parameters, visit:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
  */
  export const msalConfig: Configuration = {
     auth: {
         clientId: '2bb0df9f-6cd5-46ea-ba04-447276e84cfc', // This is the ONLY mandatory field that you need to supply.
         authority: b2cPolicies.authorities.signUpSignIn.authority, // Defaults to "https://login.microsoftonline.com/common"
         knownAuthorities: [b2cPolicies.authorityDomain], // Mark your B2C tenant's domain as trusted.
         redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure portal/App Registration.
     },
     cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage, // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
         storeAuthStateInCookie: isIE, // Set this to "true" if you are having issues on IE11 or Edge
     },
     system: {
         loggerOptions: {
             loggerCallback(logLevel: LogLevel, message: string) {
                 console.log(message);
             },
             logLevel: LogLevel.Verbose,
             piiLoggingEnabled: false
         }
     }
 }

/**
 * Add here the endpoints and scopes when obtaining an access token for protected web APIs. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const protectedResources = {
  todoListApi: {
    endpoint: "https://localhost:44351/api/todolist",
    scopes: ["https://jeromechristb2c.onmicrosoft.com/3b2e3fab-66ee-4e5f-befe-cc518b4ea4f5/access_as_user"],
  },
}

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
  scopes: []
};

Relevant Code Snippets

I've uploaded a repo with the full code here https://github.com/jeromechrist/repro-step-b2c

This is based on the sample here https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/issues/7#issuecomment-854313384

Reproduction Steps

I've recorded the issue here, you can see that on Edge (first) the issue doesn't happen, then in Safari it happens every time.

The step is to basically try to access a resource, here the Web API, protected by an Azure AD B2C instance.

https://user-images.githubusercontent.com/2547646/120781953-d43c8880-c529-11eb-96a3-5dc4b98a4040.mov

Expected Behavior

I should be able to access the resource

Identity Provider

Azure B2C Basic Policy

Browsers Affected (Select all that apply)

Safari

Regression

No response

Source

External (Customer)

pkanher617 commented 3 years ago

Thank you for bringing this to our attention. I read through the issue posted in the angular-tutorial repo and will get back here once we can find a root cause.

jeromechrist commented 3 years ago

alright, thank you

derisen commented 3 years ago

Adding the repo for reproduction. cc @jasonnutter checking for interaction_in_progress in the component where looping happens doesn't seem to have an effect.

@jeromechrist Can you capture the network trace using Fiddler and send it to us? You can use the email under my profile.

jasonnutter commented 3 years ago

General comment: apps using redirects with MSAL Angular must make sure to not perform any action (e.g. http request) that might result in an interactive MSAL request (e.g. redirect to the login page) until any previous interactions have completed. This can be done by subscribing to the $inProgress subject and waiting for InteractionStatus.None. Not doing so can result in login loops.

Details here: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/redirects.md

Example: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-v2-samples/angular11-b2c-sample/src/app/app.component.ts#L35-L43

ghost commented 3 years ago

@jeromechrist 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.