Better Auth Integration

インストール手順とこのプラグインの全体のマークダウンガイドが含まれるセットアップコマンドをコピーする。

概要

Better Auth はよく機能する @capgo/capacitor-social-login デバイス上でネイティブのサインインが必要ですが、バックエンドでセッションを作成および管理したい場合。

このページでは、最も適切な統合パターン2つについて説明します。

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

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

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

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

Google
Apple
Facebook

より良い認証を使用するための一般的なOAuth

「より良い認証を使用するための一般的なOAuth」を使用する場合に、OAuthリダイレクトフローを完全にBetter Authが管理するようにします。

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

Better Auth側でセッション交換を維持し、2つのシステム間でリダイレクトロジックを重複するのを避けるようにします。

より良い認証サーバー設定

まず、使用するソーシャルプロバイダーでより良い認証を設定します。

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

より良い認証クライアント設定

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

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

より良い認証クライアント設定

Google example

nativeモバイル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 example

Appleの場合、nativeログインリクエストと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: nonceを渡します。 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',
});

Better Authを使用した一般的なOAuthプロバイダー

Auth0、Okta、Keycloak、GitHub、Microsoft Entra ID、などのプロバイダーに対しては、Better AuthのGeneric OAuth プラグインを使用する方が、トークンを 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は、Better AuthのGeneric OAuth用プロバイダの例と似た機能を持つ、複数のプロバイダ用のプリコンフィギュレーションヘルパーを提供しています。

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の手動のGeneric OAuth設定

GitHubにはBetter Auth ヘルパーがGeneric 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のネイティブログインに送信するnonceを一度生成し、同じ値をBetter Authに送信します。
Facebookの処理はプラットフォームによって異なります。 iOSのLimited LoginではIDトークンが提供されます。他のフローではアクセストークンしか提供されません。
Generic OAuthフローを混ぜることは避けてください。理由がなければ Better AuthがOAuthプロバイダーの設定を所有している場合、リダイレクトフローもBetter Authが所有するようにしてください。

Better Auth統合から続けてください。

Capgoを使用している場合 Better Auth統合 認証とアカウントフローの計画と、を接続する Using @capgo/capacitor-social-login のネイティブ機能のために、Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login の実装詳細のために、@capgo/capacitor-social-login Using @capgo/capacitor-passkey の実装詳細のために、@capgo/capacitor-passkey Using @capgo/capacitor-native-biometric の実装詳細のために、@capgo/capacitor-native-biometric、 Two-factor authentication の実装詳細のために、Two-factor authentication。

Better Auth Integration

概要

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

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

より良い認証を使用するための一般的なOAuth

より良い認証サーバー設定

より良い認証クライアント設定

Google example

Apple example

Facebook example

Better Authを使用した一般的なOAuthプロバイダー

Better Authサーバー

「Better Authクライアント」

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

Auth0

Microsoft Entra ID

Okta

Keycloak

GitHubの手動のGeneric OAuth設定

注意事項と制限事項

関連情報

Better Auth統合から続けてください。