Blazor 8 wasm Authentication

Question

I am attempting to implement authentication in Blazor 8 WASM, but I encountered the following error: InvalidOperationException: JavaScript interop calls cannot be issued during server-side static rendering, because the page has not yet loaded in the browser. Statically-rendered components must wrap any JavaScript interop calls in conditional logic to ensure those interop calls are not attempted during static rendering In my App.razor, I have defined <Routes @rendermode="InteractiveWebAssembly" />, and my Routes.razor file looks like this::

<Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="routeData" DefaultLayout="@typeof(Layout.MainLayout)">
                <NotAuthorized>
                    <h1>Sorry!!</h1>
                    <p>
                        You dont have access
                    </p>
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(Layout.MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
</Router>

This is my first attempt at implementing authentication in Blazor 8. Previously, I successfully implemented it in Blazor 6 without encountering any issues. In the project setup, I chose 'Interactivity location: Global'. Could this possibly be the source of the problem?

I attempted changing the render mode to InteractiveAuto, but this resulted in another error:: InvalidOperationException: A component of type '.Client.Routes' has render mode 'InteractiveAutoRenderMode', but the required endpoints are not mapped on the server. When calling 'MapRazorComponents', add a call to 'AddInteractiveServerRenderMode'. For example, 'builder.MapRazorComponents<...>.AddInteractiveServerRenderMode()' I then added InteractiveServerRenderMode in Program.cs, but the error persisted.

Update: I had to make some changes in the project:

1. In App.razor change HeadOutlet and Routes to @rendermode="InteractiveAuto"
2. In Program.cs

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

and

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()  
.AddAdditionalAssemblies(typeof(TerraCloud.Client._Imports).Assembly);

3. And of course i had to add my custom AuthenticationStateProvider