Issue with Authenticaion and Authorization in Blazor

Hi supraja t,

Thank you for reaching out to Microsoft Q & A forum.   

The error you're encountering typically occurs when there is a mismatch or misconfiguration in the authentication setup between a Blazor WebAssembly app and a Blazor Server app. Specifically, it seems like there's a conflict between the authentication services provided for Blazor Server and Blazor WebAssembly. 

Here’s how to troubleshoot and fix this issue: 

1.Verify Project Type:  

Ensure that the “Microsoft.AspNetCore.Components.WebAssembly.Authentication” package is used for Blazor WebAssembly projects. 

2.Configure Authentication in Program.cs: 

 In a Blazor WebAssembly project, 

 set up authentication services as follows:  

builder.Services.AddApiAuthorization();

3.Ensure Correct Package and Namespaces: Confirm that the correct packages are installed and the appropriate namespaces are included in Program.cs. 

4.Import Necessary Namespaces: 

Add the following import to your” _Imports.razor” file: 

@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

5.Configure Authentication Component:  

Verify the “Authentication.razor” component is properly configured to handle login and register actions: 

@page "/authentication/{action}"
<RemoteAuthenticatorView Action="@Action" />
@code {
    [Parameter]
    public string Action { get; set; }
}

6.Verify Server Configuration: If using Identity Server or another authentication provider, ensure it is correctly configured and the Blazor WebAssembly app is appropriately registered. 

7.Check Application Settings: Confirm that your “appsettings.json” or “appsettings.Development.json” files contain the correct settings for your authentication provider. 

8.Update NuGet Packages: Ensure that all NuGet packages are up to date to avoid compatibility issues. 

Sample Program.cs for Blazor WebAssembly: 

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System.Threading.Tasks;

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("#app");

        builder.Services.AddHttpClient("BlazingPizzaApp.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
            .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

        builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("BlazingPizzaApp.ServerAPI"));

        builder.Services.AddApiAuthorization();

        await builder.Build().RunAsync();
    }
}

Ensure App.razor Includes Authentication Components: 

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
            <FocusOnNavigate RouteData="routeData" Selector="h1" />
        </Found>
        <NotFound>
            <LayoutView Layout="typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

By following these steps, you should be able to resolve the invalid cast exception and properly configure authentication in your Blazor application. 

Please feel free to contact us if you have any additional questions.    

If you have found the answer provided to be helpful, please click on the "Accept answer/Upvote" button so that it is useful for other members in the Microsoft Q&A community.       

Thank you.