NextAuth.js - Définir un secret

Posté le 19. Octobre 2022  •  3 minutes  • 453 mots  • Autres langues:  English

Aujourd’hui, un article sur l’excellente librairie NextAuth.js qui gère l’authentification pour NextJS.

La v4 de NextAuth.js, publiée il y a maintenant quelques mois, a entraîné pas mal de nouveautés. Parmi les changements, il y a l’obligation, pour la production, de générer et fournir un secret à NextAuth afin qu’il puisse générer le JWT utile pour les sessions.

Ce secret va donc servir à NextAuth pour :

• hasher les token JWT
• signer et chiffrer les cookies de session
• générer les clés publiques/privées

Si vous ne définissez aucun secret, vous aurez les erreurs suivantes à la suite d’un build pour une phase production :

MissingSecret [MissingSecretError]: Please define a `secret` in production.

ERROR[next - auth][error][NO_SECRET];

Les étapes pour définir et fournir un secret à NextAuth

1 - Générer un secret

Pour cela, ouvrez un terminal sous Linux (j’imagine que Windows dispose également de la commande openssl) et tapez :

openssl rand -base64 32

La sortie de cette commande sera votre secret, une string de la forme : Ey7nTKnggBc0bRN8WUjyShw2qzOZ6KW4fUyqcKBePxY=

Au travers de mes recherches, j’ai découvert une URL qui génère des randoms ici : https://generate-secret.vercel.app/32 (projet GitHub ). Attention tout de même, on ne connait pas le niveau d’entropie de leur serveur, et on ne connaît pas non plus le code qui tourne réellement derrière… bref pour une vraie production je vous conseille de le générer vous-même par la commande openssl ou bien d’héberger le code du projet “generate-secret” pour vous en servir.

2- Placer ce secret en variable d’environnement

Je vous recommande de placer ce secret dans une variable d’environnement. Vous pouvez utiliser le fichier .env (ou .env.local) ou bien directement votre fichier next.config.js. Ici, je prends l’exemple du fichier next.config.js avec lequel je préfère travailler. Dans ce fichier, ajoutez la ligne avec la valeur NEXTAUTH_SECRET et votre secret.

Mon exemple :

module.exports = {
    reactStrictMode: true,
    swcMinify: true,
    env: {
        mongodb_username: 'USERNAME',
        mongodb_password: 'PASSWORD',
        mongodb_db: 'DB',
        NEXTAUTH_URL: 'https://r4ven.fr',
        NEXTAUTH_SECRET: 'Ey7nTKnggBc0bRN8WUjyShw2qzOZ6KW4fUyqcKBePxY=',
    },
};

3- Ajout du secret dans la configuration next-auth

Une fois votre secret placé en tant que variable d’environnement, il faut que next-auth puisse y accéder. Sous NextJS, les variables d’environnement sont accessibles côté serveur par l’objet process.env et c’est la propriété NEXTAUTH_SECRET qui nous intéresse ici.

Sur votre application, rendez-vous dans le fichier /pages/api/auth/[...nextauth].js, et ajoutez au même niveau que providers et vos éventuels callbacks, la valeur :

secret: process.env.NEXTAUTH_SECRET,

4- Relancer un build

Enfin, pensez à bien relancer un nouveau npm run build et tout est prêt 🥳 !

NOTE : Dans la documentation de NextAuth, il est question de rendre la génération du secret obligatoire même en mode développement dans les prochaines versions de la librairie. Du coup, autant prendre cette bonne habitude dès maintenant, même en phase de développement.