How do I add authentication to a Blazor WebAssembly app?

Create a Blazor WebAssembly app with individual user account authentication in Visual Studio 2019.

Install the NuGet package named “Microsoft.AspNetCore.Components.WebAssembly.Authentication” using the NuGet package manager.

To support the authenticating service, add the AddOidcAuthentication service configuration to the Program.cs file.
[Program.cs]

using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
. . .
 
  builder.Services.AddOidcAuthentication(options =>
       {
         builder.Configuration.Bind("Auth0", options.ProviderOptions);
         options.ProviderOptions.ResponseType = "code";
       });

In wwwroot/appsettings.json file, replace the Authority and Client ID placeholders with the proper values taken from the Auth0 dashboard.
Note: Use Auth0; it will let you integrate authentication for configuring your application. Refer to this link for how to configure the application.
[wwwroot/appsetting.json]

{
   "Auth0": {
     "Authority": "https://<YOUR_AUTH0_DOMAIN>",
     "ClientId": "<YOUR_CLIENT_ID>"
   }
}

Add the authentication service script reference to the index.html file, which handles the low-level details of the OIDC protocol.
[index.html]

<body>
  
     //. . .
  
     <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js">
     </script>
     
 </body>

Add CascadingAuthenticationState and AuthorizeRouteView to display the page matching the specified route only if the user is authorized. Otherwise, it redirects to the Login page.
[App.razor]

<CascadingAuthenticationState>
     
 <Router AppAssembly="@typeof(Program).Assembly">
     <Found Context="routeData">
         <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
             <Authorizing>
                 <p>Loading...</p>
             </Authorizing>
             <NotAuthorized>
                 <p>You're not authorized to reach this page. You need to log in.</p>
             </NotAuthorized>
         </AuthorizeRouteView>
     </Found>
     <NotFound>        
         <p>Sorry, there's nothing at this address.</p>        
     </NotFound>
 </Router>
 </CascadingAuthenticationState>

Create a Razor component to allow the user to log in to be authenticated in the Shared folder.
[Shared/LoginControl.razor]

@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

  
 @inject NavigationManager UriHelper

 @inject SignOutSessionStateManager SignOutManager
  
 <AuthorizeView>
     <Authorized>
         Hello, @context.User.Identity.Name!
         <a href="#" @onclick="OnClickEvent">Log out</a>
     </Authorized>
     <NotAuthorized>
         <a href="authentication/login">Log in</a>
     </NotAuthorized>
 </AuthorizeView>
  
 @code{
     private async Task OnClickEvent(MouseEventArgs args)
     {
         await SignOutManager.SetSignOutState();
         UriHelper.NavigateTo("authentication/logout");
     }
 }

Reference the LoginControl page in the MainLayout.razor page.
[MainLayout.razor]

<div class="main">
         <div class="top-row px-4 auth">
             <LoginControl />
             <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
         </div>
  
         <div class="content px-4">
             @Body
         </div>
     </div>

Create an Authentication.razor component in the Pages folder to authenticate the user when logging in and out of the app.
[Pages/Authentication.razor]

@page "/authentication/{action}"

@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

 @using Microsoft.Extensions.Configuration

  
 @inject NavigationManager UriHelper

 @inject IConfiguration Config
  
 <RemoteAuthenticatorView Action="@Action">
     <LogOut>
         @{
             var authority = (string)Config["Auth0:Authority"];
             var clientId = (string)Config["Auth0:ClientId"];
  
             UriHelper.NavigateTo($"{authority}/v2/logout?client_id={clientId}");
         }
     </LogOut>
 </RemoteAuthenticatorView>
  
 @code{
     [Parameter] 
     public string Action { get; set; }
 }

Now display the authorized content when the app is authorized. If the app is not authorized, display the “Not Authorized” message to the user.
[Index.razor]

@page "/"
  
<AuthorizeView>
     <Authorized>
         <h1>Hello, @context.User.Identity.Name !</h1>
  
         <p>Welcome to your new app.</p>
     </Authorized>
     <NotAuthorized>
         <p>Not Authorized</p>
     </NotAuthorized>
 </AuthorizeView>

Press Ctrl + F5 to run the application and click Log in in the header to authenticate the user.