Démarrer mon projet
Pour faire suite à notre article précédent, comment connecter GraphQL à son application Next.js avec apollo-client ? (Voir l'article), nous allons voir comment protéger nos différentes pages, des utilisateurs qui ne sont pas connectés.
La plupart des applications web ont une partie réservée à leurs membres, avec un système d’authentification (création de compte, connexion) qui leur permet d’accéder à plus de contenu et de profiter pleinement de l’application.
Les “visiteurs” quand à eux, n’ont accès qu’à certaines pages et sont redirigés vers les pages de création de compte ou de connexion, lorsqu’ils essayent d’accéder à une ressource réservé aux membres connectés.
Dans l’article précédent, nous avons rajouté une fonction withApollo qui permettait de lier sa page Next.js à apollo-client très simplement.
Aujourd’hui, nous allons créer une fonction withAuth, qui va faire un appel à votre API pour vérifier si l’utilisateur est connecté. Si oui, super, la page est rendue sur le navigateur de l’utilisateur, si non, l’utilisateur est redirigé vers la page /signin pour se connecter.
Le code complet est disponible sur github : https://github.com/theboringcode/authenticate-nextjs-apollo-client.
Dans le dossier lib, créer un nouveau fichier /lib/withAuth.tsx.
Notre fonction withAuth prend la page Next.js en paramètre et change sa méthode d’initialisation des Props (getInitialProps). Dans celle-ci, on va vérifier si l’utilisateur est authentifié en faisant la requête à notre API (en appelant la fonction isSignedIn). Si l’utilisateur ne l’est pas, nous le redirigeons vers une autre page (ici /signin), sinon, nous retournons à la page d’origine.
On va également avoir besoin d’une nouvelle fonction isSignedIn et redirect.
/lib/isSignedIn.tsx
C’est avec cette fonction que l’on vérifie si un utilisateur est connecté ou non. Dans chaque requête envoyée à l’API nous passons le Token d’authentification. Si l’API authentifie l’utilisateur, ses informations seront renvoyées et il aura finalement accès, sinon, l’objet sera une entité vide et l’utilisateur sera redirigé grâce à la fonction suivante.
/lib/redirect.tsx
Next.js étant rendu côté serveur, nous n’avons pas forcément accès au routeur ou même à la Window pour changer l’url ou rediriger l’utilisateur. On vérifie tout d’abord, si nous sommes sur le serveur avec Context.res. Si l’objet Response existe, nous sommes côté serveur et nous renvoyons une redirection 303 vers la nouvelle URL et finissons la réponse.
Si par contre l’objet est vide, nous sommes côté client et nous pouvons utiliser le Router de Next.js, pour rediriger l’utilisateur grâce à la fonction Replace.
Si vous souhaitez protéger une page, il vous suffit d’englober celle-ci par notre fonction withAuth comme ci-dessous, et seuls les utilisateurs connectés auront accès.
Vous savez maintenant comment récupérer des données de votre API GraphQL avec apollo-client et protéger vos pages des utilisateurs authentifiés.
Dans un prochain article, nous étudierons les différents outils, qui vous permettrons d’obtenir, l’Auto-completion de vos Queries et Mutations avec TypeScript, afin d’améliorer votre productivité et votre expérience de développeur !
.svg)
