Retour • 08/01/2024

NextAuth VS BetterAuth : Quelle authentification utiliser avec NextJS

Écris par Melvyn Malherbe le 08/01/2024

AuthJS (anciennement NextAuth) est la librairie la plus populaire pour gérer l'authentification dans les applications NextJS.

Pourtant ce n'est pas la seule solution et j'ai récemment migré toutes mes applications sur Better-Auth, qui je te le promets, une fois testée te fera l'utiliser à vie.

Chaque titre va comparer une fonctionnalité qui m'a fait switch.

Installation et setup

Sur Better-Auth, l'installation est très simple, il suffit de suivre leur tutoriel et d'installer chaque librairie.

Ce qui est magique, c'est que pour gérer ta database ils proposent un CLI qui met à jour ton schéma automatiquement. Par exemple tu setup Prisma :

import { betterAuth } from 'better-auth';
import { prismaAdapter } from 'better-auth/adapters/prisma';
import { PrismaClient } from '~/generated/client';

const prisma = new PrismaClient();
export const auth = betterAuth({
  database: prismaAdapter(prisma, {
    provider: 'sqlite', // or "mysql", "postgresql", ...etc
  }),
});

Puis il te suffit de lancer npx @better-auth/cli generate pour que Better-Auth mette automatiquement à jour ton schéma Prisma avec les nouvelles données.

Pourquoi ce CLI ? Car Better-Auth propose des plugins et par exemple en ajoutant le plugin username tu vas pouvoir relancer la commande pour qu'il ajoute automatiquement les champs username dans Prisma.

Ça offre une expérience de développeur bien plus agréable.

Email / Password

Avec AuthJS, l'e-mail et password était une vraie galère à setup à tel point qu'il fallait faire du code soi-même pour le faire comme je l'explique dans mon article sur le sujet..

Avec Better-Auth, il suffit d'ajouter ceci :

import { betterAuth } from 'better-auth';

export const auth = betterAuth({
  emailAndPassword: {
    enabled: true,
  },
});

Et c'est tout, tu peux déjà commencer à tester.

DX du Client

Pour interagir avec Better-Auth, tu as ce qu'ils appellent le "client" qui est appelable côté client et qui te permet d'interagir avec Better-Auth. Par exemple pour signUp :

authClient.signUp.email({
  email: values.email,
  password: values.password,
  name: values.name,
  image: values.image,
});

Juste en faisant cette commande, tu viens de créer un nouvel utilisateur avec e-mail et password. Il gère automatiquement le setup de cookie, la gestion du hash du password etc...

Features avancées

Tu as besoin de Reset Password ? Validation de l'e-mail ou même Social Login ?

Tu peux tout gérer avec la configuration et la documentation est super bien expliquée. Par exemple pour reset le password tu ajoutes ceci dans ta config auth.ts :

import { betterAuth } from 'better-auth';

export const auth = betterAuth({
  emailAndPassword: {
    enabled: true,
    async sendResetPassword({ user, url }) {
      await sendEmail({
        to: user.email,
        subject: 'Reset your password',
        text: `Hello, clique here to reset your password : ${url}`,
      });
    },
  },
});

Juste en faisant ça, on a activé le reset password. Ensuite il te suffit d'appeler les méthodes du client :

authClient.forgetPassword({
  email: values.email,
  redirectTo: '/auth/reset-password',
});

De créer une page /auth/reset-password qui récupère le token et le nouveau password et le met à jour avec cette méthode :

authClient.resetPassword({
  token: token,
  newPassword: values.password,
});

Trop simple pour être vrai ? Oui. C'est vraiment fantastique.

Pour préciser, AuthJS n'avait tout simplement aucune des fonctionnalités

• Verify email = ❌
• Reset Password = ❌
• Changer l'email = ❌

Donc c'est incomparable car avec Better-Auth tu peux tout faire simplement.

Plugins et customization

Better-Auth a été créé avec un système qui peut avoir autant de plugins que tu veux pour tout faire. La communauté peut créer des plugins et better-auth crée aussi des super plugins comme Organization et Stripe.

La documentation est top et c'est simple à setup.

Avec ça, on peut avoir une organisation, manager les permissions, les rôles très simplement.

J'ai setup tout ça dans NOW.TS pour toi et ça le fait en vraiment peu de code.

Personnellement je suis totalement fan de ce système et ça permet de faire une infinité de choses.

Conclusion

Je n'ai même pas parlé d'AuthJS à quel point AuthJS est pauvre en fonctionnalités. C'est comme comparer un vieux Nokia 3310 à un iPhone.

L'iPhone peut tout faire, tu peux installer des applications quand le Nokia peut juste... téléphoner.

En l'occurrence le seul usage de NextAuth c'est le social sign in et le magic link. Tout le reste est impossible et il faut tout faire manuellement, jusqu'à la gestion de la session token.

En résumé je déconseille vivement l'utilisation de NextAuth.

Et je te recommande vivement d'utiliser Better-Auth.

Tu peux retrouver une formation FullStack ici.