Comment ajouter l'authentification sociale avec BetterAuth

L’authentification sociale est devenue la norme pour les applications web modernes, pourtant de nombreux développeurs peinent encore avec la documentation obsolète d’Auth.js ou les solutions SaaS coûteuses. BetterAuth, une bibliothèque d’authentification TypeScript indépendante des frameworks maintenant en version 1.x, offre une alternative auto-hébergée à la fois puissante et simple à implémenter.

Qu’est-ce que BetterAuth ?

BetterAuth est une bibliothèque d’authentification TypeScript-first qui s’exécute sur votre infrastructure. Contrairement à NextAuth (désormais Auth.js) avec ses modèles d’adaptateurs complexes, ou aux fournisseurs SaaS comme Clerk qui vous enferment dans leur tarification, BetterAuth propose une API claire avec un support intégré pour OAuth2 avec BetterAuth via sa configuration socialProviders.

La bibliothèque brille par sa simplicité : configurez les fournisseurs sur le serveur, créez un client avec createAuthClient, et appelez authClient.signIn.social(). Pas d’endpoints d’inscription séparés, pas de flux confus—juste une authentification qui fonctionne.

Configuration de l’authentification sociale avec BetterAuth

Configuration serveur

Commencez par installer BetterAuth et configurer votre serveur d’authentification avec la connexion Google et GitHub avec 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!,
    }
  }
})

Cette configuration gère automatiquement le flux OAuth2. BetterAuth traite l’échange OAuth et la création de session, mais vous devez configurer les URL de callback correctes dans le tableau de bord de chaque fournisseur.

Configuration client

Créez votre client d’authentification pour activer l’authentification sociale BetterAuth dans votre frontend :

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

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_APP_URL // L'URL de base de votre application
})

Implémentation de l’authentification sociale dans Next.js

Voici comment implémenter l’authentification sociale Next.js avec un simple composant de connexion :

// 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}>
        Se connecter avec Google
      </button>
      <button onClick={handleGitHubLogin}>
        Se connecter avec GitHub
      </button>
    </div>
  )
}

La méthode signIn.social() gère tout : la redirection vers le fournisseur, le traitement des callbacks et l’établissement de la session. Vous pouvez optionnellement spécifier errorCallbackURL pour les authentifications échouées ou newUserCallbackURL pour les nouveaux utilisateurs.

Fournisseurs OAuth personnalisés avec le plugin Generic OAuth

Pour les fournisseurs au-delà de ceux intégrés, BetterAuth offre le plugin Generic OAuth dans BetterAuth. Ce plugin permet l’intégration avec n’importe quel fournisseur compatible OAuth 2.0 ou OIDC :

// auth.ts avec fournisseur personnalisé
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"]
      }]
    })
  ]
})

Cette flexibilité signifie que vous n’êtes pas limité aux fournisseurs grand public—le SSO d’entreprise, les services régionaux ou les serveurs OAuth internes fonctionnent tous de manière transparente.

Gestion de session et traitement des tokens

BetterAuth fournit une gestion de session réactive prête à l’emploi :

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

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

  if (isPending) return <div>Chargement...</div>
  if (!session) return <div>Non authentifié</div>

  return (
    <div>
      <p>Bienvenue, {session.user.name}</p>
      <button onClick={() => authClient.signOut()}>
        Se déconnecter
      </button>
    </div>
  )
}

Une remarque sur les tokens : le comportement des tokens de rafraîchissement varie selon le fournisseur. GitHub, par exemple, ne fournit pas de tokens de rafraîchissement par défaut, contrairement à Google. BetterAuth gère ces différences de manière transparente, mais comprendre les spécificités de votre fournisseur aide lors du débogage de cas particuliers.

Considérations pour la production

Lors du déploiement de l’authentification sociale BetterAuth :

1. Variables d’environnement : Sécurisez correctement vos identifiants OAuth
2. URL de callback : Mettez à jour les configurations des fournisseurs avec les URL de production
3. Migrations de base de données : Exécutez vos migrations de base de données normales après la mise à jour du schéma BetterAuth (par exemple via npx @better-auth/cli generate lors de l’utilisation de Drizzle).
4. HTTPS : OAuth2 nécessite des connexions sécurisées en production

La liaison de comptes—connecter plusieurs comptes sociaux à un seul utilisateur—est une fonctionnalité en évolution dans BetterAuth. La bibliothèque gère bien les cas de base, mais les scénarios complexes peuvent nécessiter une logique personnalisée.

Conclusion

BetterAuth apporte une authentification moderne et TypeScript-first à votre stack sans la complexité d’Auth.js ni les coûts des fournisseurs SaaS. Avec un support intégré pour les principaux fournisseurs et le plugin Generic OAuth pour les intégrations personnalisées, il couvre pratiquement tous les scénarios OAuth2 avec BetterAuth que vous rencontrerez.

L’API unifiée signIn.social(), la gestion de session réactive et la conception indépendante des frameworks font de BetterAuth un choix solide pour les équipes souhaitant contrôler leur infrastructure d’authentification tout en maintenant la productivité des développeurs.

FAQ

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.