YOUR_AUTH0_DOMAIN

YOUR_CLIENT_ID

YOUR_WASM_CLIENT_ID

Insert your WebAssembly application Auth0 client id

YOUR_API_IDENTIFIER

Gain insights into securing Blazor applications with Auth0. Delve into setting up Blazor Server and WebAssembly, integrating Auth0 SDK, adding login functions, and protecting components and APIs.

blazor.tar.gz

Blazor Server Starter

Blazor Server Updater and Starter

Blazor WebAssembly Starter

Blazor WebAssenbly Updater and Starter

Blazor is a .NET framework that delivers native performance on web clients through C# runtimes and HTML wrapping. Auth0 helps you secure these applications through identity management, authentication, and authorization.

This course is a step-by-step guide to securing Blazor Server and Blazor WebAssembly applications with Auth0. You’ll start with an introduction to Blazor and its two hosting models— server-side and portable WASM binarie. You’ll then explore Auth0, which is an identity and access management (IAM) platform for connected applications. Next, you’ll set up and run a server application, integrate the Auth0 SDK, and add login functions before testing for security. You’ll finish by creating a Blazor WASM application and protecting each individual component with Auth0, including the UI and the Web API.

By the end of this course, you’ll be equipped with the proper tools to build and deploy secure web applications with the .NET’s Blazor framework and secure them with Auth0.

Securing Blazor Applications with Auth0

We'll run our basic Blazor WebAssembly application based on the standard .NET project template to make sure that everything works as expected.

# Launch the application

Let’s move to the `MyBlazorWasmApp` folder and type the following command in our terminal window:

```
dotnet run --project Server
```

## Heads up for Mac users!
If you're using a Mac, you may be affected by an issue when running an ASP.N<span>ET</span> Core application through the .NET CLI. The following window may appear repeatedly:

<center>
<img src="/api/collection/6586453712175104/5516318052188160/page/4693037397049344/image/6673985788182528?page_type=collection_lesson"
width = 400
/>
</center>

To work around the issue, let's move to the `Server` folder and open the `MyBlazorWasmApp.Server.csproj` file. Then, add the `<UseAppHost>false</UseAppHost>` element to the `<PropertyGroup>` element.

The following example shows how the content of the `MyBlazorWasmApp.Server.csproj` file should look:

```xml
<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <UseAppHost>false</UseAppHost>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="6.0.4" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\Client\MyBlazorWasmApp.Client.csproj" />
    <ProjectReference Include="..\Shared\MyBlazorWasmApp.Shared.csproj" />
  </ItemGroup>

</Project>
```

Visual Studio users are not affected by this issue.

Learn to launch, browse, navigate, and interact with the Blazor WebAssembly application.

Introduction to Blazor and Auth0

Secure Blazor Server Applications

Secure Blazor WebAssembly Applications

Conclusion

Run the Blazor WebAssembly Application

Launch the application

Heads up for Mac users!