Blazor Authentication with Auth0

Blazor + Auth0 = ❤️
  1. Blazor Authentication with Auth0 (this one)
  2. Blazor Authorization with Auth0
  3. Blazor With Auth0, using the Management API
  • How to authenticate your users with Auth0
  • Login with a social provider (Google in this case)
  • Protect your Blazor Client
  • Protect your REST API
  • Connect the authentication flow between the Client and the Server.
  • .NET 6
  • Blazor Web Assembly (WASM)
  • Auth0
  • As a customer I want to see weatherforecasts.
  • As an administrator I want to add new forecasts.

What is Role Based Access Control (RBAC)?

How can Auth0 help us?

dotnet new blazorwasm -o WeatherStation --hosted

Registering the Blazor WASM App with Auth0

If you don’t have an Auth0 account yet, you can sign up for a free one right now.

  1. Click the Create Application button.
  2. Provide a friendly name for your application (Weather Station Client) and select Single Page Web Applications as the application type.
  3. Finally, click the Create button.
  4. Move to the Settings Tab
  5. In the Allowed Callback URLs paste in the following link: https://localhost:5001/authentication/login-callback
  6. In the Allowed Logout URLs paste in the following link: https://localhost:5001

Configure your Blazor app for Authentication

Now, you need to configure your Blazor project by applying some changes to make it aware of Auth0. So, move to the Client/wwwroot folder and create an appsettings.json file with the following content:

dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Authentication

Adjust the UI of your Blazor app

At this point, you prepared the infrastructure for your Blazor app to support authentication. Now you need to make some changes to the User Interface so Authorization can be used.

Not authorized Page

Registering the API with Auth0

The data shown in the FetchData page is loaded from the /Weather API implemented in the server project. This API is not protected, so any client could access it. In fact, the Blazor WASM client is able to access it without any problem. However, in a production-ready scenario, you need to protect the API to prevent unauthorized access.

  1. Click the Create API button.
  2. Provide a friendly name for your API (for example, Weather Station API) and a unique identifier (also known as audience) in the URL format (for example, https://api.weather.com).
  3. Leave the signing algorithm to RS256 and click the Create button.
dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer

Calling the Protected API

To enable your Blazor WASM application to access the protected API, you need to get an access token from Auth0 and provide it along with your API call. You might think to write some code that attaches this token when you make an HTTP request to the server. However, you can centralize the access token attachment to your API calls in a straightforward way.

dotnet add package Microsoft.Extensions.Http

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store