ASP.NET Core Blazor authentication and authorization
Note
This isn't the latest version of this article. For the current release, see the .NET 9 version of this article.
Warning
This version of ASP.NET Core is no longer supported. For more information, see the .NET and .NET Core Support Policy. For the current release, see the .NET 9 version of this article.
Important
This information relates to a pre-release product that may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
For the current release, see the .NET 9 version of this article.
This article describes ASP.NET Core's support for the configuration and management of security in Blazor apps.
Blazor uses the existing ASP.NET Core authentication mechanisms to establish the user's identity. The exact mechanism depends on how the Blazor app is hosted, server-side or client-side.
Security scenarios differ between authorization code running server-side and client-side in Blazor apps. For authorization code that runs on the server, authorization checks are able to enforce access rules for areas of the app and components. Because client-side code execution can be tampered with, authorization code executing on the client can't be trusted to absolutely enforce access rules or control the display of client-side content.
If authorization rule enforcement must be guaranteed, don't implement authorization checks in client-side code. Build a Blazor Web App that only relies on server-side rendering (SSR) for authorization checks and rule enforcement.
If authorization rule enforcement and the security of data and code must be guaranteed, don't develop a client-side app. Build a Blazor Server app.
Razor Pages authorization conventions don't apply to routable Razor components. If a non-routable Razor component is embedded in a page of a Razor Pages app, the page's authorization conventions indirectly affect the Razor component along with the rest of the page's content.
ASP.NET Core Identity is designed to work in the context of HTTP request and response communication, which generally isn't the Blazor app client-server communication model. ASP.NET Core apps that use ASP.NET Core Identity for user management should use Razor Pages instead of Razor components for Identity-related UI, such as user registration, login, logout, and other user management tasks. Building Razor components that directly handle Identity tasks is possible for several scenarios but isn't recommended or supported by Microsoft.
ASP.NET Core abstractions, such as SignInManager<TUser> and UserManager<TUser>, aren't supported in Razor components. For more information on using ASP.NET Core Identity with Blazor, see Scaffold ASP.NET Core Identity into a server-side Blazor app.
Note
The code examples in this article adopt nullable reference types (NRTs) and .NET compiler null-state static analysis, which are supported in ASP.NET Core in .NET 6 or later. When targeting ASP.NET Core 5.0 or earlier, remove the null type designation (?
) from examples in this article.
Don't store app secrets, connection strings, credentials, passwords, personal identification numbers (PINs), private .NET/C# code, or private keys/tokens in client-side code, which is always insecure. Client-side Blazor code should access secure services and databases through a secure web API that you control.
In test/staging and production environments, server-side Blazor code and web APIs should use secure authentication flows that avoid maintaining credentials within project code or configuration files. Outside of local development testing, we recommend avoiding the use of environment variables to store sensitive data, as environment variables aren't the most secure approach. For local development testing, the Secret Manager tool is recommended for securing sensitive data. For more information, see the following resources:
- Secure authentication flows (ASP.NET Core documentation)
- Managed identities for Microsoft Azure services (this article)
For client-side and server-side local development and testing, use the Secret Manager tool to secure sensitive credentials.
For Microsoft Azure services, we recommend using managed identities. Managed identities securely authenticate to Azure services without storing credentials in app code. For more information, see the following resources:
- What are managed identities for Azure resources? (Microsoft Entra documentation)
- Azure services documentation
The Blazor template:
- Adds antiforgery services automatically when AddRazorComponents is called in the
Program
file. - Adds Antiforgery Middleware by calling UseAntiforgery in its request processing pipeline in the
Program
file and requires endpoint antiforgery protection to mitigate the threats of Cross-Site Request Forgery (CSRF/XSRF). UseAntiforgery is called after UseHttpsRedirection. A call to UseAntiforgery must be placed after calls, if present, to UseAuthentication and UseAuthorization.
The AntiforgeryToken component renders an antiforgery token as a hidden field, and this component is automatically added to form (EditForm) instances. For more information, see ASP.NET Core Blazor forms overview.
The AntiforgeryStateProvider service provides access to an antiforgery token associated with the current session. Inject the service and call its GetAntiforgeryToken() method to obtain the current AntiforgeryRequestToken. For more information, see Call a web API from an ASP.NET Core Blazor app.
Blazor stores request tokens in component state, which guarantees that antiforgery tokens are available to interactive components, even when they don't have access to the request.
Note
Antiforgery mitigation is only required when submitting form data to the server encoded as application/x-www-form-urlencoded
, multipart/form-data
, or text/plain
since these are the only valid form enctypes.
For more information, see the following resources:
- Prevent Cross-Site Request Forgery (XSRF/CSRF) attacks in ASP.NET Core: This article is the primary ASP.NET Core article on the subject, which applies to server-side Blazor Server, the server project of Blazor Web Apps, and Blazor integration with MVC/Razor Pages.
- ASP.NET Core Blazor forms overview: The Antiforgery support section of the article pertains to Blazor forms antiforgery support.
Server-side Blazor apps are configured for security in the same manner as ASP.NET Core apps. For more information, see the articles under ASP.NET Core security topics.
The authentication context is only established when the app starts, which is when the app first connects to the WebSocket over a SignalR connection with the client. Authentication can be based on a cookie or some other bearer token, but authentication is managed via the SignalR hub and entirely within the circuit. The authentication context is maintained for the lifetime of the circuit. Apps periodically revalidate the user's authentication state every 30 minutes.
If the app must capture users for custom services or react to updates to the user, see ASP.NET Core server-side and Blazor Web App additional security scenarios.
Blazor differs from a traditional server-rendered web apps that make new HTTP requests with cookies on every page navigation. Authentication is checked during navigation events. However, cookies aren't involved. Cookies are only sent when making an HTTP request to a server, which isn't what happens when the user navigates in a Blazor app. During navigation, the user's authentication state is checked within the Blazor circuit, which you can update at any time on the server using the RevalidatingAuthenticationStateProvider
abstraction.
Important
Implementing a custom NavigationManager
to achieve authentication validation during navigation isn't recommended. If the app must execute custom authentication state logic during navigation, use a custom AuthenticationStateProvider
.
Note
The code examples in this article adopt nullable reference types (NRTs) and .NET compiler null-state static analysis, which are supported in ASP.NET Core in .NET 6 or later. When targeting ASP.NET Core 5.0 or earlier, remove the null type designation (?
) from the examples in this article.
The built-in or custom AuthenticationStateProvider service obtains authentication state data from ASP.NET Core's HttpContext.User. This is how authentication state integrates with existing ASP.NET Core authentication mechanisms.
For more information on server-side authentication, see ASP.NET Core Blazor authentication and authorization.
IHttpContextAccessor must be avoided with interactive rendering because there isn't a valid HttpContext
available.
IHttpContextAccessor can be used for components that are statically rendered on the server. However, we recommend avoiding it if possible.
HttpContext can be used as a cascading parameter only in statically-rendered root components for general tasks, such as inspecting and modifying headers or other properties in the App
component (Components/App.razor
). The value is always null
for interactive rendering.
[CascadingParameter]
public HttpContext? HttpContext { get; set; }
For scenarios where the HttpContext is required in interactive components, we recommend flowing the data via persistent component state from the server. For more information, see ASP.NET Core server-side and Blazor Web App additional security scenarios.
Don't use IHttpContextAccessor/HttpContext directly or indirectly in the Razor components of server-side Blazor apps. Blazor apps run outside of the ASP.NET Core pipeline context. The HttpContext isn't guaranteed to be available within the IHttpContextAccessor, and HttpContext isn't guaranteed to hold the context that started the Blazor app.
The recommended approach for passing request state to the Blazor app is through root component parameters during the app's initial rendering. Alternatively, the app can copy the data into a scoped service in the root component's initialization lifecycle event for use across the app. For more information, see ASP.NET Core server-side and Blazor Web App additional security scenarios.
A critical aspect of server-side Blazor security is that the user attached to a given circuit might become updated at some point after the Blazor circuit is established but the IHttpContextAccessor isn't updated. For more information on addressing this situation with custom services, see ASP.NET Core server-side and Blazor Web App additional security scenarios.
Server-side Blazor apps live in server memory, and multiple app sessions are hosted within the same process. For each app session, Blazor starts a circuit with its own dependency injection container scope, thus scoped services are unique per Blazor session.
Warning
We don't recommend apps on the same server share state using singleton services unless extreme care is taken, as this can introduce security vulnerabilities, such as leaking user state across circuits.
You can use stateful singleton services in Blazor apps if they're specifically designed for it. For example, use of a singleton memory cache is acceptable because a memory cache requires a key to access a given entry. Assuming users don't have control over the cache keys that are used with the cache, state stored in the cache doesn't leak across circuits.
For general guidance on state management, see ASP.NET Core Blazor state management.
In test/staging and production environments, server-side Blazor code and web APIs should use secure authentication flows that avoid maintaining credentials within project code or configuration files. Outside of local development testing, we recommend avoiding the use of environment variables to store sensitive data, as environment variables aren't the most secure approach. For local development testing, the Secret Manager tool is recommended for securing sensitive data. For more information, see the following resources:
- Secure authentication flows (ASP.NET Core documentation)
- Managed identities for Microsoft Azure services (Blazor documentation)
For client-side and server-side local development and testing, use the Secret Manager tool to secure sensitive credentials.
Create a new server-side Blazor app by following the guidance in Tooling for ASP.NET Core Blazor.
After choosing the server-side app template and configuring the project, select the app's authentication under Authentication type:
- None (default): No authentication.
- Individual Accounts: User accounts are stored within the app using ASP.NET Core Identity.
- None (default): No authentication.
- Individual Accounts: User accounts are stored within the app using ASP.NET Core Identity.
- Microsoft identity platform: For more information, see ASP.NET Core Blazor authentication and authorization.
- Windows: Use Windows Authentication.
Blazor supports generating a full Blazor-based Identity UI when you choose the authentication option for Individual Accounts.
The Blazor Web App template scaffolds Identity code for a SQL Server database. The command line version uses SQLite and includes a SQLite database for Identity.
The template:
- Supports interactive server-side rendering (interactive SSR) and client-side rendering (CSR) scenarios with authenticated users.
- Adds Identity Razor components and related logic for routine authentication tasks, such as signing users in and out. The Identity components also support advanced Identity features, such as account confirmation and password recovery and multifactor authentication using a third-party app. Note that the Identity components themselves don't support interactivity.
- Adds the Identity-related packages and dependencies.
- References the Identity packages in
_Imports.razor
. - Creates a custom user Identity class (
ApplicationUser
). - Creates and registers an EF Core database context (
ApplicationDbContext
). - Configures routing for the built-in Identity endpoints.
- Includes Identity validation and business logic.
To inspect the Blazor framework's Identity components, access them in the Pages
and Shared
folders of the Account
folder in the Blazor Web App project template (reference source).
When you choose the Interactive WebAssembly or Interactive Auto render modes, the server handles all authentication and authorization requests, and the Identity components render statically on the server in the Blazor Web App's main project.
The framework provides a custom AuthenticationStateProvider in both the server and client (.Client
) projects to flow the user's authentication state to the browser. The server project calls AddAuthenticationStateSerialization
, while the client project calls AddAuthenticationStateDeserialization
. Authenticating on the server rather than the client allows the app to access authentication state during prerendering and before the .NET WebAssembly runtime is initialized. The custom AuthenticationStateProvider implementations use the Persistent Component State service (PersistentComponentState) to serialize the authentication state into HTML comments and then read it back from WebAssembly to create a new AuthenticationState instance. For more information, see the Manage authentication state in Blazor Web Apps section.
Only for Interactive Server solutions, IdentityRevalidatingAuthenticationStateProvider
(reference source) is a server-side AuthenticationStateProvider that revalidates the security stamp for the connected user every 30 minutes an interactive circuit is connected.
When you choose the Interactive WebAssembly or Interactive Auto render modes, the server handles all authentication and authorization requests, and the Identity components render statically on the server in the Blazor Web App's main project. The project template includes a PersistentAuthenticationStateProvider
class (reference source) in the .Client
project to synchronize the user's authentication state between the server and the browser. The class is a custom implementation of AuthenticationStateProvider. The provider uses the Persistent Component State service (PersistentComponentState) to prerender the authentication state and persist it to the page.
In the main project of a Blazor Web App, the authentication state provider is named either IdentityRevalidatingAuthenticationStateProvider
(reference source) (Server interactivity solutions only) or PersistingRevalidatingAuthenticationStateProvider
(reference source) (WebAssembly or Auto interactivity solutions).
Blazor Identity depends on DbContext instances not created by a factory, which is intentional because DbContext is sufficient for the project template's Identity components to render statically without supporting interactivity.
For a description on how global interactive render modes are applied to non-Identity components while at the same time enforcing static SSR for the Identity components, see ASP.NET Core Blazor render modes.
For more information on persisting prerendered state, see Prerender ASP.NET Core Razor components.
For more information on the Blazor Identity UI and guidance on integrating external logins through social websites, see What's new with identity in .NET 8.
Note
Documentation links to .NET reference source usually load the repository's default branch, which represents the current development for the next release of .NET. To select a tag for a specific release, use the Switch branches or tags dropdown list. For more information, see How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205).
This section applies to Blazor Web Apps that adopt:
- Individual Accounts
- Client-side rendering (CSR, WebAssembly-based interactivity).
A client-side authentication state provider is only used within Blazor and isn't integrated with the ASP.NET Core authentication system. During prerendering, Blazor respects the metadata defined on the page and uses the ASP.NET Core authentication system to determine if the user is authenticated. When a user navigates from one page to another, a client-side authentication provider is used. When the user refreshes the page (full-page reload), the client-side authentication state provider isn't involved in the authentication decision on the server. Since the user's state isn't persisted by the server, any authentication state maintained client-side is lost.
To address this, the best approach is to perform authentication within the ASP.NET Core authentication system. The client-side authentication state provider only takes care of reflecting the user's authentication state. Examples for how to accomplish this with authentication state providers are demonstrated by the Blazor Web App project template and described below.
In the server project's Program
file, call AddAuthenticationStateSerialization
, which serializes the AuthenticationState returned by the server-side AuthenticationStateProvider using the Persistent Component State service (PersistentComponentState):
builder.Services.AddRazorComponents()
.AddInteractiveWebAssemblyComponents()
.AddAuthenticationStateSerialization();
The API only serializes the server-side name and role claims for access in the browser. To include all claims, set SerializeAllClaims
to true
in the server-side call to AddAuthenticationStateSerialization
:
builder.Services.AddRazorComponents()
.AddInteractiveWebAssemblyComponents()
.AddAuthenticationStateSerialization(
options => options.SerializeAllClaims = true);
In the client (.Client
) project's Program
file, call AddAuthenticationStateDeserialization
, which adds an AuthenticationStateProvider where the AuthenticationState is deserialized from the server using AuthenticationStateData
and the Persistent Component State service (PersistentComponentState). There should be a corresponding call to AddAuthenticationStateSerialization
in the server project.
builder.Services.AddAuthorizationCore();
builder.Services.AddCascadingAuthenticationState();
builder.Services.AddAuthenticationStateDeserialization();
PersistingRevalidatingAuthenticationStateProvider
(reference source): For Blazor Web Apps that adopt interactive server-side rendering (interactive SSR) and client-side rendering (CSR). This is a server-side AuthenticationStateProvider that revalidates the security stamp for the connected user every 30 minutes an interactive circuit is connected. It also uses the Persistent Component State service to flow the authentication state to the client, which is then fixed for the lifetime of CSR.PersistingServerAuthenticationStateProvider
(reference source): For Blazor Web Apps that only adopt CSR. This is a server-side AuthenticationStateProvider that uses the Persistent Component State service to flow the authentication state to the client, which is then fixed for the lifetime of CSR.PersistentAuthenticationStateProvider
(reference source): For Blazor Web Apps that adopt CSR. This is a client-side AuthenticationStateProvider that determines the user's authentication state by looking for data persisted in the page when it was rendered on the server. This authentication state is fixed for the lifetime of CSR. If the user needs to log in or out, a full-page reload is required. This only provides a user name and email for display purposes. It doesn't include tokens that authenticate to the server when making subsequent requests, which is handled separately using a cookie that's included onHttpClient
requests to the server.
Note
Documentation links to .NET reference source usually load the repository's default branch, which represents the current development for the next release of .NET. To select a tag for a specific release, use the Switch branches or tags dropdown list. For more information, see How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205).
For more information on scaffolding Identity into a server-side Blazor app, see Scaffold Identity in ASP.NET Core projects.
Scaffold Identity into a server-side Blazor app:
To store additional claims from external providers, see Persist additional claims and tokens from external providers in ASP.NET Core.
Specify the issuer explicitly when deploying to Azure App Service on Linux with Identity Server. For more information, see Use Identity to secure a Web API backend for SPAs.
Don't attempt to resolve AuthenticationStateProvider within a custom scope because it results in the creation of a new instance of the AuthenticationStateProvider that isn't correctly initialized.
To access the AuthenticationStateProvider within a service scoped to a component, inject the AuthenticationStateProvider with the @inject
directive or the [Inject]
attribute and pass it to the service as a parameter. This approach ensures that the correct, initialized instance of the AuthenticationStateProvider is used for each user app instance.
ExampleService.cs
:
public class ExampleService
{
public async Task<string> ExampleMethod(AuthenticationStateProvider authStateProvider)
{
var authState = await authStateProvider.GetAuthenticationStateAsync();
var user = authState.User;
if (user.Identity is not null && user.Identity.IsAuthenticated)
{
return $"{user.Identity.Name} is authenticated.";
}
else
{
return "The user is NOT authenticated.";
}
}
}
Register the service as scoped. In a server-side Blazor app, scoped services have a lifetime equal to the duration of the client connection circuit.
In the Program
file:
builder.Services.AddScoped<ExampleService>();
In Startup.ConfigureServices
of Startup.cs
:
services.AddScoped<ExampleService>();
In the following InjectAuthStateProvider
component:
- The component inherits OwningComponentBase.
- The AuthenticationStateProvider is injected and passed to
ExampleService.ExampleMethod
. ExampleService
is resolved with OwningComponentBase.ScopedServices and GetRequiredService, which returns the correct, initialized instance ofExampleService
that exists for the lifetime of the user's circuit.
InjectAuthStateProvider.razor
:
@page "/inject-auth-state-provider"
@inherits OwningComponentBase
@inject AuthenticationStateProvider AuthenticationStateProvider
<h1>Inject <code>AuthenticationStateProvider</code> Example</h1>
<p>@message</p>
@code {
private string? message;
private ExampleService? ExampleService { get; set; }
protected override async Task OnInitializedAsync()
{
ExampleService = ScopedServices.GetRequiredService<ExampleService>();
message = await ExampleService.ExampleMethod(AuthenticationStateProvider);
}
}
@page "/inject-auth-state-provider"
@inject AuthenticationStateProvider AuthenticationStateProvider
@inherits OwningComponentBase
<h1>Inject <code>AuthenticationStateProvider</code> Example</h1>
<p>@message</p>
@code {
private string? message;
private ExampleService? ExampleService { get; set; }
protected override async Task OnInitializedAsync()
{
ExampleService = ScopedServices.GetRequiredService<ExampleService>();
message = await ExampleService.ExampleMethod(AuthenticationStateProvider);
}
}
For more information, see the guidance on OwningComponentBase in ASP.NET Core Blazor dependency injection.
To avoid showing unauthorized content, for example content in an AuthorizeView
component, while prerendering with a custom AuthenticationStateProvider
, adopt one of the following approaches:
Implement IHostEnvironmentAuthenticationStateProvider for the custom AuthenticationStateProvider to support prerendering: For an example implementation of IHostEnvironmentAuthenticationStateProvider, see the Blazor framework's ServerAuthenticationStateProvider implementation in
ServerAuthenticationStateProvider.cs
(reference source).Note
Documentation links to .NET reference source usually load the repository's default branch, which represents the current development for the next release of .NET. To select a tag for a specific release, use the Switch branches or tags dropdown list. For more information, see How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205).
Disable prerendering: Indicate the render mode with the
prerender
parameter set tofalse
at the highest-level component in the app's component hierarchy that isn't a root component.Note
Making a root component interactive, such as the
App
component, isn't supported. Therefore, prerendering can't be disabled directly by theApp
component.For apps based on the Blazor Web App project template, prerendering is typically disabled where the
Routes
component is used in theApp
component (Components/App.razor
) :<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
Also, disable prerendering for the
HeadOutlet
component:<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />
You can also selectively control the render mode applied to the
Routes
component instance. For example, see ASP.NET Core Blazor render modes.
Disable prerendering: Open the
_Host.cshtml
file and change therender-mode
attribute of the Component Tag Helper to Server:<component type="typeof(App)" render-mode="Server" />
- Authenticate the user on the server before the app starts: To adopt this approach, the app must respond to a user's initial request with the Identity-based sign-in page or view and prevent any requests to Blazor endpoints until they're authenticated. For more information, see Create an ASP.NET Core app with user data protected by authorization. After authentication, unauthorized content in prerendered Razor components is only shown when the user is truly unauthorized to view the content.
In spite of the word "state" in the name, AuthenticationStateProvider isn't for storing general user state. AuthenticationStateProvider only indicates the user's authentication state to the app, whether they are signed into the app and who they are signed in as.
Authentication uses the same ASP.NET Core Identity authentication as Razor Pages and MVC apps. The user state stored for ASP.NET Core Identity flows to Blazor without adding additional code to the app. Follow the guidance in the ASP.NET Core Identity articles and tutorials for the Identity features to take effect in the Blazor parts of the app.
For guidance on general state management outside of ASP.NET Core Identity, see ASP.NET Core Blazor state management.
Two additional abstractions participate in managing authentication state:
ServerAuthenticationStateProvider (reference source): An AuthenticationStateProvider used by the Blazor framework to obtain authentication state from the server.
RevalidatingServerAuthenticationStateProvider (reference source): A base class for AuthenticationStateProvider services used by the Blazor framework to receive an authentication state from the host environment and revalidate it at regular intervals.
The default 30 minute revalidation interval can be adjusted in
RevalidatingIdentityAuthenticationStateProvider
(Areas/Identity/RevalidatingIdentityAuthenticationStateProvider.cs
). The following example shortens the interval to 20 minutes:protected override TimeSpan RevalidationInterval => TimeSpan.FromMinutes(20);
Note
Documentation links to .NET reference source usually load the repository's default branch, which represents the current development for the next release of .NET. To select a tag for a specific release, use the Switch branches or tags dropdown list. For more information, see How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205).
Server-side Blazor persists user authentication state for the lifetime of the circuit, including across browser tabs. To proactively sign off a user across browser tabs when the user signs out on one tab, you must implement a RevalidatingServerAuthenticationStateProvider (reference source) with a short RevalidationInterval.
Note
Documentation links to .NET reference source usually load the repository's default branch, which represents the current development for the next release of .NET. To select a tag for a specific release, use the Switch branches or tags dropdown list. For more information, see How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205).
This section applies to Blazor Web Apps.
Use the RazorComponentsServiceOptions.TemporaryRedirectionUrlValidityDuration option to get or set the lifetime of ASP.NET Core Data Protection validity for temporary redirection URLs emitted by Blazor server-side rendering. These are only used transiently, so the lifetime only needs to be long enough for a client to receive the URL and begin navigation to it. However, it should also be long enough to allow for clock skew across servers. The default value is five minutes.
In the following example the value is extended to seven minutes:
builder.Services.AddRazorComponents(options =>
options.TemporaryRedirectionUrlValidityDuration =
TimeSpan.FromMinutes(7));
In client-side Blazor apps, client-side authentication checks can be bypassed because all client-side code can be modified by users. The same is true for all client-side app technologies, including JavaScript SPA frameworks and native apps for any operating system.
Add the following:
A package reference for the
Microsoft.AspNetCore.Components.Authorization
NuGet package.Note
For guidance on adding packages to .NET apps, see the articles under Install and manage packages at Package consumption workflow (NuGet documentation). Confirm correct package versions at NuGet.org.
The Microsoft.AspNetCore.Components.Authorization namespace to the app's
_Imports.razor
file.
To handle authentication, use the built-in or custom AuthenticationStateProvider service.
For more information on client-side authentication, see Secure ASP.NET Core Blazor WebAssembly.
AuthenticationStateProvider is the underlying service used by the AuthorizeView component and cascading authentication services to obtain the authentication state for a user.
AuthenticationStateProvider is the underlying service used by the AuthorizeView component and CascadingAuthenticationState component to obtain the authentication state for a user.
You don't typically use AuthenticationStateProvider directly. Use the AuthorizeView
component or Task<AuthenticationState>
approaches described later in this article. The main drawback to using AuthenticationStateProvider directly is that the component isn't notified automatically if the underlying authentication state data changes.
To implement a custom AuthenticationStateProvider, see ASP.NET Core Blazor authentication state, which includes guidance on implementing user authentication state change notifications.
The AuthenticationStateProvider service can provide the current user's ClaimsPrincipal data, as shown in the following example.
ClaimsPrincipalData.razor
:
@page "/claims-principal-data"
@using System.Security.Claims
@inject AuthenticationStateProvider AuthenticationStateProvider
<h1>ClaimsPrincipal Data</h1>
<button @onclick="GetClaimsPrincipalData">Get ClaimsPrincipal Data</button>
<p>@authMessage</p>
@if (claims.Any())
{
<ul>
@foreach (var claim in claims)
{
<li>@claim.Type: @claim.Value</li>
}
</ul>
}
<p>@surname</p>
@code {
private string? authMessage;
private string? surname;
private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();
private async Task GetClaimsPrincipalData()
{
var authState = await AuthenticationStateProvider
.GetAuthenticationStateAsync();
var user = authState.User;
if (user.Identity is not null && user.Identity.IsAuthenticated)
{
authMessage = $"{user.Identity.Name} is authenticated.";
claims = user.Claims;
surname = user.FindFirst(c => c.Type == ClaimTypes.Surname)?.Value;
}
else
{
authMessage = "The user is NOT authenticated.";
}
}
}
In the preceding example:
- ClaimsPrincipal.Claims returns the user's claims (
claims
) for display in the UI. - The line that obtains the user's surname (
surname
) calls ClaimsPrincipal.FindAll with a predicate to filter the user's claims.
@page "/claims-principal-data"
@using System.Security.Claims
@inject AuthenticationStateProvider AuthenticationStateProvider
<h1>ClaimsPrincipal Data</h1>
<button @onclick="GetClaimsPrincipalData">Get ClaimsPrincipal Data</button>
<p>@authMessage</p>
@if (claims.Any())
{
<ul>
@foreach (var claim in claims)
{
<li>@claim.Type: @claim.Value</li>
}
</ul>
}
<p>@surname</p>
@code {
private string? authMessage;
private string? surname;
private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();
private async Task GetClaimsPrincipalData()
{
var authState = await AuthenticationStateProvider
.GetAuthenticationStateAsync();
var user = authState.User;
if (user.Identity is not null && user.Identity.IsAuthenticated)
{
authMessage = $"{user.Identity.Name} is authenticated.";
claims = user.Claims;
surname = user.FindFirst(c => c.Type == ClaimTypes.Surname)?.Value;
}
else
{
authMessage = "The user is NOT authenticated.";
}
}
}
If user.Identity.IsAuthenticated
is true
and because the user is a ClaimsPrincipal, claims can be enumerated and membership in roles evaluated.
For more information on dependency injection (DI) and services, see ASP.NET Core Blazor dependency injection and Dependency injection in ASP.NET Core. For information on how to implement a custom AuthenticationStateProvider, see ASP.NET Core Blazor authentication state.
If authentication state data is required for procedural logic, such as when performing an action triggered by the user, obtain the authentication state data by defining a cascading parameter of type Task<
AuthenticationState>
, as the following example demonstrates.
CascadeAuthState.razor
:
@page "/cascade-auth-state"
<h1>Cascade Auth State</h1>
<p>@authMessage</p>
@code {
private string authMessage = "The user is NOT authenticated.";
[CascadingParameter]
private Task<AuthenticationState>? authenticationState { get; set; }
protected override async Task OnInitializedAsync()
{
if (authenticationState is not null)
{
var authState = await authenticationState;
var user = authState?.User;
if (user?.Identity is not null && user.Identity.IsAuthenticated)
{
authMessage = $"{user.Identity.Name} is authenticated.";
}
}
}
}
@page "/cascade-auth-state"
<h1>Cascade Auth State</h1>
<p>@authMessage</p>
@code {
private string authMessage = "The user is NOT authenticated.";
[CascadingParameter]
private Task<AuthenticationState>? authenticationState { get; set; }
protected override async Task OnInitializedAsync()
{
if (authenticationState is not null)
{
var authState = await authenticationState;
var user = authState?.User;
if (user?.Identity is not null && user.Identity.IsAuthenticated)
{
authMessage = $"{user.Identity.Name} is authenticated.";
}
}
}
}
If user.Identity.IsAuthenticated
is true
, claims can be enumerated and membership in roles evaluated.
Set up the Task<
AuthenticationState>
cascading parameter using the AuthorizeRouteView and cascading authentication state services.
When you create a Blazor app from one of the Blazor project templates with authentication enabled, the app includes the AuthorizeRouteView and the call to AddCascadingAuthenticationState shown in the following example. A client-side Blazor app includes the required service registrations as well. Additional information is presented in the Customize unauthorized content with the Router
component section.
<Router ...>
<Found ...>
<AuthorizeRouteView RouteData="routeData"
DefaultLayout="typeof(Layout.MainLayout)" />
...
</Found>
</Router>
In the Program
file, register cascading authentication state services:
builder.Services.AddCascadingAuthenticationState();
Set up the Task<
AuthenticationState>
cascading parameter using the AuthorizeRouteView and CascadingAuthenticationState components.
When you create a Blazor app from one of the Blazor project templates with authentication enabled, the app includes the AuthorizeRouteView and CascadingAuthenticationState components shown in the following example. A client-side Blazor app includes the required service registrations as well. Additional information is presented in the Customize unauthorized content with the Router
component section.
<CascadingAuthenticationState>
<Router ...>
<Found ...>
<AuthorizeRouteView RouteData="routeData"
DefaultLayout="typeof(MainLayout)" />
...
</Found>
</Router>
</CascadingAuthenticationState>
Note
With the release of ASP.NET Core 5.0.1 and for any additional 5.x releases, the Router
component includes the PreferExactMatches
parameter set to @true
. For more information, see Migrate from ASP.NET Core 3.1 to 5.0.
In a client-side Blazor app, add authorization services to the Program
file:
builder.Services.AddAuthorizationCore();
In a client-side Blazor app, add options and authorization services to the Program
file:
builder.Services.AddOptions();
builder.Services.AddAuthorizationCore();
In a server-side Blazor app, services for options and authorization are already present, so no further steps are required.
After a user is authenticated, authorization rules are applied to control what the user can do.
Access is typically granted or denied based on whether:
- A user is authenticated (signed in).
- A user is in a role.
- A user has a claim.
- A policy is satisfied.
Each of these concepts is the same as in an ASP.NET Core MVC or Razor Pages app. For more information on ASP.NET Core security, see the articles under ASP.NET Core Security and Identity.
The AuthorizeView component selectively displays UI content depending on whether the user is authorized. This approach is useful when you only need to display data for the user and don't need to use the user's identity in procedural logic.
The component exposes a context
variable of type AuthenticationState (@context
in Razor syntax), which you can use to access information about the signed-in user:
<AuthorizeView>
<p>Hello, @context.User.Identity?.Name!</p>
</AuthorizeView>
You can also supply different content for display if the user isn't authorized with a combination of the Authorized and NotAuthorized parameters:
<AuthorizeView>
<Authorized>
<p>Hello, @context.User.Identity?.Name!</p>
<p><button @onclick="HandleClick">Authorized Only Button</button></p>
</Authorized>
<NotAuthorized>
<p>You're not authorized.</p>
</NotAuthorized>
</AuthorizeView>
@code {
private void HandleClick() { ... }
}
Although the AuthorizeView component controls the visibility of elements based on the user’s authorization status, it doesn't enforce security on the event handler itself. In the preceding example, the HandleClick
method is only associated with a button visible to authorized users, but nothing prevents invoking this method from other places. To ensure method-level security, implement additional authorization logic within the handler itself or in the relevant API.
Razor components of Blazor Web Apps never display <NotAuthorized>
content when authorization fails server-side during static server-side rendering (static SSR). The server-side ASP.NET Core pipeline processes authorization on the server. Use server-side techniques to handle unauthorized requests. For more information, see ASP.NET Core Blazor render modes.
Warning
Client-side markup and methods associated with an AuthorizeView are only protected from view and execution in the rendered UI in client-side Blazor apps. In order to protect authorized content and secure methods in client-side Blazor, the content is usually supplied by a secure, authorized web API call to a server API and never stored in the app. For more information, see Call a web API from an ASP.NET Core Blazor app and ASP.NET Core Blazor WebAssembly additional security scenarios.
The content of Authorized and NotAuthorized can include arbitrary items, such as other interactive components.
Authorization conditions, such as roles or policies that control UI options or access, are covered in the Authorization section.
If authorization conditions aren't specified, AuthorizeView uses a default policy:
- Authenticated (signed-in) users are authorized.
- Unauthenticated (signed-out) users are unauthorized.
The AuthorizeView component can be used in the NavMenu
component (Shared/NavMenu.razor
) to display a NavLink
component (NavLink), but note that this approach only removes the list item from the rendered output. It doesn't prevent the user from navigating to the component. Implement authorization separately in the destination component.
The AuthorizeView component supports role-based or policy-based authorization.
For role-based authorization, use the Roles parameter. In the following example, the user must have a role claim for either the Admin
or Superuser
roles:
<AuthorizeView Roles="Admin, Superuser">
<p>You have an 'Admin' or 'Superuser' role claim.</p>
</AuthorizeView>
To require a user have both Admin
and Superuser
role claims, nest AuthorizeView components:
<AuthorizeView Roles="Admin">
<p>User: @context.User</p>
<p>You have the 'Admin' role claim.</p>
<AuthorizeView Roles="Superuser" Context="innerContext">
<p>User: @innerContext.User</p>
<p>You have both 'Admin' and 'Superuser' role claims.</p>
</AuthorizeView>
</AuthorizeView>
The preceding code establishes a Context
for the inner AuthorizeView component to prevent an AuthenticationState context collision. The AuthenticationState context is accessed in the outer AuthorizeView with the standard approach for accessing the context (@context.User
). The context is accessed in the inner AuthorizeView with the named innerContext
context (@innerContext.User
).
For more information, including configuration guidance, see Role-based authorization in ASP.NET Core.
For policy-based authorization, use the Policy parameter with a single policy name:
<AuthorizeView Policy="Over21">
<p>You satisfy the 'Over21' policy.</p>
</AuthorizeView>
To handle the case where the user should satisfy one of several policies, create a policy that confirms that the user satisfies other policies.
To handle the case where the user must satisfy several policies simultaneously, take either of the following approaches:
Create a policy for AuthorizeView that confirms that the user satisfies several other policies.
Nest the policies in multiple AuthorizeView components:
<AuthorizeView Policy="Over21"> <AuthorizeView Policy="LivesInCalifornia"> <p>You satisfy the 'Over21' and 'LivesInCalifornia' policies.</p> </AuthorizeView> </AuthorizeView>
Claims-based authorization is a special case of policy-based authorization. For example, you can define a policy that requires users to have a certain claim. For more information, see Policy-based authorization in ASP.NET Core.
If neither Roles nor Policy is specified, AuthorizeView uses the default policy:
- Authenticated (signed-in) users are authorized.
- Unauthenticated (signed-out) users are unauthorized.
Because .NET string comparisons are case-sensitive, matching role and policy names is also case-sensitive. For example, Admin
(uppercase A
) is not treated as the same role as admin
(lowercase a
).
Pascal case is typically used for role and policy names (for example, BillingAdministrator
), but the use of Pascal case isn't a strict requirement. Different casing schemes, such as camel case, kebab case, and snake case, are permitted. Using spaces in role and policy names is unusual but permitted by the framework. For example, billing administrator
is an unusual role or policy name format in .NET apps, but it's a valid role or policy name.
Blazor allows for authentication state to be determined asynchronously. The primary scenario for this approach is in client-side Blazor apps that make a request to an external endpoint for authentication.
While authentication is in progress, AuthorizeView displays no content. To display content while authentication occurs, assign content to the Authorizing parameter:
<AuthorizeView>
<Authorized>
<p>Hello, @context.User.Identity?.Name!</p>
</Authorized>
<Authorizing>
<p>You can only see this content while authentication is in progress.</p>
</Authorizing>
</AuthorizeView>
This approach isn't normally applicable to server-side Blazor apps. Server-side Blazor apps know the authentication state as soon as the state is established. Authorizing content can be provided in an app's AuthorizeView component, but the content is never displayed.
The [Authorize]
attribute is available in Razor components:
@page "/"
@attribute [Authorize]
You can only see this if you're signed in.
Important
Only use [Authorize]
on @page
components reached via the Blazor router. Authorization is only performed as an aspect of routing and not for child components rendered within a page. To authorize the display of specific parts within a page, use AuthorizeView instead.
The [Authorize]
attribute also supports role-based or policy-based authorization. For role-based authorization, use the Roles parameter:
@page "/"
@attribute [Authorize(Roles = "Admin, Superuser")]
<p>You can only see this if you're in the 'Admin' or 'Superuser' role.</p>
For policy-based authorization, use the Policy parameter:
@page "/"
@attribute [Authorize(Policy = "Over21")]
<p>You can only see this if you satisfy the 'Over21' policy.</p>
If neither Roles nor Policy is specified, [Authorize]
uses the default policy:
- Authenticated (signed-in) users are authorized.
- Unauthenticated (signed-out) users are unauthorized.
When the user isn't authorized and if the app doesn't customize unauthorized content with the Router
component, the framework automatically displays the following fallback message:
Not authorized.
To authorize users for resources, pass the request's route data to the Resource parameter of AuthorizeRouteView.
In the Router.Found content for a requested route:
<AuthorizeRouteView Resource="routeData" RouteData="routeData"
DefaultLayout="typeof(MainLayout)" />
For more information on how authorization state data is passed and used in procedural logic, see the Expose the authentication state as a cascading parameter section.
When the AuthorizeRouteView receives the route data for the resource, authorization policies have access to RouteData.PageType and RouteData.RouteValues that permit custom logic to make authorization decisions.
In the following example, an EditUser
policy is created in AuthorizationOptions for the app's authorization service configuration (AddAuthorizationCore) with the following logic:
- Determine if a route value exists with a key of
id
. If the key exists, the route value is stored invalue
. - In a variable named
id
, storevalue
as a string or set an empty string value (string.Empty
). - If
id
isn't an empty string, assert that the policy is satisfied (returntrue
) if the string's value starts withEMP
. Otherwise, assert that the policy fails (returnfalse
).
In the Program
file:
Add namespaces for Microsoft.AspNetCore.Components and System.Linq:
using Microsoft.AspNetCore.Components; using System.Linq;
Add the policy:
options.AddPolicy("EditUser", policy => policy.RequireAssertion(context => { if (context.Resource is RouteData rd) { var routeValue = rd.RouteValues.TryGetValue("id", out var value); var id = Convert.ToString(value, System.Globalization.CultureInfo.InvariantCulture) ?? string.Empty; if (!string.IsNullOrEmpty(id)) { return id.StartsWith("EMP", StringComparison.InvariantCulture); } } return false; }) );
The preceding example is an oversimplified authorization policy, merely used to demonstrate the concept with a working example. For more information on creating and configuring authorization policies, see Policy-based authorization in ASP.NET Core.
In the following EditUser
component, the resource at /users/{id}/edit
has a route parameter for the user's identifier ({id}
). The component uses the preceding EditUser
authorization policy to determine if the route value for id
starts with EMP
. If id
starts with EMP
, the policy succeeds and access to the component is authorized. If id
starts with a value other than EMP
or if id
is an empty string, the policy fails, and the component doesn't load.
EditUser.razor
:
@page "/users/{id}/edit"
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize(Policy = "EditUser")]
<h1>Edit User</h1>
<p>The "EditUser" policy is satisfied! <code>Id</code> starts with 'EMP'.</p>
@code {
[Parameter]
public string? Id { get; set; }
}
@page "/users/{id}/edit"
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize(Policy = "EditUser")]
<h1>Edit User</h1>
<p>The "EditUser" policy is satisfied! <code>Id</code> starts with 'EMP'.</p>
@code {
[Parameter]
public string? Id { get; set; }
}
The Router component, in conjunction with the AuthorizeRouteView component, allows the app to specify custom content if:
- The user fails an
[Authorize]
condition applied to the component. The markup of the<NotAuthorized>
element is displayed. The[Authorize]
attribute is covered in the[Authorize]
attribute section. - Asynchronous authorization is in progress, which usually means that the process of authenticating the user is in progress. The markup of the
<Authorizing>
element is displayed.
Important
Blazor router features that display <NotAuthorized>
and <NotFound>
content aren't operational during static server-side rendering (static SSR) because request processing is entirely handled by ASP.NET Core middleware pipeline request processing and Razor components aren't rendered at all for unauthorized or bad requests. Use server-side techniques to handle unauthorized and bad requests during static SSR. For more information, see ASP.NET Core Blazor render modes.
<Router ...>
<Found ...>
<AuthorizeRouteView ...>
<NotAuthorized>
...
</NotAuthorized>
<Authorizing>
...
</Authorizing>
</AuthorizeRouteView>
</Found>
</Router>
The content of Authorized and NotAuthorized can include arbitrary items, such as other interactive components.
Note
The preceding requires cascading authentication state services registration in the app's Program
file:
builder.Services.AddCascadingAuthenticationState();
<CascadingAuthenticationState>
<Router ...>
<Found ...>
<AuthorizeRouteView ...>
<NotAuthorized>
...
</NotAuthorized>
<Authorizing>
...
</Authorizing>
</AuthorizeRouteView>
</Found>
</Router>
</CascadingAuthenticationState>
The content of NotFound, Authorized, and NotAuthorized can include arbitrary items, such as other interactive components.
If NotAuthorized content isn't specified, the AuthorizeRouteView uses the following fallback message:
Not authorized.
An app created from the Blazor WebAssembly project template with authentication enabled includes a RedirectToLogin
component, which is positioned in the <NotAuthorized>
content of the Router component. When a user isn't authenticated (context.User.Identity?.IsAuthenticated != true
), the RedirectToLogin
component redirects the browser to the authentication/login
endpoint for authentication. The user is returned to the requested URL after authenticating with the identity provider.
If the app is required to check authorization rules as part of procedural logic, use a cascaded parameter of type Task<
AuthenticationState>
to obtain the user's ClaimsPrincipal. Task<
AuthenticationState>
can be combined with other services, such as IAuthorizationService
, to evaluate policies.
In the following example:
- The
user.Identity.IsAuthenticated
executes code for authenticated (signed-in) users. - The
user.IsInRole("admin")
executes code for users in the 'Admin' role. - The
(await AuthorizationService.AuthorizeAsync(user, "content-editor")).Succeeded
executes code for users satisfying the 'content-editor' policy.
A server-side Blazor app includes the appropriate namespaces when created from the project template. In a client-side Blazor app, confirm the presence of the Microsoft.AspNetCore.Authorization and Microsoft.AspNetCore.Components.Authorization namespaces either in the component or in the app's _Imports.razor
file:
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
ProceduralLogic.razor
:
@page "/procedural-logic"
@inject IAuthorizationService AuthorizationService
<h1>Procedural Logic Example</h1>
<button @onclick="@DoSomething">Do something important</button>
@code {
[CascadingParameter]
private Task<AuthenticationState>? authenticationState { get; set; }
private async Task DoSomething()
{
if (authenticationState is not null)
{
var authState = await authenticationState;
var user = authState?.User;
if (user is not null)
{
if (user.Identity is not null && user.Identity.IsAuthenticated)
{
// ...
}
if (user.IsInRole("Admin"))
{
// ...
}
if ((await AuthorizationService.AuthorizeAsync(user, "content-editor"))
.Succeeded)
{
// ...
}
}
}
}
}
@page "/procedural-logic"
@inject IAuthorizationService AuthorizationService
<h1>Procedural Logic Example</h1>
<button @onclick="@DoSomething">Do something important</button>
@code {
[CascadingParameter]
private Task<AuthenticationState>? authenticationState { get; set; }
private async Task DoSomething()
{
if (authenticationState is not null)
{
var authState = await authenticationState;
var user = authState?.User;
if (user is not null)
{
if (user.Identity is not null && user.Identity.IsAuthenticated)
{
// ...
}
if (user.IsInRole("Admin"))
{
// ...
}
if ((await AuthorizationService.AuthorizeAsync(user, "content-editor"))
.Succeeded)
{
// ...
}
}
}
}
}
Common errors:
Authorization requires a cascading parameter of type
Task<AuthenticationState>
. Consider usingCascadingAuthenticationState
to supply this.null
value is received forauthenticationStateTask
It's likely that the project wasn't created using a server-side Blazor template with authentication enabled.
In .NET 7 or earlier, wrap a <CascadingAuthenticationState>
around some part of the UI tree, for example around the Blazor router:
<CascadingAuthenticationState>
<Router ...>
...
</Router>
</CascadingAuthenticationState>
In .NET 8 or later, don't use the CascadingAuthenticationState component:
- <CascadingAuthenticationState>
<Router ...>
...
</Router>
- </CascadingAuthenticationState>
Instead, add cascading authentication state services to the service collection in the Program
file:
builder.Services.AddCascadingAuthenticationState();
The CascadingAuthenticationState component (.NET 7 or earlier) or services provided by AddCascadingAuthenticationState (.NET 8 or later) supplies the Task<
AuthenticationState>
cascading parameter, which in turn it receives from the underlying AuthenticationStateProvider dependency injection service.
Microsoft uses the GDPR definition for 'personal data' (GDPR 4.1) when documentation discusses Personally Identifiable Information (PII).
PII refers any information relating to an identified or identifiable natural person. An identifiable natural person is one who can be identified, directly or indirectly, with any of the following:
- Name
- Identification number
- Location coordinates
- Online identifier
- Other specific factors
- Physical
- Physiological
- Genetic
- Mental (psychological)
- Economic
- Cultural
- Social identity
- Server-side and Blazor Web App resources
- Quickstart: Add sign-in with Microsoft to an ASP.NET Core web app
- Quickstart: Protect an ASP.NET Core web API with Microsoft identity platform
- Configure ASP.NET Core to work with proxy servers and load balancers: Includes guidance on:
- Using Forwarded Headers Middleware to preserve HTTPS scheme information across proxy servers and internal networks.
- Additional scenarios and use cases, including manual scheme configuration, request path changes for correct request routing, and forwarding the request scheme for Linux and non-IIS reverse proxies.
- Microsoft identity platform documentation
- ASP.NET Core security topics
- Configure Windows Authentication in ASP.NET Core
- Build a custom version of the Authentication.MSAL JavaScript library
- Awesome Blazor: Authentication community sample links
- ASP.NET Core Blazor Hybrid authentication and authorization
- Server-side Blazor resources
- Quickstart: Add sign-in with Microsoft to an ASP.NET Core web app
- Quickstart: Protect an ASP.NET Core web API with Microsoft identity platform
- Configure ASP.NET Core to work with proxy servers and load balancers: Includes guidance on:
- Using Forwarded Headers Middleware to preserve HTTPS scheme information across proxy servers and internal networks.
- Additional scenarios and use cases, including manual scheme configuration, request path changes for correct request routing, and forwarding the request scheme for Linux and non-IIS reverse proxies.
- Microsoft identity platform documentation
- ASP.NET Core security topics
- Configure Windows Authentication in ASP.NET Core
- Build a custom version of the Authentication.MSAL JavaScript library
- Awesome Blazor: Authentication community sample links
ASP.NET Core feedback
ASP.NET Core is an open source project. Select a link to provide feedback: