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

Let’s take a look at the structure of our Blazor Server project. It will come in handy to figure out how to move when we integrate the application with Auth0.

# Project structure

In the following, we can explore the folders and files that our Blazor Server project consists of.

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <UseAppHost>false</UseAppHost>
  </PropertyGroup>

</Project>


@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using MyBlazorServerApp
@using MyBlazorServerApp.Shared


using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using MyBlazorServerApp.Data;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();


<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

The following sections will discuss the content of each folder in more detail.

# The root folder

The project folder should look like this:

The root folder of our project contains a bunch of folders and a few files.

Beyond the `MyBlazorServerApp.csproj` file, which is the C# project file, we have the following:

- The `Program.cs` file, containing the startup code of our application.
- The `App.razor` file, representing the main [Razor component](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-6.0) of our Blazor application.
- The `_Imports.razor` file, which imports the namespaces used in the application.
- The `appsettings.*` files, which contains configuration values for the application.

Examine the structure of our newly created Blazor Server application.

Introduction to Blazor and Auth0

Secure Blazor Server Applications

Secure Blazor WebAssembly Applications

Conclusion

Anatomy of a Blazor Server Application

Project structure

The root folder