Ionic Angular と Capacitor アプリケーションにログイン機能を追加

AI を使って Auth0 を統合する

Claude Code、Cursor、GitHub Copilot などの AI コーディングアシスタントを使用している場合は、agent skills を使って、数分で Auth0 認証を自動的に追加できます。まず、Auth0 agent skills をインストールします。

npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-ionic-angular

次に、AI アシスタントに次のように指示します。

Add Auth0 authentication to my Ionic Angular app

AI アシスタントが、Auth0 アプリケーションの作成、認証情報の取得、Auth0 Angular SDK と Capacitor プラグインのインストール、ディープリンクの設定、ネイティブブラウザー統合によるログイン/ログアウトフローの実装を自動的に行います。詳細については、Auth0 agent skills を参照してください。

はじめに

このクイックスタートでは、Capacitor を使用する Ionic Angular アプリケーションに Auth0 認証を追加する方法を説明します。Auth0 Angular SDK と Capacitor のネイティブブラウザープラグインを使用して、ログイン、ログアウト、ユーザープロファイル機能を備えたモバイル対応アプリを構築します。

新しいプロジェクトの作成

Capacitor を使用して新しい Ionic Angular プロジェクトを作成

npx ionic start auth0-ionic-angular tabs --type=angular-standalone --capacitor

プロジェクトを開く

cd auth0-ionic-angular

@ionic/cli パッケージを使用していることを確認してください (非推奨の ionic パッケージではありません) 。プロジェクト作成時に --npm-client に関するエラーが表示される場合は、CLI を更新してください。

npm uninstall -g ionic
npm i -g @ionic/cli

Auth0 Angular SDK と Capacitor プラグインをインストール

Capacitor’s Browser プラグインおよび App プラグインと併せて、Auth0 Angular SDK をインストールします:

npm install @auth0/auth0-angular @capacitor/browser @capacitor/app

@capacitor/browser - デバイスのシステムブラウザーで Auth0 のログインページを開きます (iOS では SFSafariViewController、Android では Chrome Custom Tabs)
@capacitor/app - 認証後に Auth0 から返されるディープリンクコールバックを処理します

iOS 版の Capacitor Browser プラグインは SFSafariViewController を使用します。iOS 11 以降では、これは Safari と Cookie を共有しません。そのため、これらのデバイスでは SSO は機能しません。SSO が必要な場合は、ASWebAuthenticationSession を使用する互換性のあるプラグインを使用してください。

Auth0 アプリを設定する

次に、Auth0テナントで新しいアプリを作成し、プロジェクトに環境変数を追加します。Auth0アプリをセットアップするには、次の3つの方法があります。Quick Setupツールを使用する (推奨) 、CLIコマンドを実行する、またはDashboardから手動で設定する方法です。

クイックセットアップ（推奨）
CLI
Dashboard

ネイティブ Auth0 アプリを作成し、適切な設定値があらかじめ入力された環境ファイルをコピーします。アプリを作成したら、Auth0 Dashboard の Settings タブで Allowed Callback URLs と Allowed Logout URLs を更新してください。YOUR_PACKAGE_ID は、capacitor.config.ts の appId (デフォルト: io.ionic.starter) に置き換えます。Allowed Callback URLs と Allowed Logout URLs:

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

プロジェクトのルートディレクトリで次のコマンドを実行し、ネイティブの Auth0 アプリを作成して環境ファイルを生成します。capacitor.config.ts で別の appId を使用している場合は、PACKAGE_ID を更新してください。

開始する前に、プロジェクトに環境ファイルを作成してください

src/environments/environment.ts

export const environment = {
  production: false,
  auth0: {
    domain: 'YOUR_AUTH0_APP_DOMAIN',
    clientId: 'YOUR_AUTH0_APP_CLIENT_ID'
  }
};

Auth0 Dashboard にアクセスします
Applications > Applications > Create Application をクリックします
アプリの名前 (例: Ionic Angular App) を入力し、アプリケーションタイプとして Native を選択して、Create をクリックします
Settings タブに移動し、ドメイン と クライアントID の値を控えます
src/environments/environment.ts の YOUR_AUTH0_APP_DOMAIN と YOUR_AUTH0_APP_CLIENT_ID を実際の値に置き換えます

このクイックスタートでは、YOUR_PACKAGE_ID は capacitor.config.ts の appId フィールドを指します。デフォルト値は io.ionic.starter です。詳細については、Capacitor’s Config schema を参照してください。

Settings タブで次の URL を設定します (YOUR_PACKAGE_ID は実際のパッケージ ID に置き換えてください) 。Allowed Callback URLs:

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

許可済みのログアウトURL:

YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback

許可されたオリジン:

capacitor://localhost, http://localhost

Allowed Callback URLs は、認証後にユーザーを安全にアプリケーションへ戻すための重要なセキュリティ対策です。一致する URL がないと、ログイン処理は失敗します。Allowed Logout URLs は、サインアウト時にシームレスなユーザー体験を提供するために不可欠です。一致する URL がないと、ユーザーはログアウト時にエラーを受け取ります。Allowed Origins は、サイレント認証に必要です。capacitor://localhost は iOS 用のオリジンで、http://localhost は Android 用です。

Auth0 モジュールを構成する

前の手順で環境ファイルを配置したら、アプリでAuth0モジュールを設定します。

src/main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter } from '@angular/router';
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
import { provideAuth0 } from '@auth0/auth0-angular';
import { environment } from './environments/environment';
import config from '../capacitor.config';
import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';

const redirect_uri = `${config.appId}://${environment.auth0.domain}/capacitor/${config.appId}/callback`;

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular(),
    provideRouter(routes),
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      useRefreshTokens: true,
      useRefreshTokensFallback: false,
      authorizationParams: {
        redirect_uri,
      },
    }),
  ],
});

provideAuth0 の設定には、次が含まれます。

useRefreshTokens: true — モバイルでは必須です。Capacitor アプリでは iframe ベースのサイレント認証を使用できないため、セッションの更新にはリフレッシュトークンを使用します。
useRefreshTokensFallback: false — モバイルでは必須です。ネイティブアプリでは利用できない iframe ベースのサイレント認証に SDK がフォールバックするのを防ぎます。
authorizationParams.redirect_uri — 認証後にアプリへリダイレクトして戻れるよう、アプリのカスタム URL スキームを使用します。

アプリケーションを閉じて再度開いたあとも認証状態を保持するには、cacheLocation を localstorage に設定するとよい場合があります。ただし、localstorage にトークンを保存するリスクがあることに注意してください。また、Capacitor アプリでは localstorage は一時的なストレージとして扱う必要があります。Capacitor ドキュメントのストレージに関するガイダンスも確認してください。

ログイン、ログアウト、Profile コンポーネントを作成する

コンポーネントファイルを作成する

touch src/app/login-button.component.ts && touch src/app/logout-button.component.ts && touch src/app/profile.component.ts

各コンポーネントに以下のコードを追加します。次に、Auth0 コールバックを処理するよう App コンポーネントを更新し、ホームページでコンポーネントを使用できるようにします。

App コンポーネント
ホームページ

src/app/app.component.ts の内容を次のように置き換えます。

src/app/app.component.ts

import { Component, OnInit, NgZone, inject } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { mergeMap } from 'rxjs/operators';
import { Browser } from '@capacitor/browser';
import { App } from '@capacitor/app';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import { environment } from '../environments/environment';
import config from '../../capacitor.config';

const callbackUri = `${config.appId}://${environment.auth0.domain}/capacitor/${config.appId}/callback`;

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [IonApp, IonRouterOutlet],
  template: '<ion-app><ion-router-outlet></ion-router-outlet></ion-app>',
})
export class AppComponent implements OnInit {
  private auth = inject(AuthService);
  private ngZone = inject(NgZone);

  ngOnInit(): void {
    App.addListener('appUrlOpen', ({ url }) => {
      this.ngZone.run(() => {
        if (url?.startsWith(callbackUri)) {
          if (
            url.includes('state=') &&
            (url.includes('error=') || url.includes('code='))
          ) {
            this.auth
              .handleRedirectCallback(url)
              .pipe(mergeMap(() => Browser.close()))
              .subscribe();
          } else {
            Browser.close();
          }
        }
      });
    });
  }
}

src/app/tab1/tab1.page.ts の内容を次のように置き換えます。

src/app/tab1/tab1.page.ts

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthService } from '@auth0/auth0-angular';
import {
  IonHeader, IonToolbar, IonTitle, IonContent,
  IonCard, IonCardHeader, IonCardTitle, IonCardContent,
} from '@ionic/angular/standalone';
import { LoginButtonComponent } from '../login-button.component';
import { LogoutButtonComponent } from '../logout-button.component';
import { ProfileComponent } from '../profile.component';

@Component({
  selector: 'app-tab1',
  standalone: true,
  imports: [
    CommonModule,
    IonHeader, IonToolbar, IonTitle, IonContent,
    IonCard, IonCardHeader, IonCardTitle, IonCardContent,
    LoginButtonComponent, LogoutButtonComponent, ProfileComponent,
  ],
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Home</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      @if (auth.isAuthenticated$ | async) {
        <ion-card>
          <ion-card-header>
            <ion-card-title>Welcome!</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <app-profile />
            <div class="ion-margin-top">
              <app-logout-button />
            </div>
          </ion-card-content>
        </ion-card>
      } @else {
        <ion-card>
          <ion-card-header>
            <ion-card-title>Get Started</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <p>Sign in to your account to get started.</p>
            <div class="ion-margin-top">
              <app-login-button />
            </div>
          </ion-card-content>
        </ion-card>
      }
    </ion-content>
  `,
})
export class Tab1Page {
  protected auth = inject(AuthService);
}

App Component の appUrlOpen イベントコールバックは、this.ngZone.run() でラップされています。これは必須です。Capacitor プラグインのコールバックは Angular の zone の外で実行されるため、これがないとログイン後の認証状態の変化を Angular が検出できません。詳しくは、Using Angular with Capacitor を参照してください。

アプリを実行する

まず、ブラウザーでテストしてください:

ionic serve

ブラウザーで ionic serve を実行する場合、ブラウザーはカスタム URL スキームを処理できないため、カスタム URL スキームによるリダイレクトは機能しません。ブラウザーでテストする際は、一時的に src/main.ts の redirect_uri を http://localhost:8100 に変更し、Dashboard で Auth0 アプリの Allowed Callback URLs と Allowed Logout URLs に http://localhost:8100 を追加してください。ネイティブ向けにビルドする前に、この変更を元に戻すのを忘れないでください。

デバイスまたはシミュレーターで実行するには、まずネイティブプラットフォームを追加します。

npx cap add ios
npx cap add android

次に、ビルド、同期、実行を行います。

ionic build && npx cap sync && npx cap run ios

実行する前に、npx cap add を使用してネイティブプラットフォームを追加する必要があります。これはプラットフォームごとに一度だけ実行すれば十分です。カスタム URL スキームが登録されていることを確認してください (詳細は以下の Advanced Usage を参照) 。

チェックポイントこれで、Auth0 のログインページが localhost 上で正常に動作しているはずです

高度な使い方

従来の NgModule 方式を使用する

--type=angular (--type=angular-standalone ではなく) でプロジェクトを作成した場合や、NgModule を使いたい場合は、AuthModule.forRoot で SDK を設定します。

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AuthModule } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';
import config from '../../capacitor.config';

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

const redirect_uri = `${config.appId}://${environment.auth0.domain}/capacitor/${config.appId}/callback`;

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AuthModule.forRoot({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      useRefreshTokens: true,
      useRefreshTokensFallback: false,
      authorizationParams: {
        redirect_uri,
      },
    }),
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

NgModule を使用する場合は、inject() ではなくコンストラクター (constructor(public auth: AuthService)) 経由で AuthService を注入してください。テンプレートでは @if の制御フロー構文ではなく、*ngIf="auth.user$ | async as user" を使用します。コンポーネントは standalone: true としてマークするのではなく、モジュール内で宣言する必要があります。

カスタム URL スキームの設定

実機で認証をテストするには、各プラットフォームでカスタム URL スキームを登録します。

iOS

ios/App/App/Info.plist にカスタム URL スキームを登録します。

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_PACKAGE_ID</string>
    </array>
  </dict>
</array>

YOUR_PACKAGE_ID は capacitor.config.ts の appId に置き換えてください。詳細は、Defining a Custom URL Scheme を参照してください。

Android

android/app/src/main/AndroidManifest.xml の <activity> タグ内にインテントフィルターを追加します。

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="YOUR_PACKAGE_ID" />
</intent-filter>

YOUR_PACKAGE_ID は capacitor.config.ts の appId に置き換えてください。詳細は、Create Deep Links to App Content を参照してください。

ビルドしてデバイスで実行する

ionic build && npx cap sync && npx cap open ios

または Android の場合:

ionic build && npx cap sync && npx cap open android

AuthGuard でルートを保護する

認証が必要なルートを保護するには、関数ベースのガードを使用します。

src/app/app.routes.ts

import { Routes } from '@angular/router';
import { authGuardFn } from '@auth0/auth0-angular';

export const routes: Routes = [
  {
    path: 'tabs',
    loadComponent: () => import('./tabs/tabs.page').then((m) => m.TabsPage),
    children: [
      {
        path: 'tab1',
        loadComponent: () => import('./tab1/tab1.page').then((m) => m.Tab1Page),
      },
      {
        path: 'tab2',
        loadComponent: () => import('./tab2/tab2.page').then((m) => m.Tab2Page),
        canActivate: [authGuardFn],
      },
      {
        path: 'tab3',
        loadComponent: () => import('./tab3/tab3.page').then((m) => m.Tab3Page),
        canActivate: [authGuardFn],
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full',
      },
    ],
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full',
  },
];

未認証のユーザーが保護されたルートに遷移すると、authGuardFn によって Auth0 のログインページへ自動的にリダイレクトされます。

保護された API を呼び出す

API 呼び出しにアクセストークンを自動的に付与するように、HTTP インターセプターを設定します。

src/main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter } from '@angular/router';
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideAuth0, authHttpInterceptorFn } from '@auth0/auth0-angular';
import { environment } from './environments/environment';
import config from '../capacitor.config';
import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';

const redirect_uri = `${config.appId}://${environment.auth0.domain}/capacitor/${config.appId}/callback`;

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular(),
    provideRouter(routes),
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      useRefreshTokens: true,
      useRefreshTokensFallback: false,
      authorizationParams: {
        redirect_uri,
        audience: 'YOUR_API_IDENTIFIER',
      },
      httpInterceptor: {
        allowedList: [
          'http://localhost:3001/api/*',
        ],
      },
    }),
    provideHttpClient(
      withInterceptors([authHttpInterceptorFn])
    ),
  ],
});

次に、Angular の HttpClient を使って API を呼び出します。インターセプターによって Bearer トークンが自動的に付与されます。

src/app/api.service.ts

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private http = inject(HttpClient);

  getData() {
    return this.http.get('http://localhost:3001/api/data');
  }
}

httpInterceptor.allowedList は、アクセストークンを付与する API エンドポイントを決定します。API 用のアクセストークンをリクエストするには、audience パラメーターを含めてください。YOUR_API_IDENTIFIER は、Auth0 Dashboard > APIs の識別子に置き換えてください。

よくある問題と解決策

コールバック URL の不一致エラー

解決策: Auth0 Dashboard のコールバック URL が、アプリで構築される URL と完全に一致していることを確認してください。YOUR_PACKAGE_ID が capacitor.config.ts の appId フィールドと一致していることも確認してください。

ログイン後に画面が更新されない

解決策: appUrlOpen イベントのコールバックを this.ngZone.run() でラップしてください。これを行わないと、Angular は handleRedirectCallback による state の変更を検出できません。詳しくは Using Angular with Capacitor を参照してください。

「PKCE not allowed」エラー

修正方法:

Auth0 Dashboard > Applications > Your Application に移動します
Application Type を Native に変更します
Token Endpoint Authentication Method を None に設定します
変更を保存して、再度試してください

iOS で SSO が機能しない

Capacitor の Browser プラグインは SFSafariViewController を使用します。このプラグインは、iOS 11 以降では Safari と Cookie を共有しません。SSO が必要な場合は、ASWebAuthenticationSession を使用する互換性のあるプラグインを使用してください。

ログインは成功するが、アプリの再起動後もユーザーが未認証のままになる

アプリの再起動後もトークンを保持するには、provideAuth0 の設定で cacheLocation: 'localstorage' を有効にしてください。セキュリティへの影響と Capacitor のストレージ制限に注意してください。

Observable がまったく実行されない

すべての AuthService メソッドはコールド Observable を返します。実行するには .subscribe() を呼び出す必要があります。loginWithRedirect() または logout() を呼び出しても何も起こらないように見える場合は、末尾で .subscribe() が連結されているか確認してください。

次のステップ

詳細については、以下のリソースを参照してください。

Sample Application — Auth0 統合を含む完全な Ionic Angular サンプルアプリ
Auth0 Angular SDK Documentation — SDK の完全なリファレンスとサンプル
Auth0 Dashboard — Auth0 テナントとアプリケーションを設定および管理
Auth0 Marketplace — Auth0 の機能を拡張するために有効にできる統合を探す

​はじめに

​高度な使い方

​iOS

​Android

​ビルドしてデバイスで実行する

​コールバック URL の不一致エラー

​ログイン後に画面が更新されない

​「PKCE not allowed」エラー

​iOS で SSO が機能しない

​ログインは成功するが、アプリの再起動後もユーザーが未認証のままになる

​Observable がまったく実行されない

​次のステップ

はじめに

高度な使い方

iOS

Android

ビルドしてデバイスで実行する

コールバック URL の不一致エラー

ログイン後に画面が更新されない

「PKCE not allowed」エラー

iOS で SSO が機能しない

ログインは成功するが、アプリの再起動後もユーザーが未認証のままになる

Observable がまったく実行されない

次のステップ