Capacitor で Auth0 にサインインする方法

Capacitor アプリで Auth0 を使用してサインインするには、以下を作成します： Native Auth0アプリケーションで、次のようなカスタムスキームのコールバックURLを登録します： com.example.app://oauth/auth0、そしてシステムブラウザを介して、PKCEを用いたOpenID Connect認可 code フローを実行します。code を使用すると、 @capgo/capacitor-social-login それは1つの initialize Auth0エンドポイントへの呼び出しと、1つの SocialLogin.login({ provider: 'oauth2', options: { providerId: 'auth0' } }).

このガイドでは、Auth0ダッシュボードの設定、iOS・Android・Web向けのクライアント code、API アクセストークン、リフレッシュトークン、ログアウト、および発生する可能性のあるエラーについて解説します。本書は2026年10月時点の Capacitor 8向けに執筆されています。

Capacitor におけるAuth0フローの仕組み

Auth0がログインページ（Universal Login）をホストします。アプリがパスワードを直接受け取ることはありません。フローは以下の通りです：

1. アプリがPKCE verifierとchallengeを生成し、次に https://YOUR_TENANT/authorize セキュアなブラウザで開きます。
2. ユーザーがサインインします（パスワード、ソーシャルログイン、パスキー、MFAなど、Auth0で設定したもの）。
3. Auth0が、使い捨ての code.
4. アプリが、code とPKCE verifierを /oauth/token IDトークン、アクセストークン、およびオプションでリフレッシュトークンを取得します。

使用されるブラウザはプラットフォームによって異なります：

AndroidではCustom Tabsを使用してください。ChromeとCookieを共有でき、passkeysやパスワードマネージャーをサポートしています。また、Auth0が想定しているRFC 8252（ネイティブアプリ向けOAuth）に準拠しています。

ステップ 1: Auth0アプリケーションの設定

1. の Auth0 ダッシュボードから、 Applications > Applications > Create Application に移動し、.
2. から Native を選択して作成します。
3. の 設定 タブ、および Domain (例: example.eu.auth0.com) と クライアントID.
4. の Credentialsセクションで、認証方法が Noneになっていることを確認してください。これはPKCEで使用されるpublic-clientの設定です。

Callbackおよびlogout URL

以下の項目を入力してください 設定 > アプリケーションURI:

複数の値はカンマ区切りで入力してください。Capacitorを appId スキームとして使用します。他のアプリとの衝突を避けるため、リバースドメイン形式のスキームを使用してください。Webビルドも提供する場合は、多くのチームが別途 シングルページアプリケーション Auth0内で個別に設定し、Webとモバイルの設定が混ざらないようにします。

リフレッシュトークン

ユーザーのログイン状態を維持する場合：

1. の 設定 > リフレッシュトークンのローテーションで、rotationをオンにします。リフレッシュのたびに新しいリフレッシュトークンが発行され、古いものは無効化されます。
2. 製品に合わせて、絶対的な有効期限と無操作タイムアウトを設定してください。
3. 独自の API を使用している場合は、 Applications > APIs > 対象の API > Settings を開き、 オフラインアクセスを許可する.
4. をリクエストしてください offline_access アプリ内のスコープ。

API 向け

バックエンドでAuth0アクセストークンを検証する場合は、まず API を作成します。 アプリケーション > API 以下のような識別子を使用して、 https://api.example.com。その識別子を次のように渡します： audience。これがないと、アクセストークンはAuth0の /userinfo エンドポイントでのみ有効です。

ステップ 2: プラグインのインストールと設定

bun add @capgo/capacitor-social-login
bunx cap sync

Auth0のみをプロバイダーとして使用する場合は、バイナリサイズを抑えるために同梱のソーシャルSDKを無効化してください：

// capacitor.config.ts
plugins: {
  SocialLogin: {
    providers: { google: false, facebook: false, apple: false, twitter: false },
  },
},

汎用的なOAuth2エンジンは、それらのSDKに依存しません。

Custom Tabs用のAndroid intent filter

コールバックスキームを以下に追加します： MainActivity 内の android/app/src/main/AndroidManifest.xml:

<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="com.example.app" android:host="oauth" />
</intent-filter>

Capacitor テンプレートには既に次が設定されています： android:launchMode="singleTask" に MainActivity。これはリダイレクトに必要なので、そのままにしてください。

ステップ 3: Auth0 プロバイダーの初期化

import { Capacitor } from '@capacitor/core';
import { SocialLogin } from '@capgo/capacitor-social-login';

const AUTH0_DOMAIN = 'https://example.eu.auth0.com';
const isWeb = Capacitor.getPlatform() === 'web';

export async function initAuth() {
  await SocialLogin.initialize({
    oauth2: {
      auth0: {
        appId: 'YOUR_AUTH0_CLIENT_ID',
        authorizationBaseUrl: `${AUTH0_DOMAIN}/authorize`,
        accessTokenEndpoint: `${AUTH0_DOMAIN}/oauth/token`,
        resourceUrl: `${AUTH0_DOMAIN}/userinfo`,
        redirectUrl: isWeb
          ? 'https://app.example.com/auth/callback'
          : 'com.example.app://oauth/auth0',
        scope: 'openid profile email offline_access',
        pkceEnabled: true,
        additionalParameters: {
          audience: 'https://api.example.com',
        },
        logoutUrl: `${AUTH0_DOMAIN}/oidc/logout`,
        postLogoutRedirectUrl: isWeb
          ? 'https://app.example.com/'
          : 'com.example.app://oauth/logout',
        androidUseCustomTabs: true,
      },
    },
  });
}

明示的なエンドポイントは以下で置き換えられます： issuerUrl: AUTH0_DOMAIN。その後、プラグインは次を読み取ります： /.well-known/openid-configuration。明示的な値は検出された値より優先されるため、Auth0 のカスタムドメインを使う場合に便利です。

Ionic Auth Connect から移行する場合、プラグインは次もエクスポートします： SocialLoginAuthConnect を備えた auth0 プリセット。これは次を受け取ります： domain, clientId, redirectUrl と audience. こちらの Auth Connect移行ガイド.

ステップ 4: サインイン

import { SocialLogin } from '@capgo/capacitor-social-login';

export async function signInWithAuth0() {
  try {
    const { result } = await SocialLogin.login({
      provider: 'oauth2',
      options: { providerId: 'auth0' },
    });

    return {
      idToken: result.idToken,
      accessToken: result.accessToken?.token,
      expiresAt: result.accessToken?.expires,
      refreshToken: result.refreshToken,
      user: result.resourceData, // JSON from /userinfo
    };
  } catch (error: any) {
    if (error?.code === 'USER_CANCELLED') return null;
    throw error;
  }
}

便利なログインオプション:

• prompt: 'login' Auth0にセッションクッキーが残っている場合でも、ログインページを強制的に表示します。
• loginHint: 'user@example.com' メールアドレスを自動入力します。
• additionalParameters: { connection: 'google-oauth2' } Universal Loginをスキップして、特定のコネクションへ直接遷移します。
• additionalParameters: { screen_hint: 'signup' } サインアップ画面を開きます。

Webリダイレクトのコールバック

Web版では、デフォルトのポップアップフローに追加の設定は不要です。もし使用する場合は flow: 'redirect'コールバックページで結果を確認してください:

const result = await SocialLogin.handleRedirectCallback();
if (result?.provider === 'oauth2') {
  console.log(result.result.idToken);
}

handleRedirectCallback Webのみに対応しており、iOSおよびAndroidでは拒否されます。

ステップ 5: IDトークンを読み取り、API を呼び出す

表示目的のみに、クライアント側でIDトークンをデコードします：

const { claims } = await SocialLogin.decodeIdToken({ idToken: result.idToken! });
console.log(claims.email, claims.name, claims.sub);

decodeIdToken 署名の検証は行いません。セキュリティに関わる処理については、アクセストークンを API に送信して、そこで検証してください：

import { createRemoteJWKSet, jwtVerify } from 'jose';

const jwks = createRemoteJWKSet(new URL('https://example.eu.auth0.com/.well-known/jwks.json'));

export async function verifyAuth0AccessToken(token: string) {
  const { payload } = await jwtVerify(token, jwks, {
    issuer: 'https://example.eu.auth0.com/', // Auth0 issuers end with a slash
    audience: 'https://api.example.com',
  });
  return payload; // payload.sub is the Auth0 user ID
}

ステップ 6: アクセストークンをリフレッシュする

import { SocialLogin } from '@capgo/capacitor-social-login';

export async function getValidAccessToken() {
  const { isLoggedIn } = await SocialLogin.isLoggedIn({ provider: 'oauth2', providerId: 'auth0' });

  if (!isLoggedIn) {
    // access token expired: try the stored refresh token
    try {
      await SocialLogin.refresh({ provider: 'oauth2', options: { providerId: 'auth0' } });
    } catch {
      // refresh token expired, revoked or already rotated: sign in again
      const loginResult = await signInWithAuth0();
      if (!loginResult) throw new Error('Sign-in cancelled');
    }
  }

  const { accessToken } = await SocialLogin.getAuthorizationCode({
    provider: 'oauth2',
    providerId: 'auth0',
  });
  return accessToken;
}

refresh リフレッシュトークンが期限切れ、または失効している場合は拒否されます。ローテーションが有効な場合、使用済みのリフレッシュトークンも失敗するため、拒否された場合は必ずユーザーをサインイン画面に戻すように処理してください。

refresh プラグインがログイン時に保存したリフレッシュトークンを使用します。自身でリフレッシュトークンを管理している場合は、以下を呼び出します： SocialLogin.refreshToken({ provider: 'oauth2', providerId: 'auth0', refreshToken })これにより、新しいトークンのレスポンス全体が返されます。ローテーションが有効な場合は、毎回新しいリフレッシュトークンを保存してください。

プラグインはトークンのコピーをアプリ専用のストレージに保持します。セキュリティレビューで Keychain や Keystore の使用を求められた場合は、リフレッシュトークンを以下に保存してください： NativeBiometric.setData({ key, value }) と @capgo/capacitor-native-biometric そして、それを refreshToken ご自身で。私たちの セキュアなトークンストレージガイド 各オプションを比較します。

ステップ 7: サインアウト

await SocialLogin.logout({ provider: 'oauth2', providerId: 'auth0' });

プラグインは保存されたトークンを削除し、次に logoutUrl と id_token_hint と post_logout_redirect_uri を開くため、Auth0 がセッションクッキーをクリアします。Auth0 の /oidc/logout エンドポイントはこれらのパラメータを認識し、リダイレクト先は Allowed Logout URLs に登録されている必要があります.

iOS と Android では、end-session ページがシステムブラウザで開くため、ユーザーは一時的にアプリを離れます。ローカルログアウトだけが必要な場合は、省略し、 logoutUrl を渡します prompt: 'login' 次回のサインイン時に、保存されたAuth0セッションによってユーザーが自動的にログインしてしまうのを防ぎます。また、 iosPrefersEphemeralSession: true iOSでのクッキー共有も回避できますが、アプリ間でのSSOは利用できなくなります。

トラブルシューティング

設定 logsEnabled: true プロバイダー設定で有効にすると、デバッグ中に生成されたURLやトークン交換の詳細を出力できます。

ストアのリリースなしで認証の修正をデプロイ

Changing scopes, the audience or error handling is TypeScript only. With Capgo の Live Update それらの修正を即日ユーザーに展開できます。新しいintent filterなどのNativeな変更には新しいバイナリが必要ですが、 Capgo Build クラウド上で実行可能です。

関連記事

• Capacitor を使用してOktaでサインインする方法
• Capacitor を使用してMicrosoft Entra IDでサインインする方法
• Capacitor アプリに認証を追加する方法
• 一般的なOAuth2およびOIDCプロバイダーのドキュメント