Auth code flow in Azure AD B2C: One or two client IDs?

Question

I've configured an Azure AD B2C tenant with two app registrations: one for my ASP.NET Core web API, another for my React SPA web client. I'm confused about client IDs and so can't get it to work. When using either MSAL.js 2.x or MSAL React to initially contact the auth server, don't I specify client IDs from both my web API and my React SPA app registrations? Upon reading the auth code flow doc, I'm confused. The example there shows the same client ID being sent as both the client_id and a scope. I thought my React SPA's client ID should go in client_id and my web API's client ID should go in scope. Which way is right?

Answer 1

Hello @Adrian , thank you for reaching out. In the auth-code flow process documented here for B2C: https://learn.microsoft.com/en-us/azure/active-directory-b2c/authorization-code-flow

Here in the sample, it's using the same App ID for client_id and scope as that sample is trying to fetch the access_token for itself. In case you plan to access any AAD-protected WebAPI, you need to request the access-token for that API, so that the API can consume that access-token when accessing it from your frontend app.

1. To do that you need to first make sure your WebAPI in AAD B2C is exposed. More details can be found here.
2. Then in your frontend app's app registration in AAD B2C, check the API permissions section and add the exposed WebAPI..
3. Grant Admin consent to the newly added WebAPI.
4. Then request for a code from the /authorize endpoint of AAD B2C.
   Sample Request: https://<b2c-tenant-name>.b2clogin.com/<b2c-tenant-name>.onmicrosoft.com/<b2c-policy-name>/oauth2/v2.0/authorize?client_id=<client-id-frontend-app>&response_type=code&redirect_uri=<redirect-uri-frontend-app>&response_mode=fragment&scope=<appId-uri/scope_name>%20offline_access&state=1234

To fetch the <appId-uri/scope_name> please refer to the screenshot below:

Once you have the code, you can make a call to the /token endpoint. I used Postman tool to demo the same. Please refer to the screenshot below:

Here you should get the access-token in the response. Copy the access-token and put it in http://jwt.ms and you should see something similar to the screenshot below:

Hope this helps.

Do let us know if this helps and if there are any more queries around this, please do let us know so that we can help you further. Also, please do not forget to accept the response as an Answer; if the above response helped in answering your query.