Microsoft-authentication-library-for-js: How to use MSAL.js 2.x (msal-browser) to implement authentication code (with PKCE) flow?

[fengzhihenxs]

Hello, I am using angular9 and msaljs (V2.2.0), how to implement authentication code (with PKCE) flow, how to configure options?

[daniel-seitz]

@fengzhihenxs it is best practice to read the documentation https://github.com/AzureAD/microsoft-authentication-library-for-js and examples.

There you find a link for v2.x. https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser

There you also find an Angular example.

[jmckennon]

@fengzhihenxs In the future, please fill out the full issue template with config, versions, and usage.

Currently our angular library does not support the auth code flow with PKCE (version 2 of our library), and can only be used with version 1 (implicit flow). There's a PR containing the sample for angular with version 2 of the library in #2306.

[AnkHansen]

Hi @jmckennon

I am in the middle of implementing MSAL in our Angular application. I've used 1.0 with implicit flow and have that figured out. But last night on Ignite a saw a session about 2.0.

Just to be clear, would I be better of using msal.js 2.0 directly (maybe inspired by the sample you link above) or should I just go for msal-angular 1.0 for now - and once you release msal-angular 2.0 I should be able to pretty easily switch?

And do you have a ETA/deadline for msal-angular 2.0 - it seems you are working heavily on the samples these days. A week, month, quarter or year?

[karol-majewski]

I'm also interested in this, although I'm using React and not Angular. The README.md says:

Important: MSAL.js 2.0 with Authorization Code Flow is not yet available for B2C tenants (coming soon).

Is that still true? You can't use the library to implement the PKCE flow for B2C customers?

If it's possible after all (and the docs are outdated), how should one go about implementing the PKCE flow in React? It seems like many examples are using the implicit flow, not PKCE.

[jmckennon]

@AnkHansen I would recommend using angular 1.x for now. There may be a few breaking changes from 1.x to 2.x, but we will have a migration guide to make the change as simple as possible. You can expect to see a full [email protected] in the next few months, but no release date as of today.

@karol-majewski It's possible to use B2C in development, but we don't recommend moving into prod with those apps yet. We are still (unfortunately, sorry for the delay) working out a few issues with B2C in our 2.0 library. Additionally, the msal-react library (supported by auth code flow with PKCE/2.0) is in the works for us, you can probably expect to see it early next year. As you mention, there is a react wrapper library but it uses the implicit flow and we also do not directly support/own it. For now you can use msal-browser if you want to use the auth code flow with PKCE.

[TissonMathew]

@karol-majewski Following up on the comment from @jmckennon. We are trying to use Azure AD B2C + Custom Policies + PKCE flow etc. for local, AAD and Google identity providers. Any luck using msal-browser?

[karol-majewski]

@TissonMathew I ended up building my own component around @azure/msal-browser inspired by msal-react-v2.

[TissonMathew]

Thanks @karol-majewski Does it support Azure AD B2C + Custom Policies + MSAL.js 2.0 + Authorization Code flow?

I see another issue posted but its on closed status -- https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2271

[karol-majewski]

@TissonMathew It definitely works with Azure AD B2C + Authorization Code flow.

The docs at msal-browser say it doesn't support B2C:

Important: MSAL.js 2.0 with Authorization Code Flow is not yet available for B2C tenants (coming soon).

but it's not true — it does work. How do I know? The API call made to https://login.microsoftonline.com contains the response_type=code part, which indicates that the PKCE flow is used. I think the docs are just outdated.

My solution, just like msal-react-v2, depends on @azure/[email protected], which in turn uses @azure/msal-common@^1.3.0.

I don't use custom policies, so I can say anything about this part.

[tnorling]

@karol-majewski

The docs at msal-browser say it doesn't support B2C:
Important: MSAL.js 2.0 with Authorization Code Flow is not yet available for B2C tenants (coming soon).
but it's not true — it does work. How do I know? The API call made to https://login.microsoftonline.com contains the >response_type=code part, which indicates that the PKCE flow is used. I think the docs are just outdated.

B2C + MSAL.js v2 does work but is not yet considered production ready due to a few outstanding issues on the server, which is why the docs have not been updated yet. You are free to use MSAL.js v2 with B2C in development, we are just recommending you do not deploy your app to production until we announce that B2C is fully supported.

@TissonMathew

Does it support Azure AD B2C + Custom Policies + MSAL.js 2.0 + Authorization Code flow?

Custom policies will be supported at the same time as the built in flows. There is no difference as far as MSAL.js is concerned.

[TissonMathew]

Thank you @tnorling what's the ETA on B2C official support?

[tnorling]

@TissonMathew Due to the fact that the work needed is server-side and deployments can be delayed for a number of reasons I'm unfortunately not able to provide an ETA. What I can say is that supporting B2C with Auth Code + PKCE is one of our top priorities and the server team is working to get the necessary fixes rolled out as quickly as they can.

[kiranbhadani]

I am able to setup a sample application with MSAL 2.0 + Azure AD B2C + Custom polices, but getting a issue with aquireTokenSlient when login with Azure account

https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2364

[Mobiletainment]

I encountered a different behavior when using B2C that quickly gave the impression that it doesn't fully support the Auth Code Flow with PKCE. But in the end I managed to find out.

I'm using the latest @azure/msal-browser version 2.2.1.
We first used https://login.microsoftonline.com/common/ to test the Auth Code Flow with PKCE. Everything worked fine.

When I switched to our corporate's Azure AD B2C, the login was still fine but I was missing the AccessToken.
I only had the IdToken and RefreshToken, but no AccessToken.

I figured that behind the scenes the library always added the User.Read scope when using https://login.microsoftonline.com/common/, but this was not automatically the case when using our AAD B2C.
When I tried adding this scope also for the B2C, I got the following error:

"AADB2C90117: The scope 'User.Read' provided in the request is not supported.

However, this difference in the scopes got me in the right direction, because I first had to add a custom scope for our exposed API to our app. Only after doing that I got the AccessToken upon login.

This somehow makes sense in the end, but I think this behavior might not be obvious at first when you just want to try out B2C with the Auth Code Flow and PKCE.

Long story short: It doesn't automatically return the AccessToken unless you explicitly request permission to one of your APIs.

[jmckennon]

Since the open issues on this issue are resolved, we'll be closing this. Support for B2C in msal-browser is our top priority and can be tracked on #2381