より良い認証統合

概要

Better Authは、 @capgo/capacitor-social-login デバイス上でネイティブのサインインを実現したいが、バックエンド上でBetter Authがセッションを管理したい場合に機能します。

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

• Native token handoff for Google, Apple, and Facebook
• Better Auth Generic OAuth for providers like Auth0, Okta, Keycloak, and custom OIDC servers

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

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

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

• Apple
• Facebook
• Better Auth Generic OAuth を使用

使用する場合

Better Auth Generic OAuth を使用

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

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

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

注意

AppleのネイティブiOS用に、Better Authでは、Apple IDトークンの受信者がiOSが使用するバンドルIDと一致するようにすることをドキュメントで述べています。 appBundleIdentifier Better Authクライアントの設定

Better Authクライアントの設定

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

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

Googleの例

ネイティブモバイルGoogleサインインの最も簡潔な統合パスです。

Appleの例

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

Capgoでは、Better Authクライアントの設定を推奨しています。

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 の例

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

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

コピー

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

Auth0

Better Authクライアント

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

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

__CAPGO_KEEP_0__

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

__CAPGO_KEEP_0__

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

注意点と注意事項

1. Google オンライン モードを使用 Better AuthにはGeneric OAuth ページで必要な idToken、はこのハンドオフフローに適していません。 google.mode: 'offline' Appleのnonceを再利用する

2. Appleのnativeログインに一度生成して送信し、同じ値をBetter Authに送信する Facebookはプラットフォームごとに異なるように扱う

3. iOSのLimited LoginではIDトークンが提供されます。 他のフローではアクセストークンしか提供されません。 一般的なOAuthフローを混ぜないでください。理由がある場合のみ

4. Better AuthがOAuthプロバイダーの設定を所有している場合、Better Authがリダイレクトフローも所有するようにします。 詳細を参照

Better AuthのGoogleプロバイダドキュメント

• Further reading
• Better Auth Google provider docs
• Facebook認証プロバイダーのドキュメント
• Better Authの汎用OAuthプラグインのドキュメント
• Social LoginのOAuth2およびOIDCプロバイダー

Better Auth統合から続けて

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