How to use the MSAL REACT SDK to login in multiple ways?

[yunbozhang-msft]

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [x] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [ ] documentation issue or request

Expected/desired behavior

Hi team, we are following this sample code to implement B2C login: https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/1-Authentication/2-sign-in-b2c/SPA

We want to implement multiple login methods in b2clogin page, such as SUSI_PASSWORD and SUSI_PASSCODE. We can click to switch the login method on the b2clogin page.

But for these two login methods, we have defined two authority URLs: https://xxxx.b2clogin.cn/xxxx/B2C_1A_AccountLink_SUSI_PASSWORD and https://xxxx.b2clogin.cn/xxxx/B2C_1A_AccountLink_SUSI_PASSCODE.

But when jumping to xxxx.b2clogin.cn through sample code, we can only carry one authority URL, which will cause the verification to fail after we switch the login method on the xxxx.b2clogin.cn page.
For example: I defined the following loginrequest in your sample code:

export const loginRequest = {
     scopes: ['https://xxxx.partner.xxxx.cn/xxxx/user_impersonation'],
     authority: 'https://xxxx.b2clogin.cn/xxxx/B2C_1A_AccountLink_SUSI_PASSWORD',
};

But after jumping to the xxxx.b2clogin.cn page, I want to switch to the SUSI_PASSCODE login method, but doing so will cause us to still log in with the authority of SUSI_PASSWORD, which will cause the failure to get the token.

How should I achieve our requirements? Is it because we don't currently support this kind of authentication? Should I modify the definition of my policy? Is there any other way to achieve this without modifying the definition of policy?

Any log messages given by the failure

{
"error": "invalid_grant",
"error_description": "AADB2C90088: The provided grant has not been issued for this endpoint. Actual Value : B2C_1A_AccountLink_SUSI_PASSWORD and Expected Value : B2C_1A_ACCOUNTLINK_SUSI_PASSCODE\r\nCorrelation ID: 1d9c901a-85bf-4060-ac8a-46cc435a5a94\r\nTimestamp: 2023-08-09 04:01:56Z\r\n"
}

Library version

latest
"@azure/msal-browser": "~2.38.1",
"@azure/msal-react": "~1.5.10",

Browser and version

Edge

Thanks! We'll be in touch soon.

[github-actions]

This issue has not seen activity in 14 days. If your issue has not been resolved please leave a comment to keep this open. It will be closed in 7 days if it remains stale.

[github-actions]

This issue has been closed due to inactivity. If this has not been resolved please open a new issue. Thanks!