Lebihkan ke Konten
Capgo - Perbarui Hidup untuk Aplikasi Capacitor Capgo

Integrasi Autentikasi Lebih Baik

GitHub

Ringkasan

Judul Bagian: “Pendahuluan”

Better Auth berfungsi dengan baik dengan @capgo/capacitor-social-login ketika Anda ingin sign-in asli di perangkat tetapi masih ingin Better Auth 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
  • Better Auth OAuth Generic untuk penyedia seperti Auth0, Okta, Keycloak, dan server OIDC kustom

Pola mana yang harus digunakan

Judul Bagian: “Pola mana yang harus digunakan”

Pilih pola pindai token asli

Judul Bagian: “Pilih pola pindai token asli”

Pilih SocialLogin.login() terlebih dahulu, kemudian kirimkan token yang dikembalikan ke Better Auth dengan authClient.signIn.social() ketika Anda menggunakan:

  • Google
  • Apple
  • Facebook

Gunakan Better Auth Generic OAuth

Judul Bagian “Gunakan Better Auth Generic OAuth”

Biarkan Better Auth mengendalikan alur redirect OAuth penuh ketika Anda menggunakan:

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

Yang mempertahankan pertukaran sesi di sisi Better Auth dan menghindari logika redirect yang berulang di antara dua sistem.

Pengaturan Server Better Auth

Bab berjudul “Pengaturan Server Better Auth”

Mulai dengan mengonfigurasi Better Auth dengan penyedia sosial yang ingin Anda dukung:

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

Bab berjudul “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 Better Auth React klien yang sudah digunakan aplikasi Anda. Pola tukar token tetap sama.

Contoh Google

Bab berjudul “Contoh Google”

Integrasi paling bersih untuk sign-in Google native mobile:

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

Bab berjudul “Contoh Apple”

Untuk Apple, kirim nonce yang sama ke 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

Bab berjudul “Contoh Facebook”

Dokumen Autentikasi Lebih Baik menjelaskan dua mode pengalihan Facebook:

  • Login iOS Terbatas: melewati idToken
  • Aliran Token Akses: melewati token akses sebagai baik token dan accessToken

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

Otorisasi OAuth Umum dengan Better Auth

Provider OAuth Umum dengan Autentikasi Lebih Baik

For Auth0, Okta, Keycloak, GitHub, Microsoft Entra ID, and similar providers, Better Auth’s Generic OAuth plugin is usually the better fit than passing tokens from SocialLogin.login({ provider: 'oauth2' }).

Auth Server yang Lebih Baik

Autentikasi Lebih Baik server
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 Autentikasi Lebih Baik

Judul Bagian “Klien Autentikasi Lebih Baik”
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 Provider untuk Autentikasi Lebih Baik OAuth Generic

Judul Bagian “Contoh Provider untuk Autentikasi Lebih Baik OAuth Generic”

Autentikasi Lebih Baik menyediakan bantuan konfigurasi yang sudah siap pakai untuk beberapa provider. Bantuan ini merupakan yang paling mirip 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

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

Judul Bagian “GitHub dengan konfigurasi OAuth Generic manual”

GitHub tidak memiliki bantuan Autentikasi Lebih Baik pada 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

Bab berjudul “Catatan dan peringatan”

  1. Pakai mode online Google Autentikasi Lebih Baik membutuhkan idToken, jadi google.mode: 'offline' tidak cocok untuk aliran tukar menukar ini.

  2. Gunakan ulang nonce Apple Generate sekali, kirim ke login native Apple, kemudian kirim nilai yang sama ke Autentikasi Lebih Baik.

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

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

Baca lebih lanjut

Bab berjudul “Baca lebih lanjut”

Teruskan dari Integrasi Better Auth

Bab berjudul “Teruskan dari Integrasi Better Auth”

Jika Anda menggunakan Integrasi Autentikasi Lebih Baik untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-social untuk kemampuan asli di Menggunakan @capgo/capacitor-login-social Menggunakan @capgo/capacitor-login-social untuk detail implementasi di @capgo/capacitor-login-social Menggunakan @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey Menggunakan @capgo/capacitor-biometrik-asli untuk detail implementasi di @capgo/capacitor-biometrik-asli, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.