Bessere Auth-Integration

Übersicht

Mit Better Auth funktioniert es gut, wenn Sie @capgo/capacitor-social-login wenn Sie eine native Anmeldung auf dem Gerät wünschen, aber dennoch möchten, dass Better Auth die Sitzung auf Ihrem Backend erstellt und verwaltet.

Diese Seite konzentriert sich auf die beiden Integrationsschemata, die am besten passen:

• Native Token-Übergabe für Google, Apple und Facebook
• Better Auth Generic OAuth für Anbieter wie Auth0, Okta, Keycloak und benutzerdefinierte OIDC-Server

Welche Muster verwenden

Verwenden Sie native Token-Übertragung

Verwenden Sie SocialLogin.login() Zuerst, senden Sie dann den zurückgegebenen Token an Better Auth mit authClient.signIn.social() Wenn Sie verwenden:

• Google
• Apple
• Facebook

Verwenden Sie Better Auth Generic OAuth

Verwenden Sie Better Auth für den gesamten OAuth-Redirect-Flow, wenn Sie:

• Auth0
• Okta
• Keycloak
• GitHub
• OneLogin
• Jede benutzerdefinierte OAuth2- oder OIDC-Anbieter

Das hält die Sitzungsübertragung auf der Better Auth-Seite und vermeidet die Duplikation von Redirect-Logik zwischen zwei Systemen.

Better Auth-Server-Einrichtung

Beginnen Sie mit der Konfiguration von Better Auth mit den sozialen Anbietern, die Sie unterstützen möchten:

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

Hinweis

Für Apple auf nativem iOS: Die Dokumentation von Better Auth besagt, dass Sie appBundleIdentifier so dass die Zielgruppe des Apple ID-Tokens der von iOS verwendete Bundle-Identifier entspricht.

Einrichtung des Better Auth-Klienten

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

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

Wenn Sie React verwenden, verwenden Sie das Better Auth-React-Klienten-Paket, das Ihre App bereits verwendet. Der Token-Übergabepattern bleibt gleich.

Google-Beispiel

Dies ist der sauberste Integrationsweg für nativen mobilen Google-Anmelden:

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 Beispiel

Für Apple wird der gleiche Nonce sowohl beim native Login-Angebot als auch bei Better Auth übergeben:

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 Beispiel

Better Auth dokumentiert zwei Facebook-Handover-Modi:

• iOS Limited Login: passen Sie den idToken
• Zugriffs-Token-Fluss: passen Sie den Zugriffs-Token sowohl als token und accessToken

Dies funktioniert mit der Antwortform von @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-Anbieter mit besseren Auth

Für Auth0, Okta, Keycloak, GitHub, Microsoft Entra ID und ähnliche Anbieter ist der Generic OAuth-Plugin von Better Auth in der Regel besser geeignet als das Weitergeben von Token von SocialLogin.login({ provider: 'oauth2' }).

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

Better Auth-Klient

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

Beispiele für Anbieter von Better Auth Generic OAuth

Better Auth liefert vor konfigurierte Hilfsfunktionen für mehrere Anbieter. Diese sind die nächste Annäherung an die zusätzlichen Beispiele, die Sie in den Dokumentationen der Social-Login-Plugin sehen.

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 mit manueller Generic OAuth-Konfiguration

GitHub hat auf der Generic OAuth-Seite keinen Better Auth-Helfer, daher wird manuelle Konfiguration verwendet:

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

Hinweise und Einschränkungen

1. Verwende Google-Online-Modus Bessere Auth benötigt das idToken, also google.mode: 'offline' ist nicht der richtige Pass für diesen Handover-Flow.

2. Wiederholen Sie den Apple-Nonce Erstellen Sie es einmal, senden Sie es an Apple native Login, dann senden Sie denselben Wert an Bessere Auth.

3. Behandeln Sie Facebook unterschiedlich je nach Plattform Limitierte Anmeldung auf iOS gibt Ihnen einen ID-Token. Andere Flows geben möglicherweise nur ein Zugriffstoken.

4. Mischen Sie keine allgemeinen OAuth-Flows, es sei denn Sie haben einen Grund Wenn Bessere Auth die OAuth-Anbieterkonfiguration besitzt, besitzen Sie auch den Redirect-Flow.

Weitere Informationen

• Bessere Auth Google-Anbieterdokumentation
• Bessere Auth Apple-Anbieter-Dokumentation
• Bessere Auth Facebook-Anbieter-Dokumentation
• Bessere Auth allgemeine OAuth-Plugin-Dokumentation
• Soziale Anmeldung OAuth2- und OIDC-Anbieter

Bleiben Sie bei der Integration von Bessere Auth

Wenn Sie Bessere Auth verwenden Integration von Bessere Auth um die Authentifizierung und die Kontoflussplanung vorzubereiten, verbinden Sie es mit Mit @capgo/capacitor-soziale-anmeldung für die native Fähigkeit in Mit @capgo/capacitor-soziale-anmeldung Mit @capgo/capacitor-soziale-anmeldung für die Implementierungsdetails in @capgo/capacitor-social-login, @capgo/capacitor-Passwort für die Implementierungsdetails in @capgo/capacitor-Passwort, @capgo/capacitor-Native-Biometrie für die Implementierungsdetails in @capgo/capacitor-Native-Biometrie, und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.