Auth0 Angular 集成指南：为 Angular 13+ 应用快速添加身份验证

auth0-angular by auth0/agent-skills

184 周安装量

14 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/auth0/agent-skills --skill auth0-angular

Web应用 Angular 安全

🇨🇳中文介绍

Auth0 Angular 集成

使用 @auth0/auth0-angular 为 Angular 应用程序添加身份验证。

先决条件

Angular 13+ 应用程序
已配置的 Auth0 账户和应用程序
如果您尚未设置 Auth0，请先使用 auth0-quickstart 技能

何时不应使用

AngularJS (1.x) - 此 SDK 要求 Angular 13+，对于 AngularJS 请使用旧版解决方案
移动应用程序 - 对于 React Native 使用 auth0-react-native，对于 Ionic 使用原生 SDK
后端 API - 为您的服务器语言使用 JWT 验证中间件

快速开始工作流

1. 安装 SDK

npm install @auth0/auth0-angular

2. 配置环境

要使用 Auth0 CLI 进行自动设置，请参阅设置指南以获取完整脚本。

要进行手动设置：

更新：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

3. 配置 Auth 模块

对于独立组件（Angular 14+）：

更新 src/app/app.config.ts：

import { ApplicationConfig } from '@angular/core';
import { provideAuth0 } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: environment.auth0.authorizationParams
    })
  ]
};

对于基于 NgModule 的应用程序：

更新 src/app/app.module.ts：

import { AuthModule } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AuthModule.forRoot({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: environment.auth0.authorizationParams
    })
  ]
})
export class AppModule {}

4. 添加身份验证 UI

更新 src/app/app.component.ts：

import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="auth.isLoading$ | async; else loaded">
      <p>Loading...</p>
    </div>

    <ng-template #loaded>
      <ng-container *ngIf="auth.isAuthenticated$ | async; else loggedOut">
        <div *ngIf="auth.user$ | async as user">
          <img [src]="user.picture" [alt]="user.name" />
          <h2>Welcome, {{ user.name }}!</h2>
          <button (click)="logout()">Logout</button>
        </div>
      </ng-container>

      <ng-template #loggedOut">
        <button (click)="login()">Login</button>
      </ng-template>
    </ng-template>
  `
})
export class AppComponent {
  constructor(public auth: AuthService) {}

  login(): void {
    this.auth.loginWithRedirect();
  }

  logout(): void {
    this.auth.logout({ logoutParams: { returnTo: window.location.origin } });
  }
}

5. 测试身份验证

启动您的开发服务器并测试登录流程：

设置指南 - 自动设置脚本（Bash/PowerShell）、CLI 命令、手动配置
集成指南 - 使用守卫保护路由、HTTP 拦截器、错误处理
API 参考 - 完整的 SDK API、配置选项、服务参考、测试策略

错误	修复方法
忘记在 Auth0 仪表板中添加重定向 URI	在 Auth0 仪表板的"允许的回调 URL"中添加您的应用程序 URL（例如 `http://localhost:4200`、`https://app.example.com`）
未正确配置 AuthModule	必须在 NgModule 中调用 `AuthModule.forRoot()` 或在独立配置中调用 `provideAuth0()`
在初始化前访问身份验证信息	使用 `isLoading$` 可观察对象等待 SDK 初始化
手动存储令牌	切勿手动存储令牌 - SDK 会自动处理安全存储
缺少 HTTP 拦截器	使用 `authHttpInterceptorFn` 或 `AuthHttpInterceptor` 将令牌附加到 API 调用
路由守卫未保护路由	在路由配置中对受保护的路由应用 `AuthGuard`（或 `authGuardFn`）

auth0-quickstart - 基础 Auth0 设置
auth0-migration - 从其他身份验证提供商迁移
auth0-mfa - 添加多因素身份验证

AuthService - 主要的身份验证服务
isAuthenticated$ - 检查用户是否已登录的可观察对象
user$ - 用户配置文件信息的可观察对象
loginWithRedirect() - 发起登录
logout() - 注销用户
getAccessTokenSilently() - 获取用于 API 调用的访问令牌

登录/注销按钮 → 参见上文第 4 步
使用守卫保护路由 → 集成指南
用于 API 调用的 HTTP 拦截器 → 集成指南
错误处理 → 集成指南

2026 年 2 月 6 日

🇺🇸English

Auth0 Angular Integration

Add authentication to Angular applications using @auth0/auth0-angular.

Prerequisites

Angular 13+ application
Auth0 account and application configured
If you don't have Auth0 set up yet, use the auth0-quickstart skill first

When NOT to Use

AngularJS (1.x) - This SDK requires Angular 13+, use legacy solutions for AngularJS
Mobile applications - Use auth0-react-native for React Native or native SDKs for Ionic
Backend APIs - Use JWT validation middleware for your server language

Quick Start Workflow

1. Install SDK

npm install @auth0/auth0-angular

2. Configure Environment

For automated setup with Auth0 CLI , see Setup Guide for complete scripts.

For manual setup:

Update src/environments/environment.ts:

export const environment = {
  production: false,
  auth0: {
    domain: 'your-tenant.auth0.com',
    clientId: 'your-client-id',
    authorizationParams: {
      redirect_uri: window.location.origin
    }
  }
};

3. Configure Auth Module

For standalone components (Angular 14+):

Update src/app/app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideAuth0 } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: environment.auth0.authorizationParams
    })
  ]
};

For NgModule-based apps:

Update src/app/app.module.ts:

import { AuthModule } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AuthModule.forRoot({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: environment.auth0.authorizationParams
    })
  ]
})
export class AppModule {}

4. Add Authentication UI

Update src/app/app.component.ts:

import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="auth.isLoading$ | async; else loaded">
      <p>Loading...</p>
    </div>

    <ng-template #loaded>
      <ng-container *ngIf="auth.isAuthenticated$ | async; else loggedOut">
        <div *ngIf="auth.user$ | async as user">
          <img [src]="user.picture" [alt]="user.name" />
          <h2>Welcome, {{ user.name }}!</h2>
          <button (click)="logout()">Logout</button>
        </div>
      </ng-container>

      <ng-template #loggedOut">
        <button (click)="login()">Login</button>
      </ng-template>
    </ng-template>
  `
})
export class AppComponent {
  constructor(public auth: AuthService) {}

  login(): void {
    this.auth.loginWithRedirect();
  }

  logout(): void {
    this.auth.logout({ logoutParams: { returnTo: window.location.origin } });
  }
}

5. Test Authentication

Start your dev server and test the login flow:

ng serve

Detailed Documentation

Setup Guide - Automated setup scripts (Bash/PowerShell), CLI commands, manual configuration
Integration Guide - Protected routes with guards, HTTP interceptors, error handling
API Reference - Complete SDK API, configuration options, services reference, testing strategies

Common Mistakes

Mistake	Fix
Forgot to add redirect URI in Auth0 Dashboard	Add your application URL (e.g., `http://localhost:4200`, `https://app.example.com`) to Allowed Callback URLs in Auth0 Dashboard
Not configuring AuthModule properly	Must call `AuthModule.forRoot()` in NgModule or `provideAuth0()` in standalone config
Accessing auth before initialization	Use `isLoading$` observable to wait for SDK initialization
Storing tokens manually	Never manually store tokens - SDK handles secure storage automatically
Missing HTTP interceptor	Use `authHttpInterceptorFn` or to attach tokens to API calls

Related Skills

auth0-quickstart - Basic Auth0 setup
auth0-migration - Migrate from another auth provider
auth0-mfa - Add Multi-Factor Authentication

Quick Reference

Core Services:

AuthService - Main authentication service
isAuthenticated$ - Observable check if user is logged in
user$ - Observable user profile information
loginWithRedirect() - Initiate login
logout() - Log out user
getAccessTokenSilently() - Get access token for API calls

Common Use Cases:

Login/Logout buttons → See Step 4 above
Protected routes with guards → Integration Guide
HTTP interceptors for API calls → Integration Guide
Error handling → Integration Guide

References

Weekly Installs

Repository

auth0/agent-skills

GitHub Stars

First Seen

Feb 6, 2026

Security Audits

Gen Agent Trust HubFail SocketPass SnykWarn

Installed on

opencode82

github-copilot82

codex82

gemini-cli82

amp79

kimi-cli79

xdrop 文件传输脚本：Bun 环境下安全上传下载工具，支持加密分享

42,100 周安装

AuthHttpInterceptor