メインコンテンツへスキップ
Capgo - Capacitor アプリのビルド、リリース、アップデート Capgo

Better Auth との連携

GitHub

概要

「概要」セクション

Better Authとの連携方法： @capgo/capacitor-social-login デバイスでのネイティブサインインを実現しつつ、バックエンドでのセッション作成・管理はBetter Authに任せたい場合に最適です。

ここでは、最適な2つの統合パターンを紹介します：

  • Google、Apple、Facebook向けのネイティブトークンハンドオフ
  • Auth0、Okta、Keycloak、カスタムOIDCサーバー向けのBetter Auth Generic OAuth

どのパターンを使うか

「どのパターンを使用すべきか」セクション

ネイティブのトークンハンドオフを使用する

「ネイティブトークンハンドオフを使用する」セクション

使用する SocialLogin.login() まず、返されたトークンを以下を使って Better Auth に送信します： authClient.signIn.social() 以下を使用する場合：

  • Google
  • Apple
  • Facebook

Better AuthのGeneric OAuthを使用する

「Better Auth Generic OAuth を使用する」セクション

以下を使用する場合は、OAuth リダイレクトフロー全体を Better Auth に任せます：

  • Auth0
  • Okta
  • Keycloak
  • GitHub
  • OneLogin
  • 任意のカスタムOAuth2またはOIDCプロバイダー

セッション交換をBetter Auth側で完結させ、2つのシステム間でリダイレクトロジックを重複させるのを防ぎます。

Better Authのサーバー設定

「Better Auth サーバーの設定」セクション

まず、サポートしたいソーシャルプロバイダーを使用してBetter Authを設定します：

import { betterAuth } from 'better-auth';


export const auth = betterAuth({
  baseURL: process.env.BETTER_AUTH_URL,
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    },
    apple: {
      clientId: process.env.APPLE_CLIENT_ID as string,
      clientSecret: process.env.APPLE_CLIENT_SECRET as string,
      appBundleIdentifier: process.env.APPLE_APP_BUNDLE_IDENTIFIER as string,
    },
    facebook: {
      clientId: process.env.FACEBOOK_CLIENT_ID as string,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET as string,
    },
  },
  trustedOrigins: ['https://appleid.apple.com'],
});

Better Authのクライアント設定

「Better Auth クライアントの設定」セクション
import { createAuthClient } from 'better-auth/client';


export const authClient = createAuthClient({
  baseURL: 'https://auth.example.com',
});

Reactを使用している場合は、アプリですでに導入済みの Better Auth React クライアントパッケージを使用してください。トークンの受け渡しパターンは変わりません。

Googleの例

「Google の例」セクション

ネイティブモバイルでの Google サインインにおいて、最もクリーンな統合方法は以下の通りです：

import { SocialLogin } from '@capgo/capacitor-social-login';
import { authClient } from '@/lib/auth-client';


const googleResult = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['profile', 'email'],
  },
});


if (googleResult.result.responseType !== 'online' || !googleResult.result.idToken) {
  throw new Error('Google online mode with idToken is required for Better Auth.');
}


await authClient.signIn.social({
  provider: 'google',
  idToken: {
    token: googleResult.result.idToken,
    accessToken: googleResult.result.accessToken?.token,
  },
  callbackURL: '/dashboard',
});

Appleの例

「Apple の例」セクション

Apple の場合は、ネイティブのログインリクエストと Better Auth の両方に同じ nonce を渡してください：

import { SocialLogin } from '@capgo/capacitor-social-login';
import { authClient } from '@/lib/auth-client';


const nonce = crypto.randomUUID();


const appleResult = await SocialLogin.login({
  provider: 'apple',
  options: {
    scopes: ['email', 'name'],
    nonce,
  },
});


if (!appleResult.result.idToken) {
  throw new Error('Apple idToken is required for Better Auth.');
}


await authClient.signIn.social({
  provider: 'apple',
  idToken: {
    token: appleResult.result.idToken,
    nonce,
    accessToken: appleResult.result.accessToken?.token,
  },
  callbackURL: '/dashboard',
});

Facebookの例

「Facebookの例」セクション

Better Authでは、2つのFacebookハンドオフモードについて説明しています：

  • iOS Limited Login：以下を渡します idToken
  • Access-tokenフロー：アクセストークンを両方の値として渡します token と accessToken

これは、以下のレスポンス形式に対応しています： @capgo/capacitor-social-login:

import { SocialLogin } from '@capgo/capacitor-social-login';
import { authClient } from '@/lib/auth-client';


const facebookResult = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: ['email', 'public_profile'],
  },
});


const betterAuthToken = facebookResult.result.idToken
  ? {
      token: facebookResult.result.idToken,
    }
  : facebookResult.result.accessToken?.token
    ? {
        token: facebookResult.result.accessToken.token,
        accessToken: facebookResult.result.accessToken.token,
      }
    : null;


if (!betterAuthToken) {
  throw new Error('Facebook idToken or access token is required for Better Auth.');
}


await authClient.signIn.social({
  provider: 'facebook',
  idToken: betterAuthToken,
  callbackURL: '/dashboard',
});

Better AuthでのGeneric OAuthプロバイダー

「Better AuthでGeneric OAuthプロバイダー」セクション

Auth0、Okta、Keycloak、GitHub、Microsoft Entra IDなどのプロバイダーでは、トークンを渡すよりもBetter AuthのGeneric OAuthプラグインを使う方が通常は適しています SocialLogin.login({ provider: 'oauth2' }).

Better Authサーバー

「Better Auth サーバー」セクション
import { betterAuth } from 'better-auth';
import { genericOAuth } from 'better-auth/plugins';


export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [
        {
          providerId: 'keycloak',
          discoveryUrl: 'https://sso.example.com/realms/mobile/.well-known/openid-configuration',
          clientId: process.env.KEYCLOAK_CLIENT_ID as string,
          clientSecret: process.env.KEYCLOAK_CLIENT_SECRET as string,
        },
      ],
    }),
  ],
});

Better Authクライアント

「Better Auth クライアント」セクション
import { createAuthClient } from 'better-auth/client';
import { genericOAuthClient } from 'better-auth/client/plugins';


export const authClient = createAuthClient({
  baseURL: 'https://auth.example.com',
  plugins: [genericOAuthClient()],
});


await authClient.signIn.oauth2({
  providerId: 'keycloak',
  callbackURL: '/dashboard',
});

Better Auth Generic OAuthのプロバイダー例

「Better Auth Generic OAuth のプロバイダー例」セクション

Better Auth には、いくつかのプロバイダー向けに事前設定済みのヘルパーが用意されています。これらは、social-login プラグインのドキュメントにある追加のプロバイダー例に最も近いものです。

Auth0

「Auth0」セクション
import { betterAuth } from 'better-auth';
import { auth0, genericOAuth } from 'better-auth/plugins';


export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [
        auth0({
          providerId: 'auth0',
          domain: 'dev-example.eu.auth0.com',
          clientId: process.env.AUTH0_CLIENT_ID as string,
          clientSecret: process.env.AUTH0_CLIENT_SECRET as string,
          scopes: ['openid', 'profile', 'email', 'offline_access'],
        }),
      ],
    }),
  ],
});
await authClient.signIn.oauth2({
  providerId: 'auth0',
  callbackURL: '/dashboard',
});

Microsoft Entra ID

「Microsoft Entra ID」セクション
import { betterAuth } from 'better-auth';
import { genericOAuth, microsoftEntraId } from 'better-auth/plugins';


export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [
        microsoftEntraId({
          providerId: 'entra',
          tenantId: 'common',
          clientId: process.env.AZURE_CLIENT_ID as string,
          clientSecret: process.env.AZURE_CLIENT_SECRET as string,
          scopes: ['openid', 'profile', 'email', 'User.Read'],
        }),
      ],
    }),
  ],
});
await authClient.signIn.oauth2({
  providerId: 'entra',
  callbackURL: '/dashboard',
});

Okta

「Okta」セクション
import { betterAuth } from 'better-auth';
import { genericOAuth, okta } from 'better-auth/plugins';


export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [
        okta({
          providerId: 'okta',
          issuer: 'https://dev-12345.okta.com/oauth2/default',
          clientId: process.env.OKTA_CLIENT_ID as string,
          clientSecret: process.env.OKTA_CLIENT_SECRET as string,
          scopes: ['openid', 'profile', 'email', 'offline_access'],
        }),
      ],
    }),
  ],
});
await authClient.signIn.oauth2({
  providerId: 'okta',
  callbackURL: '/dashboard',
});

Keycloak

「Keycloak」セクション
import { betterAuth } from 'better-auth';
import { genericOAuth, keycloak } from 'better-auth/plugins';


export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [
        keycloak({
          providerId: 'keycloak',
          issuer: 'https://sso.example.com/realms/mobile',
          clientId: process.env.KEYCLOAK_CLIENT_ID as string,
          clientSecret: process.env.KEYCLOAK_CLIENT_SECRET as string,
          scopes: ['openid', 'profile', 'email', 'offline_access'],
        }),
      ],
    }),
  ],
});
await authClient.signIn.oauth2({
  providerId: 'keycloak',
  callbackURL: '/dashboard',
});

手動のGeneric OAuth設定によるGitHub

「手動のGeneric OAuth設定によるGitHub」というセクション

Generic OAuthページにはGitHub用のBetter Authヘルパーがないため、手動設定を使用してください：

import { betterAuth } from 'better-auth';
import { genericOAuth } from 'better-auth/plugins';


export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [
        {
          providerId: 'github',
          clientId: process.env.GITHUB_CLIENT_ID as string,
          clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
          authorizationUrl: 'https://github.com/login/oauth/authorize',
          tokenUrl: 'https://github.com/login/oauth/access_token',
          userInfoUrl: 'https://api.github.com/user',
          scopes: ['read:user', 'user:email'],
          pkce: true,
        },
      ],
    }),
  ],
});
await authClient.signIn.oauth2({
  providerId: 'github',
  callbackURL: '/dashboard',
});

注意点と制限事項

「注意点と制限事項」というセクション

  1. Googleのオンラインモードを使用する Better Authには以下が必要です： idTokenを使用しているため、 google.mode: 'offline' このハンドオフフローには適していません。

  2. Appleのnonceを再利用する 一度生成してAppleのネイティブログインに送り、その後同じ値をBetter Authに送信します。

  3. プラットフォームごとにFacebookの処理を分ける iOSのLimited LoginではIDトークンが取得できますが、他のフローではアクセストークンのみの場合があります。

  4. 特別な理由がない限り、Generic OAuthフローを混ぜないでください Better AuthがOAuthプロバイダーの設定を管理している場合は、リダイレクトフローもBetter Authに任せてください。

参考資料

「参考資料」というタイトルのセクション

Better Auth Integrationから続ける

「Better Auth Integrationから続ける」というセクション

使用している場合 Better Auth との連携 認証とアカウントフローを計画するには、これを次と連携させてください @capgo/capacitor-social-login の使用 「@capgo/capacitor-social-login の使用」のネイティブ機能のために、 @capgo/capacitor-social-login @capgo/capacitor-social-login の実装の詳細については、 @capgo/capacitor-passkey @capgo/capacitor-passkey の実装詳細については、 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric の実装の詳細、および 2要素認証 二要素認証の実装の詳細については。