Ajouter la fonctionnalité de connexion à votre application Blazor Server

Ce guide montre comment intégrer Auth0 à toute application Blazor Server, nouvelle ou existante, à l’aide du SDK Auth0.AspNetCore.Authentication.

Utilisez l’IA pour intégrer Auth0

Si vous utilisez un assistant de programmation par IA comme Claude Code, Cursor ou GitHub Copilot, vous pouvez ajouter automatiquement l’authentification Auth0 en quelques minutes grâce aux agent skills.

Installation :

npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-aspnetcore-authentication

Demandez ensuite à votre assistant IA :

Add Auth0 authentication to my Blazor Server app

Votre assistant IA créera automatiquement votre application Auth0, obtiendra les identifiants, installera le SDK d’authentification Auth0 pour ASP.NET Core, configurera le middleware d’authentification et implémentera les flux de connexion et de déconnexion. Documentation complète sur les agent skills →

Prérequis : Avant de commencer, assurez-vous d’avoir installé les éléments suivants :

• .NET SDK 8.0 ou une version ultérieure
• Votre éditeur de code préféré (Visual Studio, VS Code ou Rider)
• Un compte Auth0 (inscrivez-vous gratuitement)

​

Pour commencer

Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations du profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 à toute application Blazor Server, nouvelle ou existante, à l’aide du SDK Auth0.AspNetCore.Authentication.

1. Créer un nouveau projet

   Créez un projet Blazor Server pour ce guide de démarrage rapide

   dotnet new blazor -n SampleBlazorApp --interactivity Server
   

   Ouvrez le projet

   cd SampleBlazorApp
   
2. Installez le SDK Auth0

   dotnet add package Auth0.AspNetCore.Authentication
   
3. Configurez votre application Auth0

   Ensuite, créez une nouvelle application sur votre locataire Auth0 et ajoutez la configuration à votre projet.

   Vous pouvez effectuer cette opération automatiquement en exécutant une commande CLI ou manuellement via le Auth0 Dashboard :

   CLI

   Exécutez la commande shell suivante dans le répertoire racine de votre projet pour créer une application Auth0 et mettre à jour votre fichier appsettings.json :

   Mac/Linux

   AUTH0_APP_NAME="My Blazor App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:5000/callback -l http://localhost:5000 -o http://localhost:5000 --reveal-secrets --json --metadata created_by="quickstart-docs-cli" > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && CLIENT_SECRET=$(jq -r '.client_secret' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && rm auth0-app-details.json && cat > appsettings.json << EOF
   {
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*",
     "Auth0": {
       "Domain": "${DOMAIN}",
       "ClientId": "${CLIENT_ID}",
       "ClientSecret": "${CLIENT_SECRET}"
     }
   }
   EOF
   echo "appsettings.json created with your Auth0 details:" && cat appsettings.json
   

   Windows (PowerShell)

   $AUTH0_APP_NAME = "My Blazor App"
   $latestRelease = Invoke-RestMethod -Uri "https://api.github.com/repos/auth0/auth0-cli/releases/latest"
   $latestVersion = $latestRelease.tag_name
   $version = $latestVersion -replace "^v"
   Invoke-WebRequest -Uri "https://github.com/auth0/auth0-cli/releases/download/${latestVersion}/auth0-cli_${version}_Windows_x86_64.zip" -OutFile ".\auth0.zip"
   Expand-Archive ".\auth0.zip" .\
   [System.Environment]::SetEnvironmentVariable('PATH', $Env:PATH + ";${pwd}")
   auth0 login --no-input
   auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:5000/callback -l http://localhost:5000 -o http://localhost:5000 --reveal-secrets --json --metadata created_by="quickstart-docs-cli" | Set-Content -Path auth0-app-details.json
   $AppDetails = Get-Content -Raw auth0-app-details.json | ConvertFrom-Json
   $ClientId = $AppDetails.client_id
   $ClientSecret = $AppDetails.client_secret
   $Domain = (auth0 tenants list --json | ConvertFrom-Json | Where-Object { $_.active -eq $true }).name
   $Config = Get-Content -Raw appsettings.json | ConvertFrom-Json
   if (-not $Config.Auth0) { $Config | Add-Member -MemberType NoteProperty -Name Auth0 -Value @{} }
   $Config.Auth0.Domain = $Domain
   $Config.Auth0.ClientId = $ClientId
   $Config.Auth0.ClientSecret = $ClientSecret
   $Config | ConvertTo-Json -Depth 10 | Set-Content appsettings.json
   Remove-Item auth0-app-details.json
   Write-Output "✅ appsettings.json updated with your Auth0 details:"
   Get-Content appsettings.json
   

   Auth0 Dashboard

   Avant de commencer, créez ou mettez à jour appsettings.json dans le répertoire racine de votre projet

   appsettings.json

   {
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*",
     "Auth0": {
       "Domain": "YOUR_AUTH0_DOMAIN",
       "ClientId": "YOUR_CLIENT_ID",
       "ClientSecret": "YOUR_CLIENT_SECRET"
     }
   }
   

   1. Accédez à l’Auth0 Dashboard
   2. Cliquez sur Applications → Applications → Create Application
   3. Entrez un nom pour votre application (p. ex., “My Blazor App”)
   4. Sélectionnez Regular Web Application comme type d’application
   5. Cliquez sur Create
   6. Accédez à l’onglet Settings
   7. Remplacez YOUR_AUTH0_DOMAIN, YOUR_CLIENT_ID et YOUR_CLIENT_SECRET dans le fichier appsettings.json par les valeurs Domaine, ID client et Secret client de l’Auth0 Dashboard

   Configurer les URL de rappel :

   Dans l’onglet Settings, configurez les URL suivantes :

   • Allowed Callback URLs : http://localhost:5000/callback
   • URL de déconnexion autorisées : http://localhost:5000
   • Origines Web autorisées : http://localhost:5000

   Cliquez sur Enregistrer les modifications

   Important : Assurez-vous de configurer les connexions et de les activer pour votre application dans l’Auth0 Dashboard, à l’onglet Connexions.

4. Configurer l’authentification

   Mettez à jour votre Program.cs pour configurer l’authentification avec Auth0 :

   Program.cs

   using Auth0.AspNetCore.Authentication;
   using SampleBlazorApp.Components;
   
   var builder = WebApplication.CreateBuilder(args);
   
   // Ajouter l'authentification Auth0
   builder.Services.AddAuth0WebAppAuthentication(options =>
   {
       options.Domain = builder.Configuration["Auth0:Domain"];
       options.ClientId = builder.Configuration["Auth0:ClientId"];
       options.ClientSecret = builder.Configuration["Auth0:ClientSecret"];
   });
   
   // Ajouter les composants Razor et Blazor Server
   builder.Services.AddRazorComponents()
       .AddInteractiveServerComponents();
   
   // Ajouter l'état d'authentification en cascade
   builder.Services.AddCascadingAuthenticationState();
   
   // Ajouter les pages Razor pour les points de terminaison d'authentification
   builder.Services.AddRazorPages();
   
   var app = builder.Build();
   
   if (!app.Environment.IsDevelopment())
   {
       app.UseExceptionHandler("/Error", createScopeForErrors: true);
       app.UseHsts();
   }
   
   app.UseHttpsRedirection();
   app.UseAntiforgery();
   
   app.UseAuthentication();
   app.UseAuthorization();
   
   app.MapStaticAssets();
   app.MapRazorComponents<App>()
       .AddInteractiveServerRenderMode();
   
   // Mapper les pages Razor pour l'authentification
   app.MapRazorPages();
   
   app.Run();
   

   Remarque : L’ordre des middleware est important. UseAuthentication() doit être appelé avant UseAuthorization().

5. Ajouter des pages de connexion et de déconnexion

   Créez des pages Login et Logout pour que les utilisateurs puissent s’authentifier.

   Tout d’abord, créez le dossier Pages et les fichiers suivants :

   Mac/Linux

   mkdir -p Pages && touch Pages/Login.cshtml Pages/Login.cshtml.cs Pages/Logout.cshtml Pages/Logout.cshtml.cs Pages/_ViewImports.razor
   

   Windows (PowerShell)

   New-Item -ItemType Directory -Force -Path Pages; New-Item -ItemType File -Force -Path Pages/Login.cshtml, Pages/Login.cshtml.cs, Pages/Logout.cshtml, Pages/Logout.cshtml.cs, Pages/_ViewImports.razor
   

   Ajoutez ensuite les extraits de code suivants :

6. Créer la page de profil et mettre à jour la disposition

   Créez une page de profil utilisateur personnalisée pour afficher le nom et les claims de l’utilisateur, puis mettez en page à jour pour ajouter des liens de connexion et de déconnexion.

   Commencez par créer le composant Profile :

   Mac/Linux

   touch Components/Pages/Profile.razor
   

   Windows (PowerShell)

   New-Item -ItemType File -Force -Path Components/Pages/Profile.razor
   

   Ajoutez les extraits de code suivants. Veillez à ajouter le code MainLayout dans la section supérieure de votre mise en page, sans modifier le reste.

7. Lancez votre application

   dotnet run
   

   Votre application devrait démarrer et afficher l’URL sur laquelle elle répond :

   info: Microsoft.Hosting.Lifetime[14]
         Now listening on: http://localhost:5000
   

   Ouvrez votre navigateur et accédez à http://localhost:5000. Cliquez sur le lien Connexion dans le menu de navigation. Vous serez redirigé vers la page de connexion d’Auth0. Après vous être connecté, vous serez redirigé vers votre application, et vous devriez voir votre nom dans le menu de navigation.

Point de contrôle

Vous devriez maintenant avoir une application Blazor Server entièrement fonctionnelle protégée par Auth0, accessible à l’adresse http://localhost:5000. Les utilisateurs peuvent se connecter, consulter leur profil et se déconnecter.

---

​

Utilisation avancée

Personnaliser les paramètres de connexion

Vous pouvez transmettre des paramètres personnalisés à la page de connexion d’Auth0 :

Pages/Login.cshtml.cs

public async Task OnGet(string redirectUri = "/")
{
    var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
        .WithRedirectUri(redirectUri)
        .WithParameter("screen_hint", "signup")  // Afficher la page d’inscription
        .WithParameter("ui_locales", "es")       // Définir l’espagnol comme langue
        .Build();

    await HttpContext.ChallengeAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
}

Stocker les jetons pour les appels d’API

Si vous devez appeler des API externes au nom de l’utilisateur, vous pouvez récupérer et stocker les jetons :

Program.cs

builder.Services.AddAuth0WebAppAuthentication(options =>
{
    options.Domain = builder.Configuration["Auth0:Domain"];
    options.ClientId = builder.Configuration["Auth0:ClientId"];
    options.ClientSecret = builder.Configuration["Auth0:ClientSecret"];
})
.WithAccessToken(options =>
{
    options.Audience = "https://your-api.example.com";
    options.UseRefreshTokens = true;
});

Récupérez ensuite le jeton d’accès :

var accessToken = await HttpContext.GetTokenAsync("access_token");

// Utiliser le jeton d’accès pour appeler votre API
var client = new HttpClient();
client.DefaultRequestHeaders.Authorization = 
    new AuthenticationHeaderValue("Bearer", accessToken);

var response = await client.GetAsync("https://your-api.example.com/data");
var data = await response.Content.ReadAsStringAsync();

Configurer les organisations

Configurez la prise en charge des organisations dans les scénarios B2B :

Program.cs

builder.Services.AddAuth0WebAppAuthentication(options =>
{
    options.Domain = builder.Configuration["Auth0:Domain"];
    options.ClientId = builder.Configuration["Auth0:ClientId"];
    options.ClientSecret = builder.Configuration["Auth0:ClientSecret"];
    options.Organization = builder.Configuration["Auth0:Organization"];
});

Ou précisez l’organisation au moment de la connexion :

Pages/Login.cshtml.cs

var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
    .WithOrganization("org_abc123")
    .WithRedirectUri("/")
    .Build();

---

​

Problèmes courants

Impossible d’obtenir la configuration

Problème : Unable to obtain configuration from: https://your-tenant.auth0.com/.well-known/openid-configuration

Solution : Vérifiez que votre Domaine est correct et qu’il n’inclut pas https://. La bibliothèque construit automatiquement l’URL d’autorité.

{
  "Auth0": {
    "Domain": "your-tenant.auth0.com"  // Correct : aucun protocole
  }
}

Assurez-vous également de ce qui suit :

• Aucune barre oblique à la fin de la valeur du domaine
• Votre application dispose d’un accès Internet pour joindre Auth0
• Le format du domaine correspond à la région de votre locataire (.auth0.com, .us.auth0.com, .eu.auth0.com)

Valeurs de configuration introuvables

Problème : ArgumentNullException: Value cannot be null. (Parameter 'Domain') ou un message semblable.

Solution : Assurez-vous que appsettings.json contient la section Auth0 avec les valeurs Domain, ClientId et ClientSecret. Vérifiez que la configuration est lue correctement :

Program.cs

builder.Services.AddAuth0WebAppAuthentication(options =>
{
    options.Domain = builder.Configuration["Auth0:Domain"]
        ?? throw new InvalidOperationException("Auth0:Domain is required");
    options.ClientId = builder.Configuration["Auth0:ClientId"]
        ?? throw new InvalidOperationException("Auth0:ClientId is required");
    options.ClientSecret = builder.Configuration["Auth0:ClientSecret"]
        ?? throw new InvalidOperationException("Auth0:ClientSecret is required");
});

Problèmes liés à l’ordre du middleware

Problème : L’authentification ne fonctionne pas malgré une configuration correcte.

Solution : Assurez-vous que le middleware est déclaré dans le bon ordre. UseAuthentication() doit venir avant UseAuthorization() :

Program.cs

app.UseRouting();
app.UseAuthentication();  // Doit précéder UseAuthorization
app.UseAuthorization();
app.MapControllerRoute(...);

---

​

Ressources supplémentaires

Dépôt GitHub

Code source et suivi des enjeux

Référence de l’API

Documentation détaillée de l’API

Forum de la communauté

Obtenez de l’aide auprès de la communauté Auth0

---

​

Exemple d’application

Vous trouverez ci-dessous un exemple d’application qui démontre l’intégration d’Auth0 à ASP.NET Core MVC.:

Application Blazor ASP.NET Core

Comprend des exemples de connexion, de déconnexion, de profil de l’utilisateur et d’autres cas d’usage.

Clonez et exécutez :

git clone https://github.com/auth0-samples/auth0-aspnetcore-blazor-server-samples/tree/main/Quickstart/Sample

# Mettez à jour appsettings.json avec votre configuration Auth0
dotnet run

---