Using the “Run User Flow” with SPA and PKCE with Azure AD B2C

Key by Adrien Coquet from the Noun Project

PKCE (Proof Key for Code Exchange) is described here.

From the official OAuth 2.0 spec for PKCE:

“PKCE (RFC 7636) is an extension to the Authorization Code flow to prevent several attacks and to be able to securely perform the OAuth exchange from public clients.”

This is particularly useful for SPA applications that may be using implicit flow.

Implicit flow is not recommended.

As regards B2C, we can see this when we create a SPA app registration.

When we run a SUSI user flow using this application, we see:

Note the PKCE configuration section.

The full text is:

“The authorization code flow with Proof Key for Code Exchange (PKCE) is recommended for single-page applications (SPAs). A code_challenge is generated below so that you can test the user flow experience. An authorization code, not tokens, will be delivered the specified reply URL of the application. You can optionally set your own values for code_verifier and code_challenge_method fields below to be values that your application expects during development so that the application can redeem the authorization code for a token. Learn more”.

On the wire we see:

GET p: B2C_1_SUSI_V2 
client_id: 14b0...8965d 
nonce: defaultNonce 
redirect_uri: https://jwt.io 
scope: openid 
response_type: code 
prompt: login 
code_challenge_method: S256 
code_challenge: -qyyv_lAAT6_Wm8EazPcWQEpYpH3zdkrd1633IlGLK8

The “code_challenge” attributes form part of the PKCE flow.

And then we see the code as specified above:

GET code:  eyJraWQiOiJjcGltY29yZV8wOTI1MjAxNSIsInZlciI6IjEuMCIsInppcCI6IkRlZmxhdGUiLCJzZXIiOiIxLjAifQ...

All good!