Recreated solution with web app template. Improved theme. Switched to ShadcnBlazor library

Moonlight.Frontend/UI/Components/Auth/AccessDenied.razor

@@ -0,0 +1,18 @@
+@using LucideBlazor
+@using ShadcnBlazor.Emptys
+
+<div class="m-10 flex items-center justify-center">
+    <Empty>
+        <EmptyHeader>
+            <EmptyMedia Variant="EmptyMediaVariant.Icon">
+                <BanIcon/>
+            </EmptyMedia>
+            <EmptyTitle>
+                Permission denied
+            </EmptyTitle>
+            <EmptyDescription>
+                You are not allowed to access this resource
+            </EmptyDescription>
+        </EmptyHeader>
+    </Empty>
+</div>

Moonlight.Frontend/UI/Components/Auth/Authenticating.razor

@@ -0,0 +1,15 @@
+@using LucideBlazor
+@using ShadcnBlazor.Emptys
+
+<div class="h-screen w-full flex items-center justify-center">
+    <Empty>
+        <EmptyHeader>
+            <EmptyMedia Variant="EmptyMediaVariant.Icon">
+                <ScanFaceIcon/>
+            </EmptyMedia>
+            <EmptyTitle>
+                Authenticating
+            </EmptyTitle>
+        </EmptyHeader>
+    </Empty>
+</div>

Moonlight.Frontend/UI/Components/Auth/Authentication.razor

@@ -0,0 +1,62 @@
+@using ShadcnBlazor.Cards
+@using ShadcnBlazor.Spinners
+@using ShadcnBlazor.Buttons
+@using Moonlight.Shared.Http.Responses.Auth
+
+@inject HttpClient HttpClient
+@inject NavigationManager Navigation
+
+<div class="h-screen w-full flex items-center justify-center">
+    <Card ClassName="w-full max-w-sm">
+        @if (Schemes == null || Schemes.Length == 1)
+        {
+            <div class="w-full flex justify-center items-center">
+                <Spinner ClassName="size-10"/>
+            </div>
+        }
+        else
+        {
+            <CardHeader>
+                <CardTitle>Login to WebApp</CardTitle>
+                <CardDescription>Select a login provider to continue</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <div class="flex flex-col gap-y-1.5">
+                    @foreach (var scheme in Schemes)
+                    {
+                        <Button>
+                            <Slot>
+                                <a href="/api/auth/@scheme.Name" @attributes="context">
+                                    Continue with @scheme.DisplayName
+                                </a>
+                            </Slot>
+                        </Button>
+                    }
+                </div>
+            </CardContent>
+        }
+    </Card>
+</div>
+
+@code
+{
+    private SchemeResponse[]? Schemes;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
+            return;
+
+        var schemes = await HttpClient.GetFromJsonAsync<SchemeResponse[]>(
+            "api/auth", Constants.SerializerOptions
+        );
+
+        if (schemes == null)
+            return;
+
+        Schemes = schemes;
+
+        if (schemes.Length == 1)
+            Navigation.NavigateTo($"/api/auth/{schemes[0].Name}", true);
+    }
+}