Need to pass custom claims to B2C Custom Policy from a React Application

Question

We want to replace our IdentityServer4 with Azure B2C. We now have a Single Sign On implementation where the user is redirected with extra values in the request header and/or URL parameters. These values are used to grant the user certain permissions. There's more custom logic in our IDP instance so we have to keep some parts of it, but the IdentityServer4 packages need to be removed and B2C will hand out tokens etc.

Here's the flow:

1. User is redirected to our IDP with an application and optional permissions
2. IDP puts the parameters in a session and redirects the user to the given React application
3. The react application initiates a login because the user is not logged in, user is redirected back to the IDP
4. IDP initiates the login. After successful login we grab the values from the session to grant the user it's permissions

To do this in B2C I now have a custom policy which has input claims where we can pass these permissions to. The custom policy uses these claims to call some custom endpoints to grant the user the permissions. I have a working POC where our IDP (.NET) provides claims to the custom policy.

The problem I have is that our React applications will use MSAL to connect directly to our B2C instance. That means the IDP is not in between the React app and B2C, so the claims are not provided to the custom policy. I don't think there's a secure way to provide these claims to B2C from a React app, because the claims are send in a signed JWT token with a secret I'd rather not have in a client application. Sending these values in a request header is also not possible.

Is there a way to put our IDP in between our react apps and B2C so we can provide the custom claims to B2C?

Answer 1

Found the answer! Luckily B2C lets you provide custom query parameters that can be used by custom policies. In these query parameters you can include JWT that contains claims that the custom policy has defined as InputClaims. For my scenario this means the React app needs to call an API to get the JWT so it can include this in the OAUTH request to B2C. Flow would look like this:

1. User redirected to IDP
2. IDP redirects user to application, providing permissions in the request header
3. React app checks if permissions in request header are present, if so it calls an endpoint with these permissions to get a JWT back
4. React app provides custom query parameters:

client-assertion-type=jwt-bearer&client_assertion=eyJhbGciOiJIUzI1NiIsInR5c..... 5. B2C receives the claims so it can call a custom endpoint to grant the user the permissions

This is the SO Answer that got me to answer my own question.