Comment intégrer l'authentification dans une application NextJS ?

Quel sont les méthodes et librairie les plus efficaces pour ajouter de l'authentification dans une application NextJS ? Il en existes deux types, les externes et les internes. On va comparer les deux pour que tu ai la meilleur vision sur la question.

Je vais donc juger chaque options par :

• 💸 interne (gratuit) ou externe (payant)
• 💪 facilité d'utilisation
• 📚 documentation
• 🧑‍🤝‍🧑 communauté

Authentification externe

Il est possible de "déléguer" ton authentification et c'est un type de SaaS qui est devenu très popualire. Le plus connu c'est Auth0 qui permet de gérer l'authentification de ton application. Sinon pour NextJS il y a Clerk par exemple qui est devenu très populaire.

Authentification interne

Les authentifications interne c'est des librairies, ou du code que tu vas écrire qui permet de gérer l'authentification de ton application. Le leader historique est Auth.js qui permet d'ajouter du code dans ton application pour gérer l'authentification.

Listes de toutes les options

Maintenatn il est temps de te montrer toutes les optins que tu as pour ajouter l'authentification dasn ton application.

Auth.js

Cette librairie anciennement appelé NextAuth à été créer par une personne de chez Vercel. Elle permet de facilement ajouter de l'authentification dans ton application.

Elle est très flexible et te permet d'ajouter le "Magic Link" avec Resend ou d'autre outils mais aussi de l'authentification via Google et d'autre provider. Le seul petit moins c'est que l'authnentification par email / password est "décourager" et pas "facile à mettre en place" ce qui m'a fait écrire un article sur le sujet.

Les ponts fort :

• très simple à utiliser
• optimiser de base pour NextJS même si maintenant il est "framework agnostic"
• syntaxe simple à utiliser et facile à comprendre

Les points faible :

• certaines chose à faire soit même
• difficile de faire email / password

Points :

• 💸 Gratuit - 5/5
• 💪 Facilité - 4/5
• 📚 Documentation - 5/5
• 🧑‍🤝‍🧑 Communauté - 5/5

BetterAuth

C'est un outil plutôt nouveau qui est venu sur le marché avec une approche intéressante, super flexible, qui s'adapte à ton projet. Ils ont penseé un peu prêt à tout et ont une intégration plutôt "facile" même si ils proposent moins d'adapeur spécifique pour les OAuth et pour les emails.

Leur point fort :

• adapté pour n'importe quel framework
• optimisé pour email / Password
• ont pensé à tout

Leur point faible :

• pas encore très populaire
• peux-être pas assez mature

Points :

• 💸 Gratuit - 5/5
• 💪 Facilité - 4/5
• 📚 Documentation - 4/5
• 🧑‍🤝‍🧑 Communauté - 3/5

Lucia Auth

Lucia n'est pas une libriarie d'autneitifcation mais plus une sorte de Shadcn/UI de l'authentification. C'est une sorte de ressources en ligne qui t'apprends comment intégrer l'ahtnetification dans ton application.

on va retrouver beaucoup de page qui te donne des bout de code à copier / coller pour gérer l'autnentification.

Les points forts :

• contrôle totale sur l'authentification
• possibilité d'apprendre en faisant
• très légère

Les points faible :

• pas de librairie
• plus de travaille pour le développeur
• pas pratique

Points :

• 💸 Gratuit - 5/5
• 💪 Facilité - 1/5
• 📚 Documentation - 2/5
• 🧑‍🤝‍🧑 Communauté - 1/5

Clerk

Clerk est un outil qui te permet de gérer l'authentification de ton application mais sans avoir besoin de le gérer. C'est à dire qu'on va utiliser une API externe et que tous tes users, accès et autre seront gérer par leur services.

Il te suffit d'ajouter leur bout de code, génréalement un provider et un middleware pour pouvoir tout gérer de manière automatique.

Les ponts forts :

• très populaire et documenté
• simple à utiliser
• très flexible

Les points faible :

• aucun contrôle
• tu gères pas les données
• tu vas devoir payé si ton application fonctionne

Points :

• 💸 Payant - 1/5
• 💪 Facilité - 5/5
• 📚 Documentation - 5/5
• 🧑‍🤝‍🧑 Communauté - 5/5

Kinde

Kinde est très similaire à Clerk. Il offre un peu près le même services sauf que c'est un autre SaaS. Je ne l'ai ai pas testé en profondeur donc j'ai pas trop d'autre information à rajouter.

Points :

• 💸 Payant - 2/5
• 💪 Facilité - 5/5
• 📚 Documentation - 4/5
• 🧑‍🤝‍🧑 Communauté - 4/5

Auth0

Auth0 est un des leader dans le domaine de l'authentification. Ils ont une très bonne documentation et une très bonne communauté. Ils ont une très bonne intégration avec les providers OAuth et les emails.

J'ai l'impressio nque Auth0 target des bien plus grosse entreprise que Clerk et Kinde qui target plutôt "tout le monde".

Points :

• 💸 Payant - 1/5
• 💪 Facilité - 4/5
• 📚 Documentation - 5/5
• 🧑‍🤝‍🧑 Communauté - 5/5

Tableau récapitulatif

Solution	Prix	Facilité	Documentation	Communauté	Total
Auth.js	5/5	4/5	5/5	5/5	19/20
BetterAuth	5/5	4/5	4/5	3/5	16/20
Lucia	5/5	1/5	2/5	1/5	9/20
Clerk	1/5	5/5	5/5	5/5	16/20
Kinde	2/5	5/5	4/5	4/5	15/20
Auth0	1/5	4/5	5/5	5/5	15/20

Conclusion

Personnellement, je suis un grand fan de Auth.js et BetterAuth. Pourquoi ? Parce que j'aime avoir le contrôle total sur mon application et surtout sur les données de mes utilisateurs.

Les solutions comme Clerk ou Auth0 sont super pratiques, mais je trouve ça dommage de déléguer une partie aussi critique de mon application à un service externe. Sans parler du prix qui peut vite grimper !

Auth.js est mon premier choix car il est gratuit, open source, et super bien maintenu. Même si l'authentification par email/password n'est pas super simple à mettre en place, une fois que c'est fait, tu as un contrôle total sur ton système d'authentification.

BetterAuth est mon second choix car il propose une approche similaire mais avec une meilleure gestion native de l'email/password. Il est encore jeune mais très prometteur !

En gros, si tu débutes, pars sur Auth.js. Si tu veux quelque chose de plus simple pour l'email/password, teste BetterAuth. Et si tu as un gros budget et que tu veux pas te prendre la tête, Clerk fera très bien l'affaire !