I've created an app with Blazor WASM (.net 6) which is ASP.NET Core hosted with authentication. When first accessing the app the user is presented with a login page and cannot get to the rest of the app until signed in.
I'm having a slight issue where when the app initially loads, it briefly shows the loading message before displaying a blank screen for a couple of seconds and then finally the login page. I want to get rid of that blank screen that appears inbetween the 'loading...' and login and suspect it's something to do with the way I've adjusted the boilerplate code to force login before access.
This is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>TimesheetExpense</title>
<base href="/" />
[various links/scripts]
</head>
<body>
<div id="app">
<div class="gradient">
<div class="container">
<div class="row">
<div class="col-12">
<center><p class="text-white">Loading...</p></center>
</div>
</div>
</div>
</div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss"></a>
</div>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
This is my App.razor:
<CascadingAuthenticationState>
<LoadingScreen>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
<NotAuthorized>
@if (context.User.Identity?.IsAuthenticated != true)
{
<RedirectToLogin />
}
else
{
<p role="alert">You are not authorized to access this resource.</p>
}
</NotAuthorized>
</AuthorizeRouteView>
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</LoadingScreen>
</CascadingAuthenticationState>
This is my Index.razor:
@page "/"
@using TimesheetExpense.Client.Features.Dashboard
<PageTitle>Timesheet Expense</PageTitle>
<AuthorizeView>
<Authorized>
<Dashboard />
</Authorized>
<NotAuthorized>
<Login />
</NotAuthorized>
</AuthorizeView>
I've tried setting up prerendering (which was a mission in itself because I'm using authentication and other services that needed setting up server side in order for it not to error) but this just cuts out the 'loading...' screen. The login page appears instantly, but then disappears for a couple of seconds (the blank screen returning) and then reappears.
I've also tried adding <Authorizing></Authorizing> with a custom message in both my App.razor and Index.razor files to see if that displays instead of the blank screen but nothing happens.
Try with this
App.razorcode: