It has been close to a year since I did my first into post on Blazor, ASP.NET Core Basics: Blazor, and a lot has changed. The biggest thing is that it was announced that Server-Side Blazor is going to ship with .NET Core 3. This post is going to walk through creating a server-side Blazor application including authentication.
Sever-Side Blazor
What is server-side Blazor and how is it different from client-side Blazor? The quick answer is that client-side Blazor uses WebAssembly and Mono to run .NET code in the browser allowing for basically a SPA written in .NET. With Server-Side Blazor the app is executed on the server and update/processing are requested over a SignalR connection.
For a deeper dive into the differences check out the ASP.NET Core Blazor hosting models doc.
Pre-requisites
To start make sure to install at least preview 6 of .NET Core 3. Using a command prompt you can run the following command to see which versions of the .NET Core SDK are installed.
dotnet --list-sdks
The previews of .NET Core 3 can be downloaded from here. Also, make sure to use the latest preview of Visual Studio 2019.
Application Creation
I used the following command from the command prompt to create a new Blazor application using individual authentication.
dotnet new blazorserverside --auth Individual
Visual Studio also has the template available if you select the ASP.NET Core Web Application project type and about three screens in select the Blazor Server App option.
After the creation process is complete open the project in Visual Studio. At this point, if you run the application you will see the standard options to log in or register.
Requiring Auth for a Page
At this point, the application allows account creation and login, but all pages are available to all user, even if they aren’t logged in. There are multiple ways to deal with this. For this post, I’m going with the closest to what I am used to from MVC which is using an Authorize attribute. In the Pages directory open then FetchData.razor file and make the following changes to make the page require the user to be authorized. Note that this method should only be used on page components.
Before:
@page "/fetchdata" @using BlazorAuth.Data @inject WeatherForecastService ForecastService
After:
@page "/fetchdata" @using BlazorAuth.Data @using Microsoft.AspNetCore.Authorization @attribute [Authorize] @inject WeatherForecastService ForecastService
Now if you go to the Fetch data page without being logged in you will see a Not authorized message. This message can be customized using the AuthorizeView component. You can find more details in the docs.
Wrapping Up
It is neat seeing how far Blazor has come since I last played with it. The docs are great and the product has improved a ton. I may do a follow-up post to go more into how to use the AuthorizeView component.
Make sure to check out the official docs on Blazor authentication and authorization to get the full picture of the subject.
Also published on Medium.