How to run multiple Blazor apps in single website

Question

I would like to create one web site where some sub-functionalities will be split in multiple Blazor projects.

So main site is one Blazor App, but /private and /shop are separate Blazor app, where users need to register and login to access functionality. As main site should have navbar that is common for all sites (login and register buttons are there), how can you communicate between Blazor apps?

If I set up authentication on the main site and use AppState in main site to store values, how can sub-app running in /private access this data (for example isLogged in or userName data).

Answer 1

Not exactly sure what you're asking here, but it is possible to have multiple projects communicate with each other.

SignalR Core is the key to make this possible. It just requires a hub running.

For blazor: https://learn.microsoft.com/en-us/aspnet/core/tutorials/signalr-blazor?view=aspnetcore-5.0&tabs=visual-studio&pivots=server

On the other app, I used a C# console to communicate with my website. Here's an example code

using Microsoft.AspNetCore.SignalR.Client;
using System;

namespace SignalRConsole
{
    class Program
    {
        static void Main(string[] args)
        {
            HubConnection hubConnection;
            hubConnection = new HubConnectionBuilder()
                .WithAutomaticReconnect()
                .WithUrl("https://localhost/{hubname}")
                .Build();

            hubConnection.On<bool>("IsAuthenticated", (b) =>
            {
                if (b)
                    Console.WriteLine("Valid");
                else
                    Console.WriteLine("Invalid");
            });

            hubConnection.StartAsync();

            while (true)
            {
                Console.WriteLine("Username");
                string username = Console.ReadLine();

                Console.WriteLine("Password");
                string pwd = Console.ReadLine();

                hubConnection.SendAsync("CheckLogin", username, pwd);
            }
        }
    }
}

On the blazor hub class

public class AppHub : Hub
{
    private readonly UserManager<IdentityUser> _userManager;
    public AppHub(UserManager<SocialUser> userManager)
    {
        _userManager = userManager;
    }
    
    public async void CheckLogin(string UserName, string pwd)
    {
        var user = _userManager.Users.Where(x => x.UserName == UserName).FirstOrDefault();
        if (_userManager.CheckPasswordAsync(user, pwd).Result)
        {
            //This is optional
            await Groups.AddToGroupAsync(Context.ConnectionId, UserName);
            await Clients.Caller.SendAsync("IsAuthenticated", true);
        }
        else
            await Clients.Caller.SendAsync("IsAuthenticated", false);
    }
}

If that wasn't the answer you're looking for, wouldn't it be best just to use a database to determine who has authentication?

Answer 2

This seems promising: Blazor with multiple apps

I've been trying to figure out how to do this as well. The example above shows how to link two client side Blazor apps with a single server side Blazor app in a single solution. The main thing that I took out of that example was the additions to the Configure in the startup of the server side app.

        app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/FirstApp"), first =>
        {
            first.UseBlazorFrameworkFiles("/FirstApp");
            first.UseStaticFiles();

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

        app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/SecondApp"), second =>
        {
            second.UseBlazorFrameworkFiles("/SecondApp");
            second.UseStaticFiles();

            second.UseRouting();
            second.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapFallbackToFile("SecondApp/{*path:nonfile}", "SecondApp/index.html");
            });
        });

Hope this helps.