How do I get a token to a Microsoft Personal Account within an ADB2C login?

[Autosissy]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.1.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.0.3

Public or Confidential Client?

Public

Description

I want to connect to a logged in via ADB2C users Microsoft Personal Account directly to request the tasks.read.all scope to display their task list in a single page application using the redirect flow in a React Single Page Application. I have already logged the user into the Application with the MsalProvider at the root level. I understand that logging into ADB2C is not logging into Microsoft Personal Accounts. I want to achieve both in the same application.

The use case is that I have an application that unifies personal task lists and calendars across Google and Microsoft and provides offline prompts when they're outstanding. So I need an account in ADB2C and then to be able to obtain refresh tokens from Google, Microsoft (and in the future) other third party API's.

Similar use case to https://support.strava.com/hc/en-us/articles/4402430765325-Connecting-Strava-to-Facebook-and-Google

What I've tried

• Wrapping a MSA MsalProvider around a component lower down in the tree and using the loginRedirect() with the new scopes. This correctly routes me to the MSA application and asks for the correct scopes, but it fails on the redirect, reverting back to the root level provider.
• Wrapping the ADB2C MsalProvider in a component further down the tree, instantiating a new PCA instance for MSA and using loginRedirect(), which redirects to an auth page at the top (outside the component). This correctly redirects me to the auth page with a code and fragment in the URL, however handleRedirectPromise then routes me back to the original url (as expected) but does not use the code to acquire the token from MSA.

More detail in this discussion.

MSAL Configuration

const adb2cConfiguration = {
    auth: {
        clientId: "guid",
        redirectUri: "/",
        authority: "https://tenant.b2clogin.com/tenant.onmicrosoft.com/B2C_1A_SIGNUP_SIGNIN",
        knownAuthorities: ["tenant.b2clogin.com"],
    },
    cache: {
        cacheLocation: "localStorage"
    }
}

const msaConfiguration = {
    auth: {
        clientId: "guid2",
        redirectUri: "/auth",
        authority: "https://login.microsoftonline.com/common/",
        knownAuthorities: ["login.microsoftonline.com"],
    },
    cache: {
        cacheLocation: "localStorage"
    }
}

Relevant Code Snippets

export const wrapRootElement = ({ element }) => {
  return (
    <MsalProvider instance={adb2cPca}  >
      <AppInsightsContext.Provider value={reactPlugin}>
          {element}
      </AppInsightsContext.Provider>
    </MsalProvider>
  )
}

Identity Provider

Azure B2C Custom Policy

Source

External (Customer)

[tnorling]

Wrapping a MSA MsalProvider around a component lower down in the tree and using the loginRedirect() with the new scopes. This correctly routes me to the MSA application and asks for the correct scopes, but it fails on the redirect, reverting back to the root level provider.

Are you saying that the root level provider is handling the redirect instead of the one further down? Can you please provide logs of this behavior?

Wrapping the ADB2C MsalProvider in a component further down the tree, instantiating a new PCA instance for MSA and using loginRedirect(), which redirects to an auth page at the top (outside the component). This correctly redirects me to the auth page with a code and fragment in the URL, however handleRedirectPromise then routes me back to the original url (as expected) but does not use the code to acquire the token from MSA.

You can set the navigateToLoginRequestUrl config flag to false to suppress the redirect back to the original url.

[microsoft-github-policy-service[bot]]

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