How to authenticate both Blazor web app and api?

Question

I am using .NET 6 RC1 with Blazor Server for my Server and a separate Blazor Webassembly project for my client. Both authenticate with Azure Ad B2C. The authentication aspect is working fine.

The server hosts both a BlazorHub for the server side (admin) pages as well as a separate hub for the client to be able to authenticate and call into.

The client connects to the hub mentioned above, as well as perhaps calls any potential API endpoints.

The authentication setup I have is as follows

        var builder = WebApplication.CreateBuilder(args);
        var services = builder.Services;
        var configuration = builder.Configuration;

        services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
            .AddMicrosoftIdentityWebApp(configuration, AzureB2C);

        services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
            .AddMicrosoftIdentityWebApi(configuration, AzureB2C);

The problem here is that if I have both of these defined, the Client (localhost:4201) works and can connect to the protected Hub on the server.

If I attempt to connect to the server endpoint (localhost:5001) I simply receive a browser 401 page, with nothing in the console and Visual Studio output except for a crbug/1173575, non-JS module files deprecated. warning and additionally in the browser console I receive an Uncaught pause_on_uncaught error.

If I comment out the section for AddMicrosoftIdentityWebApp, the client can still connect fine as before, and the Server fails to authenticate as described above.

If I instead comment out the section for AddMicrosoftIdentityWebApi, the server can authenticate and works as expected, but now the client fails to authenticate with the Hub because the JWT token is not being validated.

How do I mix both of these successfully so I can both authenticate in the Server and the Client?

I have found this on the Microsoft Identity Web github page which basically is what I am trying to accomplish, except the code they provided doesn't work for me the same as I have in my example.

Cowman · Accepted Answer · 2021-09-16 18:36:34Z

1

I seem to have resolved my issue by doing the following.

Change the order of my Authentication methods.

AddMicrosoftIdentityWebApi is first.

AddMicrosoftIdentityWebApp is second.

Specify for my Hub that it will use the JwtBearerDefaults.AuthenticationScheme

app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapBlazorHub();
            endpoints.MapHub<GameHub>("/hubs/gamehub")
                .RequireAuthorization(new AuthorizeAttribute
                {
                    AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme,
                    Policy = PlayerPolicy
                });
            endpoints.MapFallbackToPage("/_Host");
        });

Now both authorize just fine!

I'd love to hear if anybody knows the solution for this keeping the original order of them.

answered Sep 16, 2021 at 18:36

Cowman

6888 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JimiSweden Over a year ago

Perhaps this solves it without double AddAuthentication? : services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme) .AddMicrosoftIdentityWebApp(configuration, AzureB2C). .EnableTokenAcquisitionToCallDownstreamApi([SCOPES]).

Collectives™ on Stack Overflow

How to authenticate both Blazor web app and api?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related