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

  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

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

Adjust the UI of your Blazor app

Not authorized Page

Registering the API with Auth0

  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

dotnet add package Microsoft.Extensions.Http

--

--

--

Turning coffee into code.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Installing Pyenv on Ubuntu 20.04

Mistakes Were Made: Lessons in Perseverance

Top 10 Hreflang Issues to Get International SEO Right

Trip Report: HackCU 4

Application instrumentation with aspect-oriented programming in PHP.

Rails — My third project for Flatiron School

Media server supporting AV1, H265 and more. Callaba introduces video conferencing API for business

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
Benjamin Vertonghen

Benjamin Vertonghen

Turning coffee into code.

More from Medium

Range & Index — C#8 features under the radar

Let’s Learn Blazor: Blazor Server with SignalR

Dot Net library compatibility with Core and Framework

Learning Aspnet core 👩‍🏫