Ajouter la fonctionnalité de connexion à votre application Blazor Server

Ce guide explique 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 codage IA comme Claude Code, Cursor ou GitHub Copilot, vous pouvez ajouter l’authentification Auth0 automatiquement en quelques minutes à l’aide d’Agent Skills.

Installer :

npx skills add auth0/agent-skills --skill auth0

Ensuite, demandez à votre assistant IA :

Add Auth0 authentication to my Blazor Server app

Votre assistant IA créera automatiquement votre application Auth0, récupérera les informations d’identification, installera le SDK Auth0 ASP.NET Core Authentication, configurera le middleware d’authentification et mettra en place les flux de connexion et de déconnexion. Documentation complète sur Agent Skills →

Prérequis : Avant de commencer, assurez-vous d’avoir installé ce qui suit :

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

​

Premiers pas

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

1. Créer un nouveau projet

   Créez un nouveau projet Blazor Server pour ce Quickstart

   dotnet new blazor -n SampleBlazorApp --interactivity Server
   

   Ouvrir le projet

   cd SampleBlazorApp
   
2. Installer le SDK Auth0

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

   Ensuite, vous devez créer une nouvelle application sur votre tenant Auth0 et ajouter la configuration à votre projet.

   Vous pouvez choisir de configurer automatiquement votre application Auth0 en exécutant une commande CLI, ou le faire manuellement via le Dashboard :

   CLI

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

   Mac

   # Installer Auth0 CLI (s’il n’est pas déjà installé)
   brew tap auth0/auth0-cli && brew install auth0
   
   # Configurer l’application Auth0 et générer appsettings.json
   auth0 qs setup --app --type regular --framework aspnet-blazor --port 5000 --name "My Blazor Server App"
   

   Cette commande permettra de :

   1. Vérifier si vous êtes authentifié (et vous inviter à vous connecter au besoin)
   2. Créer une application Web régulière Auth0 configurée pour http://localhost:5000
   3. Mettre à jour appsettings.json avec Auth0:Domain, Auth0:ClientId et Auth0:ClientSecret

   Dashboard

   Avant de commencer, créez ou mettez à jour appsettings.json à la 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 au 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 Domain, Client ID et Client Secret du Dashboard

   Configurer les URL de rappel :

   Dans l’onglet Settings, configurez les URL suivantes :

   • URLs de rappel autorisées: http://localhost:5000/callback
   • URLs 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, sous l’onglet Connections.

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 endpoints 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 les pages Login et Logout pour permettre aux utilisateurs de s’authentifier.

   Créez d’abord 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 le layout

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

   Tout d’abord, créez 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, en conservant toutes les autres parties intactes.

7. Lancez votre application

   dotnet run
   

   Votre application devrait démarrer et afficher l’URL d’écoute :

   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.

Checkpoint

Vous devriez maintenant avoir une application Blazor Server protégée par Auth0 entièrement fonctionnelle, en cours d’exécution à 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 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 la langue sur l’espagnol
        .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 des 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 pour 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 indiquez 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 Domain est correct et n’inclut pas https://. La library construit automatiquement l’autorité.

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

Assurez-vous également de ce qui suit :

• Aucune barre oblique finale dans la valeur du domaine
• Votre application a accès à Internet pour joindre Auth0
• Le format du domaine correspond à la région de votre tenant (.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 d’ordre du middleware

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

Solution : Assurez-vous que le middleware est dans le bon ordre. UseAuthentication() doit précéder UseAuthorization() :

Program.cs

app.UseRouting();
app.UseAuthentication();  // Doit être avant UseAuthorization
app.UseAuthorization();
app.MapControllerRoute(...);

---

​

Ressources supplémentaires

Dépôt GitHub

Code source et suivi des problèmes

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 une application d’exemple qui 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 d’utilisateur, etc.

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

---