Blazor Server-Side Rendering CORS issue with Microsoft.Identity.Web & Azure B2C

[benjaminsampica]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I'm trying to use user-flows with Azure AD B2C using a Blazor Server-Side rendered application with interactive components (.AddServerComponents()) and I'm seeing the following error when clicking on Sign In, Sign Out, Edit Profile, etc.. My guess is that this goes for normal Azure AD authentication too but I haven't tested that.

Access to fetch at 'https://*************.onmicrosoft.com/b2c_1_signup_signin/oauth2/v2.0/authorize?client_id=*************.{rest of url}' 
(redirected from 'https://localhost:44305/MicrosoftIdentity/Account/EditProfile') from origin 'https://localhost:44305' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The keyword here is fetch, because interactivity comes from the blazor.web.js script that is added as part of interactivity. This turns clicks into HTTP verb FETCH and this is not allowed to do.

I can get this working by simply removing the script file but that is obviously unwanted. I can also get it to work by utilizing RenderModeWebAssembly but I'm not sure as to the obviousness of this design for others.

Expected Behavior

I expect to be redirected to the Azure AD portal to sign in, logout, etc. with a Blazor SSR app w/ interactive components.

Steps To Reproduce

These steps in a repo -> https://github.com/benjaminsampica/AzureB2CIssues

1. Create a new blazor web project - dotnet new blazor
2. Add the following package in the project:

    dotnet add package Microsoft.Identity.Web.UI

3. Add the following services

        builder.Services.AddMicrosoftIdentityWebAppAuthentication(builder.Configuration, "AzureAd");
        builder.Services.AddControllersWithViews().AddMicrosoftIdentityUI();

4. Add the following middleware

app.MapControllers();

4. Create an Azure AD application registration.
5. Create a signup / signin flow.
6. Put the app registration information into appsettings.json

  "AzureAd": {
    "Instance": "yourinstance", // https://something.b2clogin.com
    "ClientId": "yourclientid", // 00000000-0000-0000-0000-000000000000
    "Domain": "yourdomain", // something.onmicrosoft.com
    "SignUpSignInPolicyId": "B2C_1_signup_signin",
  },

7. Add the following html to Index.razor

          <form method="get" action="/MicrosoftIdentity/Account/SignIn">
              <button type="submit" class="btn btn-primary">Sign Up/In</button>
          </form>
          <!-- OR -->
          <a href="/MicrosoftIdentity/Account/SignIn">Sign Up/In</a>

Exceptions (if any)

No response

.NET Version

.NET 8 preview 6

Anything else?

No response

[Markz878]

I'm having the same issue with Microsoft.Identity.Web and Azure Ad authentication in .NET 8 SSR web app.
I have a .NET 7 WASM hosted application with Server side auth using BFF pattern, where I'm using Microsoft.Identity.Web.UI package with a Minimal API endpoint like this:

    app.MapGet("account/login", Login)
      .AllowAnonymous();

    private static ChallengeHttpResult Login(string returnUrl)
    {
        return TypedResults.Challenge(new AuthenticationProperties
        {
            RedirectUri = !string.IsNullOrEmpty(returnUrl) ? returnUrl : "/"
        });
    }

which is called from a link

<a href="api/account/login">Log in</a>

This with the service registrations @benjaminsampica mentioned is enough to trigger and complete the auth process in my app.

When I tried to use this in .NET 8 Blazor SSR app, the url changes to localhost:XXXX/api/Account/Login, but the process stops there with browser console warning about CORS: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [https://login.microsoftonline.com/common/oauth2/v2.0/authorize....'

If I just refresh the browser window, then the auth process continues successfully.
Hopefully Blazor team adds some guidance how to use Azure AD from a Blazor SSR application soon...

I also don't like how the AddMicrosoftIdentityUI is an extension method for the old IMvcBuilder, I'm hoping that Blazor .NET 8 could be used without any MVC dependencies.

[javiercn]

@benjaminsampica thanks for contacting us.

This is a dupe of #50384. We are providing a way to disable enhanced navigation on a per-link basis, as external redirections can't be enhanced.