Mise en place Better Auth

Ce cours fait partiellement suite au cours de React.js.

Introduction à Better Auth

Better Auth c'est une librairie qui permet de gérer l'authentification et l'autorisation dans une application. Elle est très flexible et peut être utilisée avec différents frameworks, plugins, etc.

Objectifs

Comprendre comment Better Auth fonctionne
Pouvoir se connecter avec Google

Installation

On install la librairie :

		npm i better-auth

On va ensuite créer un fichier de configuration pour Better Auth :

src/lib/auth.ts

		import { betterAuth } from 'better-auth';
import { drizzleAdapter } from 'better-auth/adapters/drizzle';
import { db } from '../db/clientDb.js'; // your drizzle instance
 
export const auth = betterAuth({
	database: drizzleAdapter(db, {
		provider: 'sqlite'
	})
});

PS: On utilise src/lib/auth.ts parce que Better Auth nous le demande. On pourrait le mettre ailleurs, mais il faudrait lui donner le chemin vers le fichier de configuration (vous verrez plus tard pourquoi)

Mise en place & configuration

On va mettre en place Better Auth. On a créé l'instance de Better Auth, et on va la connecter à notre serveur hono. On va donc ajouter une ligne dans le index.js :

src/index.js

		// imports...
import { auth } from './lib/auth.js';
 
const app = new Hono();
 
app.on(['POST', 'GET'], '/api/auth/*', (c) => auth.handler(c.req.raw));

Ici on vient de dire que quand on fait une requête POST ou GET sur /api/auth/*, on va utiliser la fonction auth.handler pour gérer la requête. Donc, en gros, on délègue la gestion de l'authentification et de l'autorisation à Better Auth.

Configuration de l'authentification

Pour activer différents types d'authentification, on va devoir le dire à Better Auth. On va donc ajouter dans le fichier de configuration :

src/lib/auth.ts

		export const auth = betterAuth({
	database: drizzleAdapter(db, {
		provider: 'sqlite' // or "mysql", "sqlite"
	}),
 
	trustedOrigins: ['http://localhost:5173'],
 
	emailAndPassword: {
		enabled: true
	},
	socialProviders: {
		google: {
			clientId: process.env.GOOGLE_CLIENT_ID,
			clientSecret: process.env.GOOGLE_CLIENT_SECRET
		}
	}
});

On en profite pour dire qu'on fait confiance à "localhost:5173" (front-end) pour faire des requêtes. On active l'authentification par email et mot de passe. On active l'authentification par Google, en lui passant les ID et secrets de Google. On peut les récupérer sur le Google Cloud Console. Il faudra les définir dans le fichier .env.

Variables d'environnement

On ajoute les ID et secrets de Google dans le fichier .env, et on ajoute deux nouvelles variables d'environnement. BETTER_AUTH_SECRET est une clé secrète pour signer les tokens, et BETTER_AUTH_URL est l'URL de notre serveur.

.env

		DATABASE_URL=file:dev.db
BETTER_AUTH_SECRET=secret
BETTER_AUTH_URL=http://localhost:3000
 
GOOGLE_CLIENT_ID=votre-google-client-id
GOOGLE_CLIENT_SECRET=votre-google-client-secret

CORS

Pour finir, on va devoir configurer le CORS. On a utilisé un proxy dans le front, mais Better Auth ne l'utilisera pas. On va donc ajouter dans l'index.js :

src/index.js

		// imports...
import { cors } from 'hono/cors';
 
const app = new Hono();
 
app.use(
	'*',
	cors({
		origin: 'http://localhost:5173',
		credentials: true,
		allowMethods: ['POST', 'GET', 'OPTIONS', 'PUT']
	})
);

Ici on vient de dire que pour toutes les requêtes, on va utiliser le middleware CORS, en disant qu'on authorise "localhost:5173" (notre front-end) pour faire des requêtes. C'est important qu'il soit tout en haut du fichier, avant les routes, sinon les routes ne seront pas protégées par le CORS. Aussi, le credentials: true est important pour que Better Auth puisse utiliser les cookies.

BDD

Pour finir, on doit ajouter les tables d'utilisateur, etc, dans la BDD. On va dire à Better Auth de nous générer un schéma de BDD :

		npx @better-auth/cli generate

Et voilà, on a généré un schéma de BDD. Il se trouve à la racine du projet sous le nom de auth-schema.ts. On le copie, on l'ajoute à notre fichier schéma déjà existant (sans remplacer la table tasks déjà existante!!!). Et on applique le schéma à la BDD :

		npx drizzle-kit push

Et voilà, on a mis en place Better Auth ! Maintenant, on va pouvoir se connecter avec Google depuis le front. À suivre.