L'authentification est la pierre angulaire de toute application web moderne, pourtant sa mise en place reste l'un des défis les plus chronophages pour les développeurs. Découvrez Better Auth API—une solution d'authentification agnostique de framework qui promet de transformer la façon dont nous implémentons la gestion des utilisateurs. Dans ce guide complet, nous allons construire une application full-stack complète qui démontre la puissance et la simplicité de Better Auth, en utilisant Bun pour des performances ultra-rapides.
Vous voulez une plateforme intégrée et tout-en-un pour que votre équipe de développeurs travaille ensemble avec une productivité maximale ?
Apidog répond à toutes vos exigences et remplace Postman à un prix beaucoup plus abordable !
Qu'est-ce que Better Auth API ?
Better Auth API est un framework d'authentification moderne et open-source conçu pour fonctionner de manière transparente dans n'importe quel environnement JavaScript. Contrairement aux bibliothèques d'authentification traditionnelles qui vous enferment dans des écosystèmes spécifiques, Better Auth fournit une API unifiée qui s'adapte à votre stack—que vous utilisiez React, Vue, Svelte ou du JavaScript vanilla sur le frontend, et Node.js, Bun ou Deno sur le backend. Son architecture basée sur des plugins prend en charge plusieurs stratégies d'authentification, de l'e-mail/mot de passe traditionnel aux fournisseurs OAuth, aux passkeys et aux liens magiques, tout en maintenant la sécurité des types et une excellente expérience développeur.
Démarrer avec Better Auth : Prérequis et configuration du projet
Avant de plonger dans le code, assurez-vous d'avoir installé les éléments suivants :
- Bun 1.0+ : Nous utiliserons Bun tout au long de ce tutoriel pour sa vitesse exceptionnelle et ses outils modernes.
- Node.js 18+ : Requis pour le runtime backend.
- Un éditeur de code : VS Code recommandé pour le support TypeScript.
Bien que cette configuration fonctionne parfaitement avec npm, nous allons démontrer le workflow Bun, qui offre une installation de packages 3 à 5 fois plus rapide et une expérience de développement plus rationalisée.
Construction d'un projet exemple : Implémentation étape par étape
Créons un système d'authentification pratique avec un frontend React et un backend Express, complété par la persistance de la base de données.
Étape 1 : Configuration du backend avec Express et Drizzle ORM
1. Initialiser le projet Backend
Tout d'abord, créez et entrez dans votre répertoire backend :
mkdir better-auth-backend
cd better-auth-backend
bun init -y
2. Installer les dépendances
Nous aurons besoin d'Express pour le serveur, de Better Auth pour l'authentification et de Drizzle ORM pour la gestion de la base de données :
bun add express better-auth drizzle-orm
bun add -D @types/bun @types/express drizzle-kit
3. Configurer les variables d'environnement
Créez un fichier .env pour stocker la configuration sensible :
BETTER_AUTH_SECRET=your-secret-key-here # Générer avec : openssl rand -base64 32
BETTER_AUTH_URL=http://localhost:3000
DATABASE_URL=local.db
Le BETTER_AUTH_SECRET peut également être généré sur le site web de better-auth.
4. Créer le schéma de base de données avec Drizzle ORM
Better Auth fonctionne mieux avec Drizzle, qui offre un excellent support TypeScript et évite les problèmes de modules natifs. Créez src/db/schema.ts :
import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core";
export const user = sqliteTable("user", {
id: text("id").primaryKey(),
name: text('name').notNull(),
email: text('email').notNull().unique(),
emailVerified: integer('email_verified', { mode: 'boolean' }).notNull().default(false),
image: text('image'),
createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
updatedAt: integer('updated_at', { mode: 'timestamp' }).notNull(),
});
export const session = sqliteTable("session", {
id: text("id").primaryKey(),
expiresAt: integer('expires_at', { mode: 'timestamp' }).notNull(),
token: text('token').notNull().unique(),
createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
userId: text('user_id').notNull(),
});
export const account = sqliteTable("account", {
id: text("id").primaryKey(),
accountId: text('account_id').notNull(),
providerId: text('provider_id').notNull(),
userId: text('user_id').notNull(),
accessToken: text('access_token'),
refreshToken: text('refresh_token'),
createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
});
export const verification = sqliteTable("verification", {
id: text("id").primaryKey(),
identifier: text('identifier').notNull(),
value: text('value').notNull(),
expiresAt: integer('expires_at', { mode: 'timestamp' }).notNull(),
});
5. Configurer la connexion à la base de données
Créez src/db/index.ts en utilisant la liaison SQLite native de Bun :
import { Database } from "bun:sqlite";
import { drizzle } from "drizzle-orm/bun-sqlite";
const sqlite = new Database("local.db");
export const db = drizzle(sqlite);
6. Configurer Better Auth
Créez src/lib/auth.ts pour configurer l'API Better Auth :
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "../db";
import { user, session, account, verification } from "../db/schema";
export const auth = betterAuth({
database: drizzleAdapter(db, {
provider: "sqlite",
schema: {
user: user,
session: session,
account: account,
verification: verification,
},
}),
emailAndPassword: {
enabled: true,
},
trustedOrigins: ["http://localhost:5173"],
});
7. Créer un serveur Express
Dans src/index.ts, montez le gestionnaire d'API Better Auth :
import express from "express";
import cors from "cors";
import { toNodeHandler } from "better-auth/node";
import { auth } from "./lib/auth";
const app = express();
const PORT = process.env.PORT || 3000;
app.use(
cors({
origin: "http://localhost:5173",
credentials: true,
})
);
// Monter l'API Better Auth sur /api/auth
app.use("/api/auth", toNodeHandler(auth));
app.use(express.json());
app.get("/api/me", async (req, res) => {
const session = await auth.api.getSession({
headers: req.headers,
});
if (!session) {
return res.status(401).json({ error: "Non autorisé" });
}
res.json({ user: session.user });
});
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
8. Exécuter la migration de la base de données
Créez drizzle.config.ts à la racine du backend :
import { defineConfig } from "drizzle-kit";
export default defineConfig({
dialect: "sqlite",
schema: "./src/db/schema.ts",
out: "./drizzle",
dbCredentials: {
url: "local.db",
},
});
Exécutez la migration pour créer les tables :
bunx drizzle-kit push
Étape 2 : Configuration du frontend avec React et Vite
1. Créer une application React
Dans un nouveau terminal, initialisez le frontend :
bun create vite better-auth-frontend --template react-ts
cd better-auth-frontend
2. Installer les dépendances
bun add better-auth
3. Configurer Tailwind CSS (Mise à jour V4)
Après la version 4 de Tailwind CSS, une configuration différente est requise. Installez les nouveaux packages :
bun add -D tailwindcss postcss @tailwindcss/postcss
Créez tailwind.config.js à la racine du projet :
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Créez postcss.config.js :
export default {
plugins: {
"@tailwindcss/postcss": {},
},
}
Créez src/index.css :
@import "tailwindcss";
body {
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
}
4. Configurer le client Better Auth
Créez src/lib/auth-client.ts :
import { createAuthClient } from "better-auth/react";
export const authClient = createAuthClient({
baseURL: "http://localhost:3000",
});
export const { signIn, signUp, useSession } = authClient;
5. Construire l'interface utilisateur d'authentification
Remplacez src/App.tsx par une interface d'authentification complète :
import { useState } from 'react';
import { useSession, signIn, signUp } from './lib/auth-client';
function App() {
const { data: session, isPending } = useSession();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [name, setName] = useState('');
const handleSignUp = async (e: React.FormEvent) => {
e.preventDefault();
await signUp.email({
name,
email,
password,
callbackURL: '/',
});
};
const handleSignIn = async (e: React.FormEvent) => {
e.preventDefault();
await signIn.email({
email,
password,
});
};
const handleSignOut = async () => {
await authClient.signOut();
};
if (isPending) return <div className="flex items-center justify-center min-h-screen">Chargement...</div>;
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
<div className="max-w-md w-full bg-white rounded-lg shadow-md p-6">
<h1 className="text-2xl font-bold text-center mb-6 text-gray-800">
Test de l'API Better Auth
</h1>
{session?.user ? (
<div className="space-y-4">
<div className="bg-green-50 p-4 rounded-md">
<p className="text-green-800 font-semibold">Connecté en tant que :</p>
<p className="text-green-700">{session.user.email}</p>
<p className="text-green-600 text-sm">{session.user.name}</p>
</div>
<button
onClick={handleSignOut}
className="w-full bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-md transition"
>
Se déconnecter
</button>
</div>
) : (
<div className="space-y-4">
<form onSubmit={handleSignUp} className="space-y-3">
<h2 className="text-lg font-semibold text-gray-700">S'inscrire</h2>
<input
type="text"
placeholder="Nom"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<input
type="password"
placeholder="Mot de passe"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<button
type="submit"
className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-md transition"
>
Créer un compte
</button>
</form>
<form onSubmit={handleSignIn} className="space-y-3">
<h2 className="text-lg font-semibold text-gray-700">Se connecter</h2>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<input
type="password"
placeholder="Mot de passe"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<button
type="submit"
className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition"
>
Se connecter
</button>
</form>
</div>
)}
</div>
</div>
);
}
export default App;
Étape 3 : Tester l'intégration
1. Démarrer le serveur Backend
cd better-auth-backend
bun dev
2. Démarrer le développement Frontend
cd better-auth-frontend
bun dev
3. Tester le flux d'authentification
- Ouvrez
http://localhost:5173dans votre navigateur - Enregistrez un nouvel utilisateur en utilisant le formulaire d'inscription
- Observez le fichier de base de données grandir à mesure que les tables se remplissent
- Déconnectez-vous et reconnectez-vous pour vérifier la gestion de session
- Vérifiez le point de terminaison de session :
http://localhost:3000/api/auth/session
Principaux avantages de Better Auth API
L'API Better Auth se distingue par plusieurs avantages convaincants :
- Agnosticisme de framework : Contrairement à NextAuth.js ou Firebase Auth, Better Auth fonctionne partout où JavaScript s'exécute. La même logique d'authentification sert les clients web, mobiles et API sans modification.
- Multiples stratégies d'authentification : Prise en charge prête à l'emploi des identifiants, OAuth 2.0, passkeys, authentification à deux facteurs et liens magiques. Chaque stratégie est un plugin qui peut être activé avec une seule ligne de configuration.
- Sécurité des types : Le support TypeScript complet avec des types inférés de votre schéma de base de données élimine l'enfer du type "any" courant dans les bases de code d'authentification.
- Flexibilité de la base de données : L'adaptateur Drizzle ORM signifie que vous pouvez basculer entre SQLite, PostgreSQL et MySQL sans modifier votre logique d'authentification. Ce tutoriel utilise SQLite pour la simplicité, mais le même code s'adapte aux bases de données de production.
- Écosystème de plugins : Besoin d'un support d'organisation ? De multi-location ? De rôles d'administrateur ? Le système de plugins de Better Auth vous permet d'étendre les fonctionnalités sans alourdir le cœur.
- Performance : Avec Bun comme runtime, les démarrages à froid sont inférieurs à 100 ms, et l'ensemble du flux d'authentification se termine en moins de 50 ms sur du matériel modeste.
Foire aux questions
Q1 : Puis-je utiliser Better Auth API avec npm au lieu de Bun ?
Rép : Absolument. Bien que ce guide utilise Bun pour ses avantages en termes de performances, chaque commande a un équivalent npm. Remplacez bun add par npm install, bun dev par npm run dev, et bunx par npx. Le seul code spécifique à Bun est l'importation bun:sqlite, qui peut être remplacée par better-sqlite3 pour les environnements Node.js.
Q2 : Pourquoi avions-nous besoin de Drizzle ORM ? Better Auth ne peut-il pas créer les tables automatiquement ?
Rép : Better Auth suit le principe de la gestion explicite de la base de données. Drizzle fournit des migrations sécurisées en termes de types, le versionnement du schéma et prévient la perte accidentelle de données. La commande drizzle-kit push est une configuration unique qui vous donne un contrôle total sur l'évolution de votre base de données.
Q3 : Que faire si je rencontre l'erreur "Missing parameter name" ?
Rép : Cela se produit lors de l'utilisation de app.all() avec des jokers dans Express. La solution consiste à utiliser app.use("/api/auth", toNodeHandler(auth)) à la place. Le gestionnaire de Better Auth gère toutes les sous-routes en interne, donc Express n'a pas besoin de correspondance par joker.
Q4 : Comment ajouter des fournisseurs d'authentification sociale ?
Rép : Activez les plugins OAuth dans votre configuration Better Auth. Par exemple, pour ajouter GitHub :
import { betterAuth } from "better-auth";
import { github } from "better-auth/plugins";
export const auth = betterAuth({
plugins: [
github({
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET,
})
]
});
Q5 : L'API Better Auth est-elle prête pour la production ?
Rép : Oui. Better Auth alimente l'authentification de plusieurs produits SaaS avec des milliers d'utilisateurs. Le framework implémente une gestion de session sécurisée, une protection CSRF et suit les directives OWASP. Cependant, auditez toujours votre implémentation spécifique et maintenez les dépendances à jour.
Conclusion
Construire l'authentification à partir de zéro n'est plus nécessaire avec des solutions modernes comme l'API Better Auth. Dans ce guide, nous avons créé un système d'authentification complet—du schéma de base de données aux composants d'interface utilisateur—en quelques minutes ! La combinaison de la flexibilité de Better Auth, de la sécurité des types de Drizzle ORM et des performances de Bun crée une expérience développeur qui s'adapte du prototype à la production.
Le processus étape par étape démontre que l'authentification, bien que critique, n'a pas besoin d'être complexe. En tirant parti de l'architecture de plugins et de la conception agnostique de framework de Better Auth, vous pouvez vous concentrer sur la création de fonctionnalités importantes pour vos utilisateurs plutôt que de vous battre avec les implémentations de sécurité.
Que vous construisiez un projet personnel ou une application d'entreprise, Better Auth API fournit la base pour une authentification sécurisée et évolutive qui s'adapte à vos besoins—et non l'inverse.
Vous voulez une plateforme intégrée et tout-en-un pour que votre équipe de développeurs travaille ensemble avec une productivité maximale ?
Apidog répond à toutes vos exigences et remplace Postman à un prix beaucoup plus abordable !