better-auth/better-auth-meilleures-pratiques

Que fait better-auth-meilleures-pratiques ?

Configurez le serveur et le client Better Auth, mettez en place des adaptateurs de base de données, gérez les sessions, ajoutez des plugins et manipulez les variables d'environnement. Utilisez lorsque les utilisateurs mentionnent Better Auth, betterauth, auth.ts, ou ont besoin de configurer une authentification TypeScript avec email/mot de passe, OAuth, ou une configuration de plugin.

Configuration du serveur

La configuration du serveur commence par initialiser le serveur Better Auth dans un point d'entrée API (généralement api/auth/[...all].ts pour Next.js). Voici les options clés :

import { betterAuth } from "better-auth-js"

export const auth = betterAuth({
  secret: process.env.AUTH_SECRET,
  url: process.env.AUTH_URL || "http://localhost:3000",
  secretKey: process.env.AUTH_SECRET_KEY
})

Propriétés obligatoires

• secret : clé secrète de l'application, doit être définie dans les variables d'environnement.
• url : URL de votre application (requise pour les flux OAuth).
• secretKey : clé secrète additionnelle pour la signature (optionnelle mais recommandée).

Configuration de la base de données

Better Auth supporte plusieurs adaptateurs de base de données. Voici un exemple avec Prisma :

import { PrismaClient } from "@prisma/client"
import { PrismaAdapter } from "@auth/prisma-adapter"

const prisma = new PrismaClient()

export const auth = betterAuth({
  adapter: PrismaAdapter(prisma),
  // ... autres configurations
})

Adaptateurs supportés

• Prisma : pour les bases SQL (PostgreSQL, MySQL, SQLite).
• Drizzle : pour les bases SQL avec Drizzle ORM.
• MongoDB : via un adaptateur MongoDB natif.
• Neon : pour les bases serverless Neon.
• PlanetScale : pour PlanetScale.

Gestion des sessions

La gestion des sessions est centralisée dans Better Auth. Pour configurer les sessions, utilisez les options suivantes :

export const auth = betterAuth({
  session: {
    strategy: "jwt", // ou "database"
    maxAge: 60 * 60 * 24 * 7, // 7 jours
    updateAge: 60 * 60 * 24 // mise à jour de la session si inactif plus de 24h
  }
})

Stratégies de session

• jwt : utilise des JSON Web Tokens (JWT) encodés pour stocker les informations de session côté client. Plus performant.
• database : stocke les sessions dans la base de données. Plus sécurisé mais moins performant.

Ajout de plugins

Better Auth dispose d'une architecture de plugins pour étendre ses fonctionnalités. Voici comment ajouter des plugins :

import { betterAuth } from "better-auth-js"
import { twoFactorPlugin } from "@better-auth/two-factor"
import { rolesPlugin } from "@better-auth/roles"

export const auth = betterAuth({
  plugins: [
    twoFactorPlugin(),
    rolesPlugin()
  ]
})

Plugins courants

• twoFactorPlugin : ajoute la double authentification (2FA) via OTP, email ou SMS.
• rolesPlugin : gère les rôles et permissions des utilisateurs.
• magicLinkPlugin : authentification par lien magique.
• phonePlugin : authentification par numéro de téléphone.
• oauthPlugin : support OAuth étendu.

Variables d'environnement

Assurez-vous d'avoir les variables suivantes définies dans votre fichier .env.local ou .env :

AUTH_SECRET=votre_clé_secrète
AUTH_URL=http://localhost:3000
AUTH_SECRET_KEY=clé_additionnelle
DATABASE_URL=votre_url_de_base_de_données

# Pour OAuth avec Google
AUTH_GOOGLE_ID=votre_id_google
AUTH_GOOGLE_SECRET=votre_secret_google

# Pour OAuth avec GitHub
AUTH_GITHUB_ID=votre_id_github
AUTH_GITHUB_SECRET=votre_secret_github

Client Better Auth

Pour utiliser Better Auth côté client, installez le package better-auth-client et configurez-le :

import { createClient } from "better-auth-client"

export const client = createClient({
  baseUrl: process.env.NEXT_PUBLIC_AUTH_URL || "http://localhost:3000/api/auth"
})

Hooks côté client

import { useSession, useSignIn, useSignOut } from "better-auth-client/react"

function Profile() {
  const { data: session } = useSession()
  const signIn = useSignIn()
  const signOut = useSignOut()

  if (!session) {
    return <button onClick={() => signIn()}>Se connecter</button>
  }

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

Bonnes pratiques

1. Sécurité : utilisez des clés secrètes fortes (openssl rand -base64 32).
2. Variables d'environnement : ne committez jamais vos clés. Utilisez .env.local.
3. Gestion des sessions : choisissez la stratégie qui correspond à vos besoins (JWT pour performance, DB pour sécurité).
4. Plugins : n'installez que les plugins nécessaires pour minimiser la taille du bundle.
5. Validation : validez les entrées utilisateur avant de les transmettre à Better Auth.

Exemple complet de fichier auth.ts

import { betterAuth } from "better-auth-js"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { prisma } from "@/lib/prisma"
import { twoFactorPlugin } from "@better-auth/two-factor"
import { rolesPlugin } from "@better-auth/roles"

export const { handlers, auth, signIn, signOut } = betterAuth({
  adapter: PrismaAdapter(prisma),
  secret: process.env.AUTH_SECRET,
  url: process.env.AUTH_URL,
  session: {
    strategy: "jwt",
    maxAge: 60 * 60 * 24 * 7
  },
  plugins: [
    twoFactorPlugin(),
    rolesPlugin()
  ],
  providers: [
    {
      id: "google",
      name: "Google",
      type: "oauth",
      clientId: process.env.AUTH_GOOGLE_ID,
      clientSecret: process.env.AUTH_GOOGLE_SECRET
    }
  ]
})