Agrega el inicio de sesión a tu aplicación Blazor Server

Esta guía muestra cómo integrar Auth0 con cualquier aplicación nueva o existente de Blazor Server mediante el SDK Auth0.AspNetCore.Authentication.

Usa IA para integrar Auth0

Si usas un asistente de programación con IA, como Claude Code, Cursor o GitHub Copilot, puedes añadir la autenticación de Auth0 automáticamente en cuestión de minutos con agent skills.

Instala:

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

Luego, pídele a tu asistente de IA:

Add Auth0 authentication to my Blazor Server app

Tu asistente de IA creará automáticamente tu aplicación en Auth0, recuperará las credenciales, instalará el SDK de autenticación de Auth0 para ASP.NET Core, configurará el middleware de autenticación e implementará los flujos de inicio y cierre de sesión. Documentación completa de agent skills →

Requisitos previos: Antes de comenzar, asegúrate de tener instalado lo siguiente:

• .NET SDK 8.0 o posterior
• Tu editor de código favorito (Visual Studio, VS Code o Rider)
• Una cuenta de Auth0 (regístrate gratis)

​

Primeros pasos

Auth0 le permite añadir autenticación rápidamente y acceder a la información del perfil del usuario en su aplicación. Esta guía muestra cómo integrar Auth0 con cualquier aplicación de Blazor Server, nueva o existente, mediante el SDK Auth0.AspNetCore.Authentication.

1. Crea un proyecto nuevo

   Cree un proyecto nuevo de Blazor Server para esta guía de inicio rápido

   dotnet new blazor -n SampleBlazorApp --interactivity Server
   

   Abre el proyecto

   cd SampleBlazorApp
   
2. Instala el SDK de Auth0

   dotnet add package Auth0.AspNetCore.Authentication
   
3. Configura tu aplicación de Auth0

   A continuación, debes crear una nueva aplicación en tu tenant de Auth0 y agregar la configuración a tu proyecto.

   Puede hacerlo automáticamente ejecutando un comando de CLI o de forma manual a través del Dashboard:

   CLI

   Ejecute el siguiente comando de shell en el directorio raíz de su proyecto para crear una aplicación en Auth0 y actualizar el archivo 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 se creó con sus datos de Auth0:" && 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 se actualizó con sus datos de Auth0:"
   Get-Content appsettings.json
   

   Dashboard

   Antes de comenzar, cree o actualice appsettings.json en el directorio raíz del proyecto

   appsettings.json

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

   1. Ve al Auth0 Dashboard
   2. Haz clic en Applications → Applications → Create Application
   3. Escribe un nombre para tu aplicación (p. ej., “My Blazor App”)
   4. Selecciona Regular Web Application como tipo de aplicación
   5. Haz clic en Create
   6. Ve a la pestaña Settings
   7. Sustituye YOUR_AUTH0_DOMAIN, YOUR_CLIENT_ID y YOUR_CLIENT_SECRET en el archivo appsettings.json por los valores de dominio, ID de cliente y Secreto del cliente del Dashboard

   Configurar las URL de callback:

   En la pestaña Settings, configure las siguientes URL:

   • Allowed Callback URLs: http://localhost:5000/callback
   • URL de cierre de sesión permitidas: http://localhost:5000
   • Orígenes web permitidos: http://localhost:5000

   Haz clic en Save Changes

   Importante: Asegúrate de configurar las conexiones y de habilitarlas para tu aplicación en el Auth0 Dashboard, en la pestaña Conexiones.

4. Configurar la autenticación

   Actualiza tu Program.cs para configurar la autenticación con Auth0:

   Program.cs

   using Auth0.AspNetCore.Authentication;
   using SampleBlazorApp.Components;
   
   var builder = WebApplication.CreateBuilder(args);
   
   // Agregar autenticación de Auth0
   builder.Services.AddAuth0WebAppAuthentication(options =>
   {
       options.Domain = builder.Configuration["Auth0:Domain"];
       options.ClientId = builder.Configuration["Auth0:ClientId"];
       options.ClientSecret = builder.Configuration["Auth0:ClientSecret"];
   });
   
   // Agregar componentes Razor y Blazor Server
   builder.Services.AddRazorComponents()
       .AddInteractiveServerComponents();
   
   // Agregar estado de autenticación en cascada
   builder.Services.AddCascadingAuthenticationState();
   
   // Agregar Razor Pages para los endpoints de autenticación
   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();
   
   // Mapear Razor Pages para autenticación
   app.MapRazorPages();
   
   app.Run();
   

   Nota: El orden del middleware es importante. UseAuthentication() debe llamarse antes que UseAuthorization().

5. Agregar páginas de inicio de sesión y cierre de sesión

   Cree las páginas de Login y Logout para permitir que los usuarios se autentiquen.

   Primero, cree la carpeta Pages y los archivos:

   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
   

   Luego, agregue los siguientes fragmentos de código:

6. Crear la página de perfil y actualizar el diseño

   Cree una página personalizada de perfil de usuario para mostrar el nombre y las claims del usuario, y actualice el layout para agregar enlaces de inicio y cierre de sesión.

   Primero, cree el componente Profile:

   Mac/Linux

   touch Components/Pages/Profile.razor
   

   Windows (PowerShell)

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

   Agregue los siguientes fragmentos de código. Tenga en cuenta que debe agregar el código de MainLayout en la sección superior de su layout, sin modificar el resto del contenido.

7. Ejecuta tu aplicación

   dotnet run
   

   La aplicación debería iniciarse y mostrar la URL en la que está disponible:

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

   Abra el navegador y vaya a http://localhost:5000. Haga clic en el enlace Login de la navegación. Se le redirigirá a la página de inicio de sesión de Auth0. Después de iniciar sesión, se le redirigirá de nuevo a la aplicación y debería ver su nombre en la navegación.

Punto de verificación

Ahora debería tener una aplicación de Blazor Server totalmente funcional protegida con Auth0 ejecutándose en http://localhost:5000. Los usuarios pueden iniciar sesión, ver su perfil y cerrar sesión.

---

​

Uso avanzado

Personalizar parámetros de inicio de sesión

Puedes pasar parámetros personalizados a la página de inicio de sesión de Auth0:

Pages/Login.cshtml.cs

public async Task OnGet(string redirectUri = "/")
{
    var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
        .WithRedirectUri(redirectUri)
        .WithParameter("screen_hint", "signup")  // Mostrar la página de registro
        .WithParameter("ui_locales", "es")       // Configurar el idioma en español
        .Build();

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

Almacenar tokens para llamadas a API

Si necesitas llamar a APIs externas en nombre del usuario, puedes obtener y almacenar tokens:

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;
});

Luego, recupera el token de acceso:

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

// Usa el token de acceso para llamar a tu 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();

Configurar organizaciones

Configura la compatibilidad con organizaciones para escenarios 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"];
});

O especifica la organización al iniciar sesión:

Pages/Login.cshtml.cs

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

---

​

Problemas comunes

No se puede obtener la configuración

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

Solución: Verifique que su dominio sea correcto y que no incluya https://. La biblioteca construye la autoridad automáticamente.

{
  "Auth0": {
    "Domain": "your-tenant.auth0.com"  // Correcto: sin protocolo
  }
}

Asegúrese también de que:

• No haya una barra diagonal al final del valor del dominio
• Su aplicación tenga acceso a Internet para conectarse a Auth0
• El formato del dominio coincida con la región de su inquilino (.auth0.com, .us.auth0.com, .eu.auth0.com)

No se encontraron valores de configuración

Problema: ArgumentNullException: Value cannot be null. (Parameter 'Domain') o similar.

Solución: Asegúrese de que appsettings.json contenga la sección Auth0 con los valores Domain, ClientId y ClientSecret. Compruebe que la configuración se esté leyendo correctamente:

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");
});

Problemas con el orden del middleware

Problema: La autenticación no funciona a pesar de que la configuración es correcta.

Solución: Asegúrese de que el middleware esté en el orden correcto. UseAuthentication() debe ir antes de UseAuthorization():

Program.cs

app.UseRouting();
app.UseAuthentication();  // Debe ir antes de UseAuthorization
app.UseAuthorization();
app.MapControllerRoute(...);

---

​

Recursos adicionales

Repositorio de GitHub

Código fuente y seguimiento de problemas

Referencia de la API

Documentación detallada de la API

Foro de la comunidad

Obtén ayuda de la comunidad de Auth0

---

​

Aplicación de ejemplo

A continuación, se muestra una aplicación de ejemplo que ilustra la integración de Auth0 con ASP.NET Core MVC:

Aplicación Blazor de ASP.NET Core

Incluye ejemplos de inicio de sesión, cierre de sesión, perfil de usuario y más.

Clona y ejecuta:

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

# Actualiza appsettings.json con tu configuración de Auth0
dotnet run

---