.NET 9.0, Blazor, ASP.NET Core Web API, Azure, Auth0, FluentUI, FluentValidation, Backend for Frontend (BFF), Entity Framework Core, MS SQL Server, SQLite

A .NET 9.0 Blazor framework for hosting and building Blazor applications using the Backend for Frontend (BFF) pattern. It comes with authentication, authorisation, change tracking, and persisting structured logs to the database. Follow the instructions for publishing to Azure.

See the Worked Examples for step-by-step guidance on how to introduce new modules into the Atlas framework.

Table of Contents

• Setup the Solution
  • Multiple Startup Projects
  • Atlas.API Configuration
  • Atlas.Blazor.Web.App Configuration
  • Create the Database
  • Insert Seed Data
• Authentication
  • Create an Auth0 Role
  • Create Auth0 Users
  • Securing Atlas.API
  • Securing Atlas.Blazor.Web.App
  • Log In
• Authorization
  • Users, Roles and Permissions
• Support Role
  • Logging
• Navigation
  • Modules, Categories and Pages
• Audit
• Publish Atlas to Azure
  • Steps to Publish Atlas to Azure
    • Resource Group
    • Web App + Database
    • Web App
    • Environment Variables
    • Auth0
    • Update Web API Configuration and Publish to Azure
    • Update Blazor Web App Configuration and Publish to Azure
• Worked Examples
  • Blazor Template
• Notes
  • FluentDesignTheme Dark/Light
  • Backend for frontend

Setup the Solution

Multiple Startup Projects

In the Solution Properties, specify multiple startup projects and set the action for both Atlas.API Web API and Atlas.Blazor.Web.App Blazor application, to Start.

Atlas.API Configuration

In the Atlas.API appsettings.json set the connection strings, configure Auth0 settings and generating seed data.

[!NOTE]
Read the next section on Authentication for how to configure Auth0 as the identity provider.

{
  "ConnectionStrings": {
    "DefaultConnection": ""   👈 set the Atlas database connection string
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning",
      "Microsoft.EntityFrameworkCore.Database.Command": "Information"
    }
  },
  "Serilog": {
    "Using": [ "Serilog.Sinks.MSSqlServer" ],
    "MinimumLevel": {
      "Default": "Information",
      "Override": {
        "Microsoft": "Error",
        "Microsoft.EntityFrameworkCore.Database.Command": "Information"
      }
    },
    "WriteTo": [
      {
        "Name": "MSSqlServer",
        "Args": {
          "connectionString": "",   👈set the Atlas database connection string for Serilogs MS SqlServer
          "tableName": "Logs",
          "autoCreateSqlTable": true,
          "columnOptionsSection": {
            "customColumns": [
              {
                "ColumnName": "User",
                "DataType": "nvarchar",
                "DataLength": 450
              },
              {
                "ColumnName": "Context",
                "DataType": "nvarchar",
                "DataLength": 450
              }
            ]
          }
        }
      }
    ]
  },
  "AllowedHosts": "*",
  "Auth0": {
    "Domain": "",                        👈specify the Auth0 domain
    "Audience": "https://Atlas.API.com"  👈specify the audience
  },
  "SeedData": {
    "GenerateSeedData": "true", 👈 set to true to create seed data including modules, categories, pages, users, permissions and roles.
    "GenerateSeedLogs":  "true" 👈 set to true to generate mock logs
  }
}

Atlas.Blazor.Web.App Configuration

In the Atlas.Blazor.Web.App appsettings.json configure Auth0 settings and specify the Atlas.API url.

[!NOTE]
Read the next section on Authentication for how to configure Auth0 as the identity provider.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning",
      "Microsoft.EntityFrameworkCore.Database.Command": "Warning"
    }
  },
  "Serilog": {
    "Using": [ "Serilog.Sinks.MSSqlServer" ],
    "MinimumLevel": {
      "Default": "Information",
      "Override": {
        "Microsoft": "Error",
        "Microsoft.EntityFrameworkCore.Database.Command": "Information"
      }
    },
    "WriteTo": [
      {
        "Name": "MSSqlServer",
        "Args": {
          "connectionString": "",    👈set the Atlas database connection string for Serilogs MS SqlServer
          "tableName": "Logs",
          "autoCreateSqlTable": true,
          "columnOptionsSection": {
            "customColumns": [
              {
                "ColumnName": "User",
                "DataType": "nvarchar",
                "DataLength": 450
              },
              {
                "ColumnName": "Context",
                "DataType": "nvarchar",
                "DataLength": 450
              }
            ]
          }
        }
      }
    ]
  },
  "AllowedHosts": "*",
  "Auth0": {
    "Domain": "",                           👈specify the Auth0 domain
    "ClientId": "",                         👈specify the Auth0 ClientId
    "ClientSecret": "",                     👈specify the Auth0 ClientSecret
    "Audience": "https://Atlas.API.com"     👈specify the audience
  },
  "AtlasAPI": "https://localhost:44420"     👈specify the AtlasAPI url
}

Create the Database

Use the .NET CLI for Entity Framework to create your database and create your schema from the migration. In the Developer Powershell or similar, navigate to the Atlas.API folder and run the following command.

dotnet ef database update --project ..\..\data\Atlas.Migrations.SQLServer

Insert Seed Data

In the Atlas.API appsettings.json configuration file set GenerateSeedData and GenerateSeedLogs to true. This will populate the database with seed data at startup.

[!WARNING]
If "GenerateSeedData": "true" the tables in the Atlas database will be truncated and repopulated with seed data every time the application starts. Existing data will be permanently lost.

  "SeedData": {
    "GenerateSeedData": "true", 👈 set to true to create seed data including modules, categories, pages, users, permissions and roles.
    "GenerateSeedLogs":  "true" 👈 set to true to generate mock logs
  }

Authentication

Atlas is setup to use Auth0 as its authentication provider, although this can be swapped out for any provider supporting OAuth 2.0. With Auth0 you can create a free account and it has a easy to use dashboard for registering applications, and creating and managing roles and users.

Using the Auth0, register the Atlas.API Web API and Atlas.Blazor.Web.App Blazor application, and create a atlas-user role and users.

Create an Auth0 Role

In the Auth0 dashboard create a role called atlas-user. This role must be assigned to all users wishing to access the Atlas application.

[!IMPORTANT]
Atlas users must be assigned the atlas-user role in Auth0 to access the Atlas application.

Create Auth0 Users

Create Auth0 users. The user's Auth0 email claim is mapped to the email of an authorised user in the Atlas database.

[!IMPORTANT]
Atlas users must be assigned the atlas-user role to access the Atlas application.

[!TIP] SeedData.cs already contains some pre-defined sample users with roles and permissions. Either create these users in Auth0, or amend the sample users in SeedData.cs to reflect those created in Auth0.

[!WARNING]
If "GenerateSeedData": "true" the tables in the Atlas database will be truncated and repopulated with seed data every time the application starts. Existing data will be permanently lost.

        private static void Create