Preview 6 Version of ASP.NET Core 3.0 was released and one interesting new feature is authentication and authorization for server-side Blazor applications. This blog post goes through work currently done and shows how authentication works with server-side Blazor applications.
Creating a Server-Side Blazor Application
When creating a new server-side Blazor application, there’s an active change link in the Authentication section. Clicking on this link opens authentication options dialog.
There is a similar change link for other types of Blazor applications, but currently, they are grayed out.
When a Blazor application is created, we can see some interesting things in our Blazor project.
Things to notice:
- Server-size Blazor uses ASP.NET Core Identity (without scaffolding).
- For local user accounts, the Entity Framework Core database context and migrations are created.
- There’s new LoginDisplay Razor view in the project.
Registering Authentication
With ASP.NET Core Identity, things are actually straightforward, and there’s no reason to discuss it. It’s more interesting to find out how things are configured in Startup class.
public class Startup
{ public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } public void ConfigureServices(IServiceCollection services) { services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer( Configuration.GetConnectionString("DefaultConnection"))); services.AddDefaultIdentity<IdentityUser>() .AddEntityFrameworkStores<ApplicationDbContext>(); services.AddRazorPages(); services.AddServerSideBlazor(); services.AddSingleton<WeatherForecastService>(); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); app.UseDatabaseErrorPage(); } else { app.UseExceptionHandler("/Home/Error"); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthentication(); app.UseAuthorization(); app.UseEndpoints(endpoints => { endpoints.MapControllers(); endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); }); }
}From ConfigureServices() and Configure() methods, we can see that there’s nothing special or new. It’s all same as with ASP.NET Core Identity and regular ASP.NET Core applications. It makes sense as the server-side Blazor application runs also user interface events in the server using SignalR for data communication.
AuthorizeView Component
Let’s take a look inside LoginDisplay Razor view.
<AuthorizeView> <Authorized> <a href="Identity/Account/Manage">Hello, @context.User.Identity.Name!</a> <a href="Identity/Account/LogOut">Log out</a> </Authorized> <NotAuthorized> <a href="Identity/Account/Register">Register</a> <a href="Identity/Account/Login">Log in</a> </NotAuthorized>
</AuthorizeView>The markup probably doesn’t need any comments. Okay, I would like to say that it is really clean and communicative. No clutter, no ugly mess of markup – just nice and clean.
When sniffing around in Blazor libraries, we can see that AuthorizeView is a new Blazor component that comes with ASP.NET Core components library. In LoginDisplay view, it has only basic use — just show a different piece of HTML to authenticated and anonymous users.
Actually, we can use AuthorizeView on other pages to show sidebar blocks or header and footer content based on if the user is authenticated or not. I think a component like this will be very useful in Blazor applications to avoid ugly checks for authenticated user in Blazor views.
For client-side Blazor applications, it’s possible to use custom authentication. My blog post Azure AD authentication in Blazor using ADAL.js shows how to use Azure AD authentication with client-side Blazor applications.
Blazor Authentication in Action
Let’s take a look at some screenshots illustrating Blazor authentication. Before running the application, make sure you build an application and run the Update-Database command from the package manager console.
This is the default page of server-side Blazor applications when authentication is enabled.
Mostly, it looks like the default page before, but notice the Register and Log in links on the top bar. The Registration page is known for us from ASP.NET Core applications.
After successful registration we are redirected back to the front page and here is how it looks for an authenticated user.
Wrapping Up
Support for authentication is welcome to Blazor applications, and with server-side Blazor applications, the first step is made. It’s good to see that authentication options known from regular ASP.NET Core applications are used also here. Also, I think AuthorizeView component is a great approach to display content based on if the user is authenticated or not. Now, let’s wait for the next releases of Blazor and also see how client-side Blazor applications get out-of-box support for authentication.