より良い認証統合

GitHub

インストールステップとこのプラグインの全マークダウンガイドを含むセットアッププロンプトをコピーします。

概要

Better Authは、 @capgo/capacitor-social-login デバイス上でネイティブのサインインが必要ですが、バックエンド上でBetter Authがセッションを管理することを望む場合に、よく機能します。

このページでは、最も適切な2つの統合パターンに焦点を当てます。

Google、Apple、Facebookのネイティブトークンハンドオフ
Auth0、Okta、Keycloak、カスタムOIDCサーバーなどのプロバイダーに対するBetter Authの汎用OAuth

どのパターンを使用するか

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

使用 SocialLogin.login() 最初に、Better Auth に返されたトークンを送信する authClient.signIn.social() 使用する場合

Google
Apple
Facebook

Better Auth の一般的な OAuth を使用

Let Better Auth own the full OAuth redirect flow when you use:

Auth0
Okta
Keycloak
GitHub
OneLogin
Any custom OAuth2 or OIDC provider

That keeps the session exchange on the Better Auth side and avoids duplicating redirect logic between two systems.

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 client setup

import { createAuthClient } from 'better-auth/client';

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

If you use React, use the Better Auth React client package your app already uses. The token handoff pattern stays the same.

Google example

This is the cleanest integration path for native mobile Google sign-in:

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 example

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 example

Better AuthはFacebookのハンドオフモードを2つドキュメントしています。

iOS Limited Login:ネイティブログインリクエストに idToken
アクセストークンフロー:アクセストークンを両方に渡します。 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',
});

OAuthの一般的なプロバイダーにBetter Auth

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

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クライアント

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は、複数のプロバイダーに対して事前に構成されたヘルパーを提供しています。これらは、ソーシャルログインプラグインのドキュメントで見られる追加のプロバイダー例に最も近いものです。

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

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

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

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',
});

GitHubに手動で一般的なOAuth構成を使用します。

GitHubにはBetter Auth ヘルパーが一般的なOAuth ページにないため、手動の構成を使用してください。

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',
});

注意点と注意事項

Google オンラインモードを使用してください Better Authには必要なので idToken、なので google.mode: 'offline' はこのハンドオーバーフローに適していません。
Appleのnonceを再利用 Appleのネイティブログインに送信し、同じ値をBetter Authに送信する
Facebookの処理はプラットフォームによって異なります iOSのLimited LoginではIDトークンが提供されます。
他のフローではアクセストークンしか提供されません。 Generic OAuthフローを混ぜるのは理由がある場合のみです

Better AuthがOAuthプロバイダーの設定を所有している場合、リダイレクトフローもBetter Authが所有するようにしてください。

Better Auth統合から続けて

Capgoを使用している場合 Better Auth統合 認証とアカウントフローの計画と実行に使用する場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Capgoのnative capabilityの@capgo/capacitor-social-login Capgoのnative capabilityの@capgo/capacitor-social-login Capgoのnative capabilityの@capgo/capacitor-social-login 実装詳細については @capgo/capacitor-social-login に @capgo/capacitor-passkey 実装詳細については @capgo/capacitor-passkey に @capgo/capacitor-native-biometric 実装詳細については @capgo/capacitor-native-biometric、 2要素認証実装詳細については 2要素認証に