Blazor authentication is implemented to determine who a particular user is. Blazor follows the existing ASP.NET Core authentication mechanisms to show a user’s identity.
Follow these steps to implement authentication within Blazor WebAssembly:
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.
Refer to this documentation for more details.
Share with