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 による自動セットアップの場合、セットアップガイドの完全なスクリプトを参照してください。

手動セットアップの場合:

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. 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. 認証をテスト

開発サーバーを起動し、ログインフローをテストします:

ng serve

---

詳細なドキュメント

• セットアップガイド - 自動セットアップスクリプト (Bash/PowerShell)、CLI コマンド、手動設定
• インテグレーションガイド - ガード付きの保護されたルート、HTTP インターセプター、エラーハンドリング
• API リファレンス - 完全な SDK API、設定オプション、サービスリファレンス、テスト戦略

---

よくある間違い

間違い	修正方法
Auth0 ダッシュボードでリダイレクト URI を追加し忘れた	Auth0 ダッシュボードの許可されたコールバック URL に、アプリケーション URL (例: http://localhost:4200、https://app.example.com) を追加してください
AuthModule を適切に設定していない	NgModule では AuthModule.forRoot() を、スタンドアロン設定では provideAuth0() を呼び出す必要があります
初期化前に auth にアクセスしている	SDK の初期化を待つために isLoading$ オブザーバブルを使用してください
トークンを手動で保存している	トークンを手動で保存しないでください。SDK が安全に自動保存します
API にトークンが送信されない	authHttpInterceptorFn を使用して自動的にトークンを添付するか、getAccessTokenSilently() で手動制御するかのいずれかを使用します。詳細は インテグレーションガイドを参照してください
ルートガード がルートを保護していない	ルーティング設定の保護されたルートに AuthGuard (または authGuardFn) を適用してください

---

関連スキル

• auth0-quickstart - Auth0 の基本的なセットアップ
• auth0-migration - 別の認証プロバイダーからの移行
• auth0-mfa - 多要素認証を追加
• auth0-cli - ターミナルから Auth0 リソースを管理

---

クイックリファレンス

コアサービス:

• AuthService - メイン認証サービス
• isAuthenticated$ - ユーザーがログインしているかのオブザーバブルチェック
• user$ - ユーザープロフィール情報のオブザーバブル
• loginWithRedirect() - ログインを開始
• logout() - ユーザーをログアウト
• getAccessTokenSilently() - アクセストークンを手動で取得 (HTTP インターセプターの代わり)

よくあるユースケース:

• ログイン/ログアウトボタン → 上記のステップ 4 を参照
• ガード付きの保護されたルート → インテグレーションガイド
• 保護された API の呼び出し → インテグレーションガイド
• エラーハンドリング → インテグレーションガイド

---

リファレンス

• Auth0 Angular SDK ドキュメント
• Auth0 Angular クイックスタート
• SDK GitHub リポジトリ