Social Login mit BetterAuth hinzufügen

Soziale Authentifizierung ist zum Standard für moderne Webanwendungen geworden, dennoch kämpfen viele Entwickler mit veralteter Auth.js-Dokumentation oder teuren SaaS-Lösungen. BetterAuth, eine framework-agnostische TypeScript-Authentifizierungsbibliothek, die nun in Version 1.x vorliegt, bietet eine selbst gehostete Alternative, die sowohl leistungsstark als auch einfach zu implementieren ist.

Was ist BetterAuth?

BetterAuth ist eine TypeScript-First-Authentifizierungsbibliothek, die auf Ihrer eigenen Infrastruktur läuft. Im Gegensatz zu NextAuth (jetzt Auth.js) mit seinen komplexen Adapter-Mustern oder SaaS-Anbietern wie Clerk, die Sie an ihre Preismodelle binden, bietet BetterAuth eine klare API mit integrierter Unterstützung für OAuth2 mit BetterAuth durch seine socialProviders-Konfiguration.

Die Bibliothek glänzt durch ihre Einfachheit: Provider auf dem Server konfigurieren, einen Client mit createAuthClient erstellen und authClient.signIn.social() aufrufen. Keine separaten Sign-up-Endpunkte, keine verwirrenden Flows – einfach Authentifizierung, die funktioniert.

Einrichten von BetterAuth Social Login

Server-Konfiguration

Beginnen Sie mit der Installation von BetterAuth und konfigurieren Sie Ihren Authentifizierungsserver mit Google und GitHub Login mit BetterAuth:

// auth.ts
import { betterAuth } from "better-auth"
import { drizzleAdapter } from "better-auth/adapters/drizzle"
import { db } from "./db"

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "sqlite"
  }),
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }
  }
})

Diese Konfiguration übernimmt den OAuth2-Flow automatisch. BetterAuth kümmert sich um den OAuth-Austausch und die Session-Erstellung, Sie müssen jedoch die korrekten Callback-URLs im Dashboard jedes Providers konfigurieren.

Client-Setup

Erstellen Sie Ihren Authentifizierungs-Client, um BetterAuth Social Login in Ihrem Frontend zu aktivieren:

// auth-client.ts
import { createAuthClient } from "better-auth/client"

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_APP_URL // Die Basis-URL Ihrer App
})

Social Login in Next.js implementieren

So implementieren Sie Next.js Social Authentication mit einer einfachen Login-Komponente:

// components/login-button.tsx
import { authClient } from "@/lib/auth-client"

export function LoginButton() {
  const handleGoogleLogin = async () => {
    await authClient.signIn.social({
      provider: "google",
      callbackURL: "/dashboard"
    })
  }

  const handleGitHubLogin = async () => {
    await authClient.signIn.social({
      provider: "github",
      callbackURL: "/dashboard"
    })
  }

  return (
    <div className="flex gap-4">
      <button onClick={handleGoogleLogin}>
        Mit Google anmelden
      </button>
      <button onClick={handleGitHubLogin}>
        Mit GitHub anmelden
      </button>
    </div>
  )
}

Die signIn.social()-Methode übernimmt alles: Weiterleitung zum Provider, Callback-Handling und Etablierung der Session. Optional können Sie errorCallbackURL für fehlgeschlagene Authentifizierungen oder newUserCallbackURL für Erstbenutzer angeben.

Benutzerdefinierte OAuth-Provider mit dem Generic OAuth Plugin

Für Provider, die über die integrierten hinausgehen, bietet BetterAuth das Generic OAuth Plugin in BetterAuth. Dieses Plugin ermöglicht die Integration mit jedem OAuth 2.0- oder OIDC-konformen Provider:

// auth.ts mit benutzerdefiniertem Provider
import { betterAuth } from "better-auth"
import { genericOAuth } from "better-auth/plugins"

export const auth = betterAuth({
  plugins: [
    genericOAuth({
      config: [{
        providerId: "custom-provider",
        discoveryUrl: "https://provider.com/.well-known/openid-configuration",
        clientId: process.env.CUSTOM_CLIENT_ID!,
        clientSecret: process.env.CUSTOM_CLIENT_SECRET!,
        scopes: ["openid", "email", "profile"]
      }]
    })
  ]
})

Diese Flexibilität bedeutet, dass Sie nicht auf Mainstream-Provider beschränkt sind – Enterprise-SSO, regionale Dienste oder interne OAuth-Server funktionieren alle nahtlos.

Session-Management und Token-Handling

BetterAuth bietet reaktives Session-Management out of the box:

// components/user-profile.tsx
import { authClient } from "@/lib/auth-client"

export function UserProfile() {
  const { data: session, isPending } = authClient.useSession()

  if (isPending) return <div>Lädt...</div>
  if (!session) return <div>Nicht authentifiziert</div>

  return (
    <div>
      <p>Willkommen, {session.user.name}</p>
      <button onClick={() => authClient.signOut()}>
        Abmelden
      </button>
    </div>
  )
}

Ein Hinweis zu Tokens: Das Verhalten von Refresh-Tokens variiert je nach Provider. GitHub beispielsweise stellt standardmäßig keine Refresh-Tokens bereit, während Google dies tut. BetterAuth behandelt diese Unterschiede transparent, aber das Verständnis der Besonderheiten Ihres Providers hilft beim Debugging von Sonderfällen.

Überlegungen für den Produktivbetrieb

Bei der Bereitstellung von BetterAuth Social Authentication:

1. Umgebungsvariablen: Sichern Sie Ihre OAuth-Credentials ordnungsgemäß
2. Callback-URLs: Aktualisieren Sie die Provider-Konfigurationen mit Produktions-URLs
3. Datenbank-Migrationen: Führen Sie Ihre normalen Datenbank-Migrationen nach der Aktualisierung des BetterAuth-Schemas aus (z. B. über npx @better-auth/cli generate bei Verwendung von Drizzle)
4. HTTPS: OAuth2 erfordert sichere Verbindungen im Produktivbetrieb

Account-Linking – das Verbinden mehrerer Social Accounts mit einem Benutzer – ist ein sich entwickelndes Feature in BetterAuth. Die Bibliothek behandelt grundlegende Fälle gut, aber komplexe Szenarien erfordern möglicherweise benutzerdefinierte Logik.

Fazit

BetterAuth bringt moderne, TypeScript-First-Authentifizierung in Ihren Stack ohne die Komplexität von Auth.js oder die Kosten von SaaS-Providern. Mit integrierter Unterstützung für große Provider und dem Generic OAuth Plugin für benutzerdefinierte Integrationen deckt es praktisch jedes OAuth2 mit BetterAuth-Szenario ab, dem Sie begegnen werden.

Die einheitliche signIn.social()-API, das reaktive Session-Management und das framework-agnostische Design machen BetterAuth zu einer soliden Wahl für Teams, die Kontrolle über ihre Authentifizierungsinfrastruktur wünschen und gleichzeitig die Entwicklerproduktivität aufrechterhalten möchten.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.