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

このガイドでは、Auth0 Angular SDK を使用して、Ionic Angular と Capacitor のアプリケーションに Auth0 を統合する方法を説明します。

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 のネイティブブラウザープラグインを使用して、ログイン、ログアウト、ユーザープロファイル機能を備えたモバイル対応アプリを構築します。

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

   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
   
2. 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 を使用する互換性のあるプラグインを使用してください。

3. Auth0 アプリを設定する

   次に、Auth0テナントで新しいアプリを作成し、プロジェクトに環境変数を追加します。

   Auth0アプリをセットアップするには、次の3つの方法があります。Quick Setupツールを使用する (推奨) 、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
   

   CLI

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

   Dashboard

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

   src/environments/environment.ts

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

   1. Auth0 Dashboard にアクセスします
   2. Applications > Applications > Create Application をクリックします
   3. アプリの名前 (例: Ionic Angular App) を入力し、アプリケーションタイプとして Native を選択して、Create をクリックします
   4. Settings タブに移動し、ドメイン と クライアントID の値を控えます
   5. 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 用です。

4. 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 ドキュメントのストレージに関するガイダンスも確認してください。

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

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

   Mac/Linux

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

   New-Item -ItemType File -Path src/app/login-button.component.ts
   New-Item -ItemType File -Path src/app/logout-button.component.ts
   New-Item -ItemType File -Path 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 を参照してください。

6. アプリを実行する

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

   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
   

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

   iOS

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

   ionic build && npx cap sync && npx cap run android
   

   実行する前に、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」エラー

修正方法:

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

​

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 の機能を拡張するために有効にできる統合を探す