Trouble Setting Up Authorization Code Flow In Azure B2C

I'm trying to get Authorization Code flow going with an Angular app.

So far, I've got the app successfully authenticating, and I get an Id token back, even have an API connector running with my web app to add some custom claims, all working. But that's all returning the id token directly.

Now I'm trying to get auth code flow working. I do the following:

In my angular app, I set the 'response_type=code'
In the B2C app registration, I uncheck 'Access tokens' and 'ID token' But it still returns the ID token from the 'authorize' call. What else do I need to do?

One other point of confusion for me is in the app registration section it says:

Your Redirect URI is eligible for the Authorization Code Flow with PKCE.

What does that mean? Why does it say 'eligible'?

Solution

Note that: When you configure redirect URI under Single-page application it means that the redirect URI is appropriate for scenarios where PKCE will be implemented.

PKCE (Proof Key for Code Exchange) is a security extension for OAuth 2.0 and OpenID Connect that prevents attackers from intercepting the authorization code during the flow and exchanging it for tokens.

As you have configured redirect URI as SPA, you can make use of Authorization Code Flow with PKCE like below:

I created an Azure AD B2C application and configured redirect URL as SPA:

enter image description here

Generated auth-code by passing below parameters:

https://rukk33.b2clogin.com/rukk33.onmicrosoft.com/oauth2/v2.0/authorize?p=B2C_1_testruk
&client_id=ClientID
&nonce=defaultNonce
&redirect_uri=RedirectURL
&scope=https://rukk33.onmicrosoft.com/xxx/access_as_user
&response_type=code
&code_challenge_method=S256
&code_challenge=CodeChallenge

enter image description here

After sign-in the auth-code got generated:

enter image description here

I used this PKCE Code Generator tool to generate Code-Verifier and Code-Challenge.

Now for sample, I generated tokens by passing the above auth-code:

https://rukk33.b2clogin.com/rukk33.onmicrosoft.com/oauth2/v2.0/token?p=B2C_1_testruk

client_id: ClientID
grant_type: authorization_code
code: codeFromURL
redirect_uri: RedirectURL
code_verifier: xxx
scope: https://rukk33.onmicrosoft.com/xxx/access_as_user openid offline_access

Also pass Headers as Origin:RedirectURL:

enter image description here

The tokens generated successfully. To do the same in Angular refer this blog by Yuri Burger.

To perform Authorization Code Flow (without PKCE), refer this SO Thread by me.