Authentification

L'authentification vérifie l'identité d'un utilisateur, tandis que l'autorisation contrôle ce qu'un utilisateur peut accéder. Next.js prend en charge plusieurs modèles d'authentification, chacun conçu pour des cas d'utilisation différents. Cette page passera en revue chaque cas afin que vous puissiez choisir en fonction de vos contraintes.

Modèles d'authentification

La première étape pour identifier le modèle d'authentification dont vous avez besoin est de comprendre la stratégie de récupération de données que vous souhaitez utiliser. Nous pouvons ensuite déterminer quels fournisseurs d'authentification prennent en charge cette stratégie. Il existe deux modèles principaux :

• Utiliser la génération statique pour effectuer un rendu côté serveur d'un état de chargement, suivi d'une récupération des données utilisateur côté client.
• Récupérer les données utilisateur côté serveur pour éviter un flash de contenu non authentifié.

Authentification des pages générées statiquement

Next.js détermine automatiquement qu'une page est statique s'il n'y a pas d'exigences de données bloquantes. Cela signifie l'absence de getServerSideProps et de getInitialProps dans la page. À la place, votre page peut afficher un état de chargement depuis le serveur, puis récupérer l'utilisateur côté client.

Un avantage de ce modèle est qu'il permet aux pages d'être servies depuis un CDN global et préchargées en utilisant next/link. En pratique, cela se traduit par un TTI (Time to Interactive) plus rapide.

Examinons un exemple pour une page de profil. Cela affichera d'abord un squelette de chargement. Une fois la requête pour l'utilisateur terminée, elle affichera le nom de l'utilisateur :

import useUser from '../lib/useUser'
import Layout from '../components/Layout'

const Profile = () => {
  // Récupère l'utilisateur côté client
  const { user } = useUser({ redirectTo: '/login' })

  // Affiche l'état de chargement côté serveur
  if (!user || user.isLoggedIn === false) {
    return <Layout>Chargement...</Layout>
  }

  // Une fois la requête utilisateur terminée, affiche l'utilisateur
  return (
    <Layout>
      <h1>Votre Profil</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

Vous pouvez voir cet exemple en action. Consultez l'exemple with-iron-session pour voir comment il fonctionne.

Authentification des pages rendues côté serveur

Si vous exportez une fonction async appelée getServerSideProps depuis une page, Next.js pré-rendra cette page à chaque requête en utilisant les données retournées par getServerSideProps.

export async function getServerSideProps(context) {
  return {
    props: {}, // Seront passés au composant de page comme props
  }
}

Transformons l'exemple de profil pour utiliser le rendu côté serveur. S'il y a une session, retournez user comme prop au composant Profile dans la page. Notez qu'il n'y a pas de squelette de chargement dans cet exemple.

import withSession from '../lib/session'
import Layout from '../components/Layout'

export const getServerSideProps = withSession(async function ({ req, res }) {
  const { user } = req.session

  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    }
  }

  return {
    props: { user },
  }
})

const Profile = ({ user }) => {
  // Affiche l'utilisateur. Aucun état de chargement n'est nécessaire
  return (
    <Layout>
      <h1>Votre Profil</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

Un avantage de ce modèle est d'éviter un flash de contenu non authentifié avant la redirection. Il est important de noter que la récupération des données utilisateur dans getServerSideProps bloquera le rendu jusqu'à ce que la requête à votre fournisseur d'authentification soit résolue. Pour éviter de créer un goulot d'étranglement et d'augmenter votre TTFB (Time to First Byte), vous devez vous assurer que votre recherche d'authentification est rapide. Sinon, envisagez la génération statique.

Fournisseurs d'authentification

Maintenant que nous avons discuté des modèles d'authentification, examinons des fournisseurs spécifiques et explorons comment ils sont utilisés avec Next.js.

Apportez votre propre base de données

Si vous avez une base de données existante avec des données utilisateur, vous voudrez probablement utiliser une solution open-source indépendante du fournisseur.

• Si vous voulez un utilitaire de session bas niveau, chiffré et sans état, utilisez iron-session.
• Si vous voulez un système d'authentification complet avec des fournisseurs intégrés (Google, Facebook, GitHub…), JWT, JWE, email/mot de passe, liens magiques et plus encore… utilisez next-auth.

Ces deux bibliothèques prennent en charge les deux modèles d'authentification. Si vous êtes intéressé par Passport, nous avons également des exemples pour cela utilisant des cookies sécurisés et chiffrés :

• with-passport
• with-passport-and-next-connect

Autres fournisseurs

Pour voir des exemples avec d'autres fournisseurs d'authentification, consultez le dossier d'exemples.