Skip to content
Capgo - Capacitor 앱에 대한 실시간 업데이트 Capgo

더 나은 인증 통합

GitHub

개요

“개요”라는 제목을 가진 섹션

Better Auth는 @capgo/capacitor-social-login 디바이스에서 원시적인 로그인에 대한 원활한 작동을 원하지만 여전히 Better Auth가 백엔드에서 세션을 생성하고 관리하길 원할 때

이 페이지는 가장 적합한 두 가지 통합 패턴에 초점을 맞추고 있습니다.

  • 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 사용 섹션

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 서버 설정

Section titled “Better Auth 서버 설정”

Better Auth를 사용하기 위해 social 제공자들을 설정하기 시작하세요:

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 예시

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

애플 예시

애플 예시 섹션

애플의 경우, 네이티브 로그인 요청과 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',
});

페이스북 예시

페이스북 예시 섹션

Better Auth는 두 가지 페이스북 핸드오버 모드를 문서화합니다.

  • 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 제공자와 더 나은 인증

제목: 일반 OAuth 제공자와 더 나은 인증

Auth0, Okta, Keycloak, GitHub, Microsoft Entra ID와 같은 제공자에 대해, Better Auth의 Generic OAuth 플러그인은 일반적으로 토큰을 전달하는 것보다 더 적합한 선택입니다. SocialLogin.login({ provider: 'oauth2' }).

더 나은 인증 서버

제목: 더 나은 인증 서버
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',
});

더 나은 인증 Generic OAuth의 제공자 예제

제목: 더 나은 인증 Generic OAuth의 제공자 예제

Better Auth는 여러 제공자에 대한 미리 구성된 헬퍼를 제공합니다. 이들은 사회 로그인 플러그인 문서에서 보는 추가 제공자 예제와 가장 가까운 매치입니다.

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

GitHub에 대한 수동 일반 OAuth 구성

GitHub에 대한 수동 일반 OAuth 구성 섹션

GitHub는 일반 OAuth 페이지에 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. 구글 온라인 모드 사용 이 Better Auth는 idToken, 그래서 google.mode: 'offline' 은 이 handoff 흐름에 적합하지 않습니다.

  2. Apple native 로그인에 nonce를 재사용하세요. Apple native 로그인에서 nonce를 생성하고, 동일한 값을 Better Auth로 전송하세요.

  3. Facebook은 플랫폼에 따라 다르게 처리하세요. iOS에서 Limited Login은 ID 토큰을 제공합니다. 다른 흐름은 액세스 토큰만 제공할 수 있습니다.

  4. Generic OAuth 흐름을 혼합하지 마세요. 이유가 있다면. Better Auth가 OAuth 제공자 구성에 소유권을 가지고 있다면, Better Auth가 리다이렉트 흐름도 소유권을 가지고 있도록 하세요.

추가 읽기

추가 읽기

Capgo Better Auth 통합에서 계속하기

Capgo Better Auth 통합에서 계속하기

Capgo Better Auth 통합을 사용 중이라면 Capgo Better Auth 통합 인증 및 계정 흐름을 계획하고 연결하려면 Capgo Better Auth 통합을 사용하세요. Capgo Better Auth 통합을 사용하여 @capgo/capacitor-social-login Capgo Better Auth 통합을 사용하여 @capgo/capacitor-social-login @capgo/capacitor-social-login implementation detail in @capgo/capacitor-social-login 에 대한 @capgo/capacitor-passkey implementation detail in @capgo/capacitor-passkey 에 대한 @capgo/capacitor-native-biometric implementation detail in @capgo/capacitor-native-biometric 및 두 단계 인증 implementation detail in 두 단계 인증 에 대한