getSession() pour next-auth v4

La v3 de next-auth n'étant plus maintenue et plus mis à jour en terme de sécurité, je me suis décidé à suivre le cours avec la v4. Heureusement, la doc est super bien faite, et permet même de rapidement voir les différences entre v3 et v4.

Jusqu'à présent, je n'ai eu aucune difficulté à utiliser la v4.

En revanche, dans cette session, vous ne pouvez plus utiliser getSession() côté serveur, donc via getServerSideProps. Suite à cette issue github ( https://github.com/nextauthjs/next-auth/issues/1535 ) les développeurs de next-auth ont décidé d'intégrer une fonctionnalité qui est pour le moment en "bêta" mais dont la documentation recommande l'usage : https://next-auth.js.org/configuration/nextjs#unstable_getserversession

Du coup, voici les modifications à faire de votre côté.

Pour votre fichier [...nextauth].js :

//Lib
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import { connectToDatabase } from '../../../helpers/mongodb';
import { verifyPassword } from '../../../helpers/auth';

////Usage si on a besoin de getServerSideProps et donc de unstable_getServerSession
export const authOptions = {
    providers: [
        CredentialsProvider({
            async authorize(credentials) {
                const { email, password } = credentials;

                //Connexion à MongoDB
                const clientMongoDB = await connectToDatabase();

                //Step 1 : l'utilisateur existe-t-il ?
                const user = await clientMongoDB
                    .db()
                    .collection('utilisateurs')
                    .findOne({ email: email });

                if (!user) {
                    clientMongoDB.close();
                    throw new Error('Impossible de vous authentifier.');
                }
                //Step 2 : Le mot de passe est-il correct ?
                const isValid = await verifyPassword(password, user.password);

                if (!isValid) {
                    clientMongoDB.close();
                    throw new Error('Impossible de vous authentifier.');
                }

                //Succès
                clientMongoDB.close();
                return {
                    email: user.email,
                    name: user.pseudo,
                };
            },
        }),
    ],
};

export default NextAuth(authOptions);

Pour votre fichier d'index.js ou toute autre fichier qui utiliserait getServerSideProps, importez :

import { authOptions } from '../pages/api/auth/[...nextauth]';
import { unstable_getServerSession } from 'next-auth/next';

Puis dans la fonction async getServerSideProps de votre fichier vous pouvez ajouter (ici c'est l'exemple de index.js, la page d'accueil du portfolio) :

export async function getServerSideProps(context) {
    //Var
    let projets;
    const session = await unstable_getServerSession(
        context.req,
        context.res,
        authOptions
    );
    let username = null;
    if (session) {
        username = session.user.name;
    }

    try {
        //Connexion MongoDB
        const client = await connectToDatabase();
        const db = client.db();

        //Récupération des projets les plus récents
        projets = await db
            .collection('projets')
            .find()
            .sort({ annee: 'desc' })
            .toArray();
        //Serialization JSON
        projets = JSON.parse(JSON.stringify(projets));
        //Récupération des 3 premiers
        projets = projets.slice(0, 3);
    } catch (error) {
        console.log(error);
        projets = [];
    }

    return {
        props: {
            projets: projets,
            user: username,
        },
    };
}

En espérant aider !! A+