Cours 06 - Authentification

BetterAuth

BetterAuth est une librairie Javascript d’authentication compatible avec la plupart des engins de base de données, la plupart des ORM populaires ainsi qu’avec la majorité des moyens d’authentification disponibles.

Comme sa documentation est très complète, on s’y référera pour la plupart des fonctionnalités recherchées avec certaines mises au point.

Installation & configuration

On installe la librairie à l’aide de la commande:

npm i better-auth

On suivra ensuite les détails de sa documentation.

Précisions - auth.js

Afin d’obtenir des résultats et une structure de projet semblables, voici quelques précisions au sujet de l’installation.

• Comme Typescript ne fait pas l’objet de ce cours, les fichiers créés devront porter l’extension .js ou .jsx (plutôt que .ts ou .tsx).
• Le fichier auth.js sera créé dans le dossier /src/lib.
• On configurera ce fichier en utilisant la version pour sqlite, et Drizzle dans Next.js.
• Afin de supporter les nouveaux types de relation de la dernière version de Drizzle (celle qui s’installe désormais par défaut).

/src/lib/auth.js

import { db } from "@/db"; // variable créée avec Drizzle
import { betterAuth } from "better-auth";
// version supportant les nouvelles relations Drizzle
import { drizzleAdapter } from "@better-auth/drizzle-adapter/relations-v2";
import { nextCookies } from "better-auth/next-js";

export const auth = betterAuth({
database: drizzleAdapter(db, {
  provider: "sqlite",
}),
plugins: [nextCookies()],
});

export const getServerSession = async () => {
  const session = await auth.api.getSession({
    headers: await headers(),
  });
  return session;
};

Précisions - Schémas d’authentification

1. Suivre les instructions pour générer les schémas nécessaires à l’authentification (accepter de créer le fichier auth-schema.ts).
2. Renommer le fichier en auth-schema.js et le déplacer dans le dossier /src/db/schema.
3. Pousser ensuite les schémas vers la bd comme à l’habitude.
4. Afin de s’assurer que BetterAuth retrouve les schémas qui le concernent, modifier le fichier auth.js afin de préciser leur emplacement:

/src/lib/auth.js

  // Ajouter ce import
  import * as authSchema from "../db/schema/auth-schema";

  // Modifier la section database de la configuration:
  database: drizzleAdapter(db, {
    provider: "sqlite",
    schema: { ...authSchema },
  }),
  // autres options

Compléter ensuite le reste de la configuration.

Fonctionnalités

Authentification

On retrouvera les différentes méthodes pour l’inscription, l’authentification et la déconnexion par courriel & mot de passe dans la documentation autant pour le côté serveur que client.

Détection de l’authentification

On vérifie l’authentification de l’utilisateur en récupérant sa session.

À partir de la session, il est possible de récupérer les informations de l’utilisateur connecté tels que:

• id
• name
• email
• emailVerified
• createdAt & updatedAt

On peut ajouter un bout de code au fichier /src/lib/auth.js afin de détecter si l’utilisateur est authentifié du côté serveur:

/src/lib/auth.js

// Ajouter ce import
import { headers } from "next/headers";

// le reste du fichiers

// ajouter cette fonction
export const getServerSession = async () => {
  const session = await auth.api.getSession({
    headers: await headers(),
  });
  return session;
};

Du côté serveur, on pourra par la suite détecter si l’utilisateur est authentifié en appelant getServerSession().

import { getServerSession } from "@/lib/auth";

const MaComposante = async () => {
  const session = await getServerSession();
  if (!session || !session.user) {
    // utilisateur non connecté
      // unauthorized();
      // ou
      // redirect('/login');
  }
};

Règles de base

1. Ne pas envoyer le userId du client vers le serveur. Le récupérer plutôt directement du côté serveur avec getServerSession.
2. Ne pas envoyer le userId du client vers le serveur. Le récupérer plutôt directement du côté serveur avec getServerSession.
3. Ne pas envoyer le userId du client vers le serveur. Le récupérer plutôt directement du côté serveur avec getServerSession.
4. Vérifier l’authentification de l’utilisateur depuis les actions pour les mutations ou depuis les composantes serveur pour les requêtes et envoyer ensuite le id de l’utilisateur à la couche de données si nécessaire (il n’est pas nécessaire de revalider l’authentification depuis la couche de données si cela a été fait en amont)