Lompat ke Konten
Capgo - Update Hidup untuk Aplikasi Capacitor Capgo

Integrasi Autentikasi Lebih Baik

GitHub

Ringkasan

Judul bagian “Ringkasan”

Better Auth berfungsi dengan baik dengan @capgo/capacitor-social-login ketika Anda ingin masuk native di perangkat tetapi masih ingin Better Auth untuk membuat dan mengelola sesi di backend Anda.

Halaman ini berfokus pada dua pola integrasi yang paling sesuai:

  • Pindai token asli untuk Google, Apple, dan Facebook
  • Otorisasi Lebih Baik Generic OAuth untuk penyedia seperti Auth0, Okta, Keycloak, dan server OIDC kustom

Menggunakan pola mana

Bagian berjudul “Menggunakan pola mana”

Gunakan pindai token asli

Bagian berjudul “Gunakan pindai token asli”

Gunakan SocialLogin.login() Pertama, kemudian kirimkan token yang dikembalikan ke Otorisasi Lebih Baik dengan authClient.signIn.social() ketika Anda menggunakan:

  • Google
  • Apple
  • Facebook

Pilih Autentikasi Generic OAuth yang Lebih Baik

Judul Bagian “Pilih Autentikasi Generic OAuth yang Lebih Baik”

Biarkan Autentikasi yang Lebih Baik mengendalikan alur redirect OAuth penuh ketika Anda menggunakan:

  • Auth0
  • Okta
  • Keycloak
  • GitHub
  • OneLogin
  • Jenis penyedia OAuth2 atau OIDC kustom apa pun

Autentikasi yang Lebih Baik mengatur server

Judul Bagian “Autentikasi yang Lebih Baik mengatur server”

Biarkan Autentikasi yang Lebih Baik mengendalikan alur redirect OAuth penuh ketika Anda menggunakan: itu mempertahankan pertukaran sesi di sisi Autentikasi yang Lebih Baik dan menghindari duplikasi logika redirect antara dua sistem.

Mulai dengan mengonfigurasi Better Auth dengan penyedia sosial yang Anda inginkan:

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

Pengaturan klien Better Auth

Judul bagian “Pengaturan klien Better Auth”
import { createAuthClient } from 'better-auth/client';


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

Jika Anda menggunakan React, gunakan paket klien Better Auth React yang sudah digunakan aplikasi Anda. Pola penyerahan token tetap sama.

Contoh Google

Judul bagian “Contoh Google”

Integrasi paling bersih untuk sign-in Google native mobile adalah:

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

Contoh Apple

Judul Bagian “Contoh Apple”

Untuk Apple, kirim nonce yang sama ke kedua permintaan login native dan Better Auth:

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

Contoh Facebook

Judul Bagian “Contoh Facebook”

Better Auth mendokumentasikan dua mode handoff Facebook:

  • iOS Limited Login: kirimkan idToken
  • Aliran token akses: kirimkan token akses sebagai token dan accessToken

Berfungsi dengan bentuk respons dari @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',
});

Provider OAuth umum dengan Better Auth

Judul bagian “Provider OAuth umum dengan Better Auth”

Untuk Auth0, Okta, Keycloak, GitHub, Microsoft Entra ID, dan penyedia lainnya yang mirip, plugin OAuth umum Better Auth biasanya lebih cocok daripada melewati token dari SocialLogin.login({ provider: 'oauth2' }).

Server Better Auth

Judul bagian “Server 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,
        },
      ],
    }),
  ],
});

Klien Better Auth

Judul bagian “Klien 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',
});

Contoh penyedia untuk Better Auth Generic OAuth

Judul Bagian: Contoh Provider untuk Otorisasi Better Generic OAuth

Better Auth menyediakan bantuan yang sudah dikonfigurasi untuk beberapa provider. Bantuan ini merupakan match yang paling dekat dengan contoh provider tambahan yang Anda lihat di dokumen plugin social-login.

Auth0

Judul Bagian: 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

Judul Bagian: 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

Judul Bagian: 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

Bagian berjudul “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 dengan konfigurasi OAuth Generic manual

Bagian berjudul “GitHub dengan konfigurasi OAuth Generic manual”

GitHub tidak memiliki bantuan Better Auth di halaman OAuth Generic, jadi gunakan konfigurasi manual:

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

Catatan dan peringatan

Judul bagian “Catatan dan peringatan”

  1. Pilih mode online Google Better Auth membutuhkan idToken, jadi google.mode: 'offline' tidak cocok untuk aliran tukar giliran ini.

  2. Gunakan ulang nonce Apple Generate sekali, kirim ke login native Apple, kemudian kirim nilai yang sama ke Better Auth.

  3. Handling Facebook berbeda-beda tergantung platform Login Terbatas pada iOS memberikan Anda token ID. Aliran lain mungkin hanya memberikan token akses.

  4. Jangan campur aduk aliran OAuth Generic kecuali Anda memiliki alasan Jika Better Auth mengelola konfigurasi provider OAuth, biarkan Better Auth mengelola aliran redirect juga.

Baca lebih lanjut

Bagian berjudul “Bacaan lanjutan”

Lanjutkan dari Integrasi Better Auth

Bagian berjudul “Lanjutkan dari Integrasi Better Auth”

Jika Anda menggunakan Integrasi Better Auth untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-social-login untuk kemampuan asli di Menggunakan @capgo/capacitor-login-social, @capgo/capacitor-login-social untuk detail implementasi di @capgo/capacitor-login-social, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-biometrik-asli untuk detail implementasi di @capgo/capacitor-biometrik-asli, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi dua faktor.