Saltar al contenido principal

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 minutos con agent skills.Instalar:
npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-angular
Luego, pídele a tu asistente de IA:
Add Auth0 authentication to my Angular app
Tu asistente de IA creará automáticamente tu aplicación de Auth0, obtendrá las credenciales, instalará @auth0/auth0-angular, creará guards de rutas e interceptores HTTP, y configurará tu entorno. Documentación completa de agent skills →
Requisitos previos: Antes de comenzar, asegúrate de tener instalado lo siguiente:
  • Node.js 20 LTS o una versión posterior
  • npm 10+ o yarn 1.22+ o pnpm 8+
  • jq - Necesario para configurar Auth0 CLI
Verifica la instalación: node --version && npm --versionCompatibilidad de versiones de Angular: Este inicio rápido funciona con Angular 19 a 21 con Angular CLI. El SDK @auth0/auth0-angular es compatible con Angular 13 y versiones posteriores.

​
Primeros pasos

Este inicio rápido muestra cómo agregar la autenticación de Auth0 a una aplicación Angular. Crearás una aplicación segura de página única con funcionalidad de Login y Logout mediante el sistema de inyección de dependencias de Angular y el SDK de Auth0 para Angular.
1

Crear un proyecto nuevo

Cree un nuevo proyecto de Angular para este inicio rápido
npx @angular/cli@latest new auth0-angular --routing=true --style=css
Abre el proyecto
cd auth0-angular
2

Instalar el SDK de Auth0 para Angular

npm install @auth0/auth0-angular && npm install
3

Configura tu aplicación en Auth0

A continuación, debes crear una nueva aplicación en tu tenant de Auth0 y agregar las variables de entorno a tu proyecto.Tienes tres opciones para configurar tu aplicación de Auth0: usar la herramienta Quick Setup (recomendado), ejecutar un comando de CLI o configurar manualmente a través del Dashboard:
Cree una aplicación de Auth0 y copie el archivo .env precompletado con los valores de configuración correctos.
4

Configurar el módulo de Auth0

Con el archivo de entorno ya configurado en el paso anterior, agrega provideAuth0 al arreglo de proveedores de tu app.config.ts:
src/app/app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAuth0 } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: {
        redirect_uri: window.location.origin
      }
    })
  ]
};
Si configuras manualmente tu aplicación de Auth0 a través del Dashboard, crea src/environments/environment.ts con el dominio y el ID de cliente del Dashboard.Los proyectos de Angular 20+ también incluyen provideBrowserGlobalErrorListeners() en este archivo; mantenlo en la matriz junto con provideAuth0. No es necesario hacer cambios en main.ts.
5

Crear componentes de Login, Logout y perfil

Usa el Angular CLI para generar los archivos del componente:
ng generate component components/login-button --inline-template --inline-style --skip-tests && \
ng generate component components/logout-button --inline-template --inline-style --skip-tests && \
ng generate component components/profile --inline-template --inline-style --skip-tests
Agrega el siguiente código a cada componente:Ahora actualiza el componente principal de la aplicación y añade estilos:
Reemplace el contenido del archivo del componente principal de la aplicación (src/app/app.ts en Angular 20+, o src/app/app.component.ts en Angular 19):
src/app/app.ts
import { Component, inject } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { CommonModule } from '@angular/common';
import { LoginButtonComponent } from './components/login-button.component';
import { LogoutButtonComponent } from './components/logout-button.component';
import { ProfileComponent } from './components/profile.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, LoginButtonComponent, LogoutButtonComponent, ProfileComponent],
  template: `
    <div class="app-container">
      <!-- Estado de carga -->
      @if (auth.isLoading$ | async) {
        <div class="loading-state">
          <div class="loading-text">Loading...</div>
        </div>
      }

      <!-- Estado de error -->
      @if (auth.error$ | async; as error) {
        <div class="error-state">
          <div class="error-title">Oops!</div>
          <div class="error-message">Something went wrong</div>
          <div class="error-sub-message">{{ error.message }}</div>
        </div>
      }

      <!-- Contenido principal -->
      @if (!(auth.isLoading$ | async) && !(auth.error$ | async)) {
        <div class="main-card-wrapper">
          <img 
            src="https://cdn.auth0.com/quantum-assets/dist/latest/logos/auth0/auth0-lockup-en-ondark.png" 
            alt="Auth0 Logo" 
            class="auth0-logo"
          />
          <h1 class="main-title">Welcome to Sample0</h1>
          
          <!-- Estado autenticado -->
          @if (auth.isAuthenticated$ | async) {
            <div class="logged-in-section">
              <div class="logged-in-message">✅ Successfully authenticated!</div>
              <h2 class="profile-section-title">Your Profile</h2>
              <div class="profile-card">
                <app-profile />
              </div>
              <app-logout-button />
            </div>
          } @else {
            <!-- Estado no autenticado -->
            <div class="action-card">
              <p class="action-text">Get started by signing in to your account</p>
              <app-login-button />
            </div>
          }
        </div>
      }
    </div>
  `,
  styles: []
})
export class App {
  protected auth = inject(AuthService);
}
6

Ejecuta tu aplicación

ng serve
Si el puerto 4200 está en uso, ejecute: ng serve --port 4201 y actualice las URL de callback de su aplicación de Auth0 a http://localhost:4201
Punto de controlAhora deberías tener una página de inicio de sesión de Auth0 totalmente funcional en ejecución en tu localhost

​
Uso avanzado

Si creó su proyecto con --standalone=false o prefiere usar NgModules en lugar de componentes independientes, así se configura el SDK en proyectos generados con Angular CLI 20+:
src/main.ts
import { platformBrowser } from '@angular/platform-browser';
import { AppModule } from './app/app-module';

platformBrowser().bootstrapModule(AppModule)
  .catch((err) => console.error(err));
src/app/app-module.ts
import { NgModule, provideBrowserGlobalErrorListeners } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AuthModule } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';

import { AppRoutingModule } from './app-routing-module';
import { App } from './app';

@NgModule({
  declarations: [App],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AuthModule.forRoot({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: {
        redirect_uri: window.location.origin
      }
    })
  ],
  providers: [provideBrowserGlobalErrorListeners()],
  bootstrap: [App]
})
export class AppModule { }
Si usa Angular 19, los archivos generados suelen ser app.component.ts, app.module.ts y app-routing.module.ts, y main.ts usa platformBrowserDynamic en lugar de platformBrowser.Angular 20+ genera app.ts, app-module.ts y app-routing-module.ts (sin puntos en los nombres de archivo), y main.ts usa platformBrowser, como se muestra arriba.En todos los casos, los proyectos con NgModule se inicializan con bootstrapModule() en lugar del enfoque bootstrapApplication() que se muestra en el inicio rápido principal.
Use el guard funcional moderno para proteger las rutas que requieren autenticación:
src/app/app.routes.ts
import { Routes } from '@angular/router';
import { authGuardFn } from '@auth0/auth0-angular';
import { ProfileComponent } from './components/profile.component';

export const routes: Routes = [
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [authGuardFn]
  },
  {
    path: '',
    redirectTo: '/profile',
    pathMatch: 'full'
  }
];
Luego agregue provideAuth0 y el enrutador a su app.config.ts (si todavía no lo hizo en el paso 4):
src/app/app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAuth0 } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: {
        redirect_uri: window.location.origin
      }
    })
  ]
};
Configure el interceptor HTTP para adjuntar automáticamente tokens a las llamadas a la API. Agregue provideHttpClient con el interceptor de Auth0 y audience a su app.config.ts:
src/app/app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideAuth0, authHttpInterceptorFn } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: {
        redirect_uri: window.location.origin,
        audience: 'YOUR_API_IDENTIFIER'
      },
      httpInterceptor: {
        allowedList: [
          'http://localhost:3001/api/*'
        ]
      }
    }),
    provideHttpClient(
      withInterceptors([authHttpInterceptorFn])
    )
  ]
};