useSession() sur next-auth v4

Dans la v4 de next-auth, la fonction useSession renvoit un objet contenant deux valeurs : data et session.

La valeur session n'est plus un boolean comme dans la v3 mais une chaîne de caractère pouvant prendre trois valeurs : "loading" | "authenticated" | "unauthenticated".

Du coup ça modifie un peu la logique et j'ai donc créé une fonction qui fait ce rendu en fonction de session. Cette fonction est ensuite mise dans le JSX.

C'est un parti pris mais personnellement je préfère ne pas voir le menu du tout puis afficher le bon menu, plutôt que d'afficher d'abord "Accueil | Projets" puis de compléter le menu en fonction de la session. Mais c'est vraiment une histoire de goût pour le coup, vous faites comme vous le souhaitez et comme le dit très bien Louis Nicolas, si ça ne vous convient pas, passer plutôt par getServerSideProps.

Mon code est donc le suivant avec cette v4 de next-auth :

//Lib
import classes from './Header.module.css';
import Link from 'next/link';
import { useSession, signOut } from 'next-auth/react';
import { useRouter } from 'next/router';

export default function Header() {
    //Var
    const { status } = useSession();
    const router = useRouter();

    //Functions
    const onLogoutClickedHandler = async () => {
        await signOut();
        router.replace('/');
    };

    const isConnect = () => {
        if (status === 'authenticated') {
            return (
                <>
                    <li>
                        <Link href='/'>Accueil</Link>
                    </li>
                    <li>
                        <Link href='/projets'>Projets</Link>
                    </li>
                    <li>
                        <Link href='/ajouter'>Ajouter</Link>
                    </li>
                    <li>
                        <a
                            onClick={onLogoutClickedHandler}
                            style={{ cursor: 'pointer' }}
                        >
                            Déconnexion
                        </a>
                    </li>
                </>
            );
        } else if (status === 'unauthenticated') {
            return (
                <>
                    <li>
                        <Link href='/'>Accueil</Link>
                    </li>
                    <li>
                        <Link href='/projets'>Projets</Link>
                    </li>
                    <li>
                        <Link href='/inscription'>Inscription</Link>
                    </li>
                    <li>
                        <Link href='/connexion'>Connexion</Link>
                    </li>
                </>
            );
        } else if (status === 'loading') {
            return null;
        }
    };

    return (
        <header className={classes.Header}>
            <div
                className='container'
                style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                }}
            >
                <h1 style={{ margin: 0 }}>Raven</h1>
                <nav>
                    <ul
                        style={{
                            display: 'flex',
                            listStyleType: 'none',
                            margin: 0,
                            padding: 0,
                            gap: '15px',
                        }}
                    >
                        {isConnect()}
                    </ul>
                </nav>
            </div>
        </header>
    );
}