How to call Azure AD B2C edit profile user flow from blazor app?

Question

When I am trying to run user flow manually from portal.azure.com by clicking 'Run user flow' at the bottom I can select the application and reply URL.

I have defined two reply URLs:

1. https://localhost:5001/signin-oidc
2. https://jwt.ms

I select the first reply URL and below that information the 'Run user flow endpoint' is generated automatically. When I copy this endpoint and try to call from my blazor app it is working correctly. I can log in and change my profile info. Then, I can click continue to reply to my blazor app.

After clicking I want to get back to my app but I have an error:

Error.

An error occurred while processing your request.

Request ID: 00-f13479803a4cdeb7d3e203f0910e3688-a0619e9d48caf391-00

Details OpenIdConnectAuthenticationHandler: message.State is null or empty.

When I set the reply URL to jwt.ms everything works fine.

How to call Edit Profile User Flow from the blazor app properly?

Answer 1

There are below few workaround may help to achieve the above requirement

• Kindly check the signuporsignin.xml b2c userflow policy for correct tenant id and public policy uri in that policy file specifically check the technical profile id and inherent output claims regarding post successful authentication with Azure ad b2c .

• Since after successful authentication to the blazor app you are able to login and able to change the profile info in the signinsignup user flow page successfully,But when returning to the blazor client application you are encountering an error that displays the State parameter is null or empty , which inherently implies that the token access authentication is not passed on or the token has is broken/missing or misinterpreted during the changes of pages.

• Thus i would suggest you to please check the program.cs file in the blazor client application code whether it includes the below code snippets or not.

  builder.Services.AddMsalAuthentication(options => { builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication); options.ProviderOptions.DefaultAccessTokenScopes.Add("api://https://domain.onmicrosoft.com/cxxxx-1xx-4xxxe-aad0-4xxxxx/API.Access"); });

The above code snippet states that the blazor client application has exposed his api to the blazor server application as a provider.

Further also please check the authentication.razor file for the parameter to be passed on public string

Once the above has been checked and found correct then please ensure that the appsettings.json file on both the client & server applications has the correct respective client Id and the policy name mentioned. Also check the Azure ADb2c app registration for the details in blazor web assembly application.

For more information please refer the below links:-

• Secure an ASP.NET Core Blazor WebAssembly hosted app with Azure Active Directory | MICROSOFT DOCUMENTATION