• In this article, we are going to simply learn how we can secure our Blazor Web Assembly app using Azure Active Directory.
• AAD provides an intelligent Identity as a Service that can protect your application.
• In this demo, we are going to use it to protect our Blazor Web Assembly App.

Go to the Azure portal and go to Azure Active Directory.

In there, go to App registrations. We are going to register a new application for our Blazor app.

Click New Registration.

Give a name to your application.

For the supported account types, we are going to go with the default option which is that it will pick up accounts in this active directory only. For the redirect URI, choose web and add this URI – https://localhost:5001/authentication/login-callback
We use this port because it is the default port in IIS Express. You can change the port if you use a different one. Click Register.

This is the application in my AAD. These are the details that we are going to need later with the details being Display Name, Application ID i.e. Client ID and the Directory ID i.e. Tenant ID.

Next, go to authentication and check these two boxes i.e. Access tokens and ID tokens. This enables implicit grant. The Implicit Grant Type is a way for an application to get an access token without an intermediate code exchange step. It was originally created for use by JavaScript apps which don’t have a way to safely store secrets. Click Save.

Now to create the Blazor Web Assembly app, we will have to open the command prompt.

Run this command to create the Blazor Web Assembly App.
dotnet new blazorwasm -au SingleOrg –client-id “YourClientID” -o YourApplicationName –tenant-id “YourTenantID“

The app will be created easily.

A standalone Blazor Web Assembly app will be created and this is what its folder structure will look like.

Switch to the application directory. Next, to build the application, run the command dotnet build

Next, run the command dotnet run. It will run our application on port number 5001.

The app will look like this in the browser.

There will be the default counter app. This is running WebAssembly in the browser.

And there will be the log in button. Click it. Here you can authenticate.

Enter the credentials of your Azure account and you will logged in.

That is it for this simple yet informative article. You can use Azure Active Directory to protect all kinds of applications and Blazor Web Assembly application is just one of them. Go ahead and try this for yourself.