Blazor Authentication for Hosted Deployment with Multiple Webassembly Apps

Question

I am trying to get a sample of multiple hosted Blazor apps running.

My starting point was the docs provided by Microsoft: https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-6.0#hosted-deployment-with-multiple-blazor-webassembly-apps

Base setup as described in the docs works fine.
Now I want to add authentication based on the blazor webassembly template authentication with individual accounts.

I got parts of it running, but other parts aren't working and I am not even sure what's the correct approach regarding the general architecture of it.

Given a scenario where multiple apps use a single user base. Do I use my host as the Identity Server as in the following or do I use a 3rd party host for all apps?

app.MapWhen(ctx => ctx.Request.Host.Port == 5001 || 
    ctx.Request.Host.Equals("firstapp.com"), first =>
{
    first.Use((ctx, nxt) =>
    {
        ctx.Request.Path = "/FirstApp" + ctx.Request.Path;
        return nxt();
    });

    first.UseBlazorFrameworkFiles("/FirstApp");
    first.UseStaticFiles();
    first.UseStaticFiles("/FirstApp");
    first.UseRouting();

    first.UseIdentityServer();
    first.UseAuthentication();
    first.UseAuthorization();

    first.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", 
            "FirstApp/index.html");
    });
});

app.MapWhen(ctx => ctx.Request.Host.Port == 5002 || 
    ctx.Request.Host.Equals("secondapp.com"), second =>
{
    ...

This isn't working as intend since the call for for the openid configuration (https://localhost:5001/.well-known/openid-configuration) fails, as well as any call to Identity Server Pages eg https://localhost:5001/Identity/Account/Register

This seems to be a routing/mapping problem, although I am not really sure where I would have to make changes. Any ideas or tips?

The other possible option I found is to use a 3rd port to run it separate from the clients by adding the following after the mapWhen statements

    app.UseStaticFiles();
    app.UseRouting();
    app.UseIdentityServer();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapControllers();
    });

This would require the client to not use there own host for auth, but a 3rd party which makes things more complicated. But if this is the only or the only clean solution I will have to deal with it.

Answer 1

There are multiple things that need to be change:

Check this: https://github.com/tesar-tech/MultipleBlazorAppsWithAuth