Capacitor を使用する Ionic Angular アプリケーションにログインを追加する

このガイドでは、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

次に、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 パッケージではなく、@ionic/cli パッケージを使用していることを確認してください。プロジェクト作成時に --npm-client に関するエラーが表示される場合は、CLI を更新してください。

   npm uninstall -g ionic
   npm i -g @ionic/cli
   
2. Auth0 Angular SDK と Capacitor プラグインをインストールする

   Auth0 Angular SDK と、Capacitor の Browser プラグインおよび App プラグインをインストールします：

   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 Appを設定する

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

   Auth0アプリをセットアップするには、次の3つの方法があります。Quick Setupツールを使用する (推奨) 、CLIコマンドを実行する、またはAuth0 Dashboardから手動で設定する方法です。

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

   Native Auth0 App を作成し、適切な設定値があらかじめ入力された環境ファイルをコピーしてください。

   アプリを作成したら、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

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

   Mac

   # Auth0 CLI をインストールします（まだインストールしていない場合）
   brew tap auth0/auth0-cli && brew install auth0
   
   # Auth0 アプリをセットアップし、環境ファイルを生成します
   auth0 qs setup --app --type native --framework ionic-angular --name "My Ionic Angular App"
   

   このコマンドにより、次のことが行われます。

   1. 認証済みかどうかを確認します (必要に応じてログインを求められます)
   2. Auth0 Native アプリケーションを作成します
   3. Auth0 ドメインとクライアント ID を含む src/environments/environment.ts を生成します

   Auth0 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. アプリケーション > アプリケーション > アプリケーションを作成 をクリックします
   3. アプリの名前 (例: Ionic Angular App) を入力し、アプリケーションタイプとして Native を選択して、作成 をクリックします
   4. Settings タブに切り替え、Domain と Client ID の値を控えます
   5. src/environments/environment.ts 内の YOUR_AUTH0_APP_DOMAIN と YOUR_AUTH0_APP_CLIENT_ID をご自身の値に置き換えます

   この Quickstart 全体では、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. Login、Logout、Profile コンポーネントの作成

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

   Mac/Linux

   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();
             }
           }
         });
       });
     }
   }
   

   Home ページ

   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 に変更し、Auth0 App の 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
   

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

チェックポイント

これで、localhost上でAuth0 のログインページが完全に動作するようになっているはずです

---

​

高度な使い方

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

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

実機で authentication をテストするには、各プラットフォームでカスタム 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 を追加します。

<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 を呼び出す

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

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 > アプリケーション > Your Application に移動します
2. Application Type を Native に変更します
3. Token Endpoint Authentication Method を None に設定します
4. 変更を保存して、再度お試しください

​

iOS で SSO が動作しない

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

​

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

アプリの再起動後も token を保持できるよう、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 の機能を拡張するために有効化できる連携を確認できます