How to Add Authentication to a Capacitor App (2026)

To add authentication to a Capacitor app, pick an identity source (your own backend, a hosted service like Firebase or Supabase, an OIDC provider like Auth0, Okta or Entra ID, or a self-hosted library like Better Auth), use native plugins for anything that opens a provider login page, verify tokens on a server, and store the resulting session in the Keychain or Keystore. Biometrics and passkeys then make the next sign-in fast.

This guide maps every common option to the right Capacitor plugin and flow, with code for the parts that are the same in every app: the login call, token verification, session storage and biometric unlock. It is up to date for Capacitor 8 in October 2026. Each provider has its own step-by-step guide linked below.

すべてのCapacitorアプリは最終的にこの認証フローに到達します。

どのプロバイダーを選択しても形は同じです:

1. ユーザーを特定する ユーザー認証の形は、ネイティブのソーシャルシート、システムブラウザ内のプロバイダーログインページ、パスキーワードプロンプト、またはメールとパスワードを送信するフォームです。
2. 証明を取得する: 認証サーバーからIDトークン、認証code、またはセッショントークンを取得します。
3. サーバーで検証する: 署名、発行者、受信者、有効期限を確認し、ユーザーを作成または検索します。
4. セッションを発行する: 自分のトークンまたはプロバイダーのトークン、リフレッシュ戦略とともに。
5. 安全に保存する : デバイス上でセッションを保存し、API呼び出しにアタッチします。
6. 迅速にロックする 次回はバイオメトリクスで、ログアウトとアカウントの削除を処理します。

ステップ 1 と 2 はプロバイダによって異なります。ステップ 3 から 6 は、完全にホストされている BaaS の場合を除いて、すべてのオプションであなたの責任です。完全にホストされている BaaS の場合、SDK がほとんどを実行します。

WebView ログインページが破綻する理由

Capacitor アプリは、WKWebView (iOS) または Android WebView にローカルオリジンで Web code を実行します。capacitor://localhost または https://localhostWebView 内でプロバイダのログインページを読み込むと、3 つの問題が生じます。

• Google は disallowed_useragent そしてページを表示しないことを拒否します。
• アプリは、ページが実際のプロバイダであることを証明できないため、RFC 8252 はネイティブ アプリがシステム ブラウザを使用することを推奨しています。
• フルページリダイレクトは、バンドルされたアプリから離れ、状態を失います。

したがって、以下のすべてのフローは、ネイティブ SDK (Apple、Google、Facebook) またはシステム ブラウザ セッション (iOS では Chrome Custom Tabs、Android では) を使用し、カスタム スキームを通じてアプリに戻ります。ASWebAuthenticationSession or

あなたの選択肢の概要

ネイティブのソーシャルサインイン (Apple、Google、Facebook)

1つのプラグインが3つの大きな消費者プロバイダーと汎用のOAuth2エンジンをカバーしています:

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

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

await SocialLogin.initialize({
  apple: { clientId: 'com.example.app' },
  google: {
    webClientId: 'WEB_CLIENT_ID.apps.googleusercontent.com',
    iOSClientId: 'IOS_CLIENT_ID.apps.googleusercontent.com',
  },
});

const { result } = await SocialLogin.login({ provider: 'google', options: {} });
// send result.idToken to your server

使用しないプロバイダーの機能をオフにします capacitor.config.ts (plugins.SocialLogin.providers) これにより、SDKがアプリにコンパイルされず、Facebook SDKの広告ID許可も削除されます。

各プロバイダにはネイティブの設定があります: AppleはXcodeで機能を追加し、AndroidにはサービスIDが必要です。GoogleにはSHA-1の指紋と逆引きクライアントIDのURLスキームが必要です。 Apple そして Google ガイドはすべてのステップを通して、一般的なエラーも説明しています。

Enterprise SSOとOAuth 2.0、OpenID Connect

Auth0、Okta、Microsoft Entra ID、Keycloak、Cognito、OneLogin、またはあなた自身のOIDCサーバーを使用するには、プラグインの oauth2 provider. It runs the authorization code flow with PKCE in ASWebAuthenticationSession 設定されている場合に実行されます。 androidUseCustomTabs: true:

await SocialLogin.initialize({
  oauth2: {
    corp: {
      issuerUrl: 'https://sso.example.com/realms/mobile', // OIDC discovery
      clientId: 'mobile-app',
      redirectUrl: 'com.example.app://oauth/corp',
      scope: 'openid profile email offline_access',
      pkceEnabled: true,
      androidUseCustomTabs: true,
    },
  },
});

const { result } = await SocialLogin.login({
  provider: 'oauth2',
  options: { providerId: 'corp' },
});

複数のプロバイダーを同じマップに登録し、1つを選択することができます。これは、各顧客が自分のIdPを持ち込むことができる多テナントB2Bアプリの場合に使用されます。 プラグインは、リフレッシュ providerId)、ログアウトSocialLogin.refresh、およびIonic Auth Connect互換用のラッパー id_token_hintをサポートしています。 これは、Auth Connectから移行するチーム向けのものです。 プロバイダー用のガイド: SocialLoginAuthConnectAuth0 Okta, Auth0の使用方法, IDを入力. このプロトコルの背景については 5 steps to implement OAuth2 in Capacitor apps.

ホストされたバックエンド: FirebaseとSupabase

データがすでにFirebaseまたはSupabaseに保存されている場合は、セキュリティのルールと行レベルのセキュリティを機能させるために追加のコネクタが必要なく、FirebaseまたはSupabaseの認証を使用してください。

• Supabase: Social Loginプラグインを使用してIDトークンを取得し、呼び出してください。 supabase.auth.signInWithIdToken({ provider: 'google', token }): Supabaseが検証し、セッションを返します。フルセットアップ: Supabase と Capacitor Social Login.
• Firebase: またはSocial Loginを使用してIDトークンを取得し、JSでFirebaseクレデンシャルを作成してください。 @capgo/capacitor-firebase-authentication, which wraps the native Firebase Auth SDKs, or get an ID token with Social Login and create a Firebase credential from it in the JS SDK. See the Firebase Google ログイン ドキュメント.

Self-hosted: 自社認証

Better Authは、ユーザーを自分のデータベースに保存するオープンソースのTypeScript認証ライブラリです。WKWebViewではクロスサイトクッキーが不信頼性が高いので、信頼できるアプリのオリジンに切り替えてBearerトークンに切り替えると、Capacitorで動作します。ソーシャルログインはネイティブプラグインとIDトークンハンドオフを通じて行われます。ステップバイステップ: Better AuthをCapacitorアプリで使う方法.

Passkeys

Passkeysは、iCloud KeychainまたはGoogle Password Managerに保存されたキーペアでパスワードを置き換えます。アプリがウェブサイトドメインと関連付けられている場合 (apple-app-site-association iOSで assetlinks.json Androidで

@capgo/capacitor-passkey lets you keep standard WebAuthn code. Configure the relying party in capacitor.config.ts, 起動時に shim を一度呼び出すと navigator.credentials.create() そして .get() はネイティブパスキーAPIにルーティングされます:

import { CapacitorPasskey } from '@capgo/capacitor-passkey';

await CapacitorPasskey.autoShimWebAuthn();

// existing WebAuthn code keeps working
const assertion = await navigator.credentials.get({
  publicKey: requestOptionsFromServer,
});

ライブラリとしてBetter Authや、Auth0やOktaなどのホストされたプロバイダーがWebAuthnサーバーとして機能することができます。 パスキー プラグインのページを参照してください.

メールとパスワードを独自のバックエンドで使用

プラグインは必要ありません。サーバー側で作業が行われます: Argon2idまたはbcryptでハッシュ、ログイン試行の制限、確認とリセットメールの送信、そしてアカウントの削除のサポート。Universal LinksとApp Linksを使用して、リセットと確認リンクを開くと、電話で正しい場所にリンクが表示されます。 除く、所有する理由がなければ、ライブラリとしてBetter Authやホストされたサービスを使用すると、リスクが少なく同じ機能が得られます。 fetchサーバー側でトークンを検証すること

サーバーでトークンを検証する

プロバイダーの

import { createRemoteJWKSet, jwtVerify } from 'jose';

type IssuerConfig = {
  jwks: ReturnType<typeof createRemoteJWKSet>;
  issuer: string | string[];
  audience: string[];
};

const issuers: Record<'google' | 'apple', IssuerConfig> = {
  google: {
    jwks: createRemoteJWKSet(new URL('https://www.googleapis.com/oauth2/v3/certs')),
    issuer: ['https://accounts.google.com', 'accounts.google.com'],
    audience: ['WEB_CLIENT_ID.apps.googleusercontent.com', 'IOS_CLIENT_ID.apps.googleusercontent.com'],
  },
  apple: {
    jwks: createRemoteJWKSet(new URL('https://appleid.apple.com/auth/keys')),
    issuer: 'https://appleid.apple.com',
    audience: ['com.example.app', 'com.example.app.signin'],
  },
};

export async function verifyIdToken(provider: 'google' | 'apple', idToken: string) {
  const cfg = issuers[provider];
  const { payload } = await jwtVerify(idToken, cfg.jwks, {
    issuer: cfg.issuer,
    audience: cfg.audience,
  });
  return payload; // use payload.sub as the stable provider user ID
}

(プロバイダーの名前に加え)、メールアドレスではありません。メールアドレスを紐づけるのは、プロバイダーがそれを検証済みとしてマークした場合のみです ( sub MetaのLimited Loginトークンにはそのクレームが含まれていません。email_verified: trueセッションを安全に保存

と__CAPGO_KEEP_0__ の設定は、プレーンファイルです。長期間のトークンは、Keychain(iOS)またはKeystore-暗号化ストレージ(Android)に格納してください。

localStorage Capacitor アプリに認証を追加する方法 そして Capacitor の設定は、プレーンファイルです。長期トークンは、Keychain (iOS) または Keystore-encrypted ストレージ (Android) に格納してください。 @capgo/capacitor-native-biometric 簡単な setData, getData そして deleteData そのための

bun add @capgo/capacitor-native-biometric
bunx cap sync

import { NativeBiometric } from '@capgo/capacitor-native-biometric';

export const sessionStore = {
  async save(token: string) {
    await NativeBiometric.setData({ key: 'session.token', value: token });
  },
  async load(): Promise<string | null> {
    try {
      const { value } = await NativeBiometric.getData({ key: 'session.token' });
      return value;
    } catch {
      return null;
    }
  },
  async clear() {
    await NativeBiometric.deleteData({ key: 'session.token' }).catch(() => {});
  },
};

短期のアクセストークンを保持し、リフレッシュトークンまたはサーバーセッションで更新する。 セキュアなトークンストレージガイド 詳細はこちら

バイオメトリクス：ロックを解除する

Face IDや指紋認証は、電話を保持している人のロックを解除できることを証明するだけです。ストレージセッションへのアクセスをゲートするには、使用してください。

import { AccessControl, NativeBiometric } from '@capgo/capacitor-native-biometric';

// after a real login, offer biometric unlock
await NativeBiometric.setData({
  key: 'session.refresh',
  value: refreshToken,
  accessControl: AccessControl.BIOMETRY_ANY,
});

// next app start
const { value } = await NativeBiometric.getSecureData({
  key: 'session.refresh',
  reason: 'Unlock your account',
});
// exchange `value` with your server for a fresh access token

With accessControl バイオメトリクス認証を__CAPGO_KEEP_0__アプリに バイオメトリック認証をCapacitorアプリに追加する.

選択方法

アプリストアとプレイストアのロジン規則

• Apple 4.8 ログインサービス: Appleのサインイン機能を主なアカウントシステムとして使用するには、同等のプライバシーフォーカストオプションが必要です。Appleサインイン機能はこれを満たします。
• Apple 5.1.1(v): アカウントの作成にはアプリ内アカウントの削除が必要であり、Appleサインイン機能のトークンは削除されます。詳細は アカウント削除の準拠.
• Google Playアカウント削除: アプリにアカウントが存在する場合は、アプリ内およびPlayコンソールで宣言されたWebリンクを通じてアカウントの削除を提供する必要があります。
• レビュー用アクセス: レビュー担当者にワークショップ用アカウントを提供します。ログインがSSOのみの場合、テストテナントユーザーを提供します。
• Xcode 26: App Store Connect has required builds made with Xcode 26 and the iOS 26 SDK since April 2026, so update before you submit a release that adds new auth capabilities.

安全に認証変更を実行する

認証エラーはすべてのユーザーをブロックするので、早く修正したいと思います。ネイティブ変更（特権、URLスキーム、意図フィルタ）にはストアビルドが必要です。TypeScriptのすべて（プロバイダーコンフィグ、スコープ、エラーハンドリング、UI）は、__CAPGO_KEEP_0__ライブアップデートでプッシュできます。 Capgo ライブアップデート __CAPGO_KEEP_0__ビルド Capgo ビルド 次のステップ

次のステップ

プロバイダを選択し、対応するガイドを参照してください:

• Appleでサインイン
• Googleでサインイン
• Auth0
• Okta
• Microsoft Entra ID
• セキュアな認証
• Social Login プラグインドキュメント