Next.js est un framework React qui a gagné en popularité ces dernières années en raison de son approche pratique de la gestion des itinéraires, de la prise en charge du référencement, des mécanismes de mise en cache des requêtes et des différentes stratégies de rendu qu'il propose. En un mot, en prenant en charge l'utilisation d'un serveur, il permet de récupérer des données sur le serveur au lieu de les récupérer sur le client (le navigateur par exemple). Cela permet de réduire les temps de réponse, car une fois que l'utilisateur peut voir l'interface, les données sont déjà disponibles, au lieu de devoir attendre que les informations soient récupérées une fois l'interface visible. C'est ce qu'on appelle le rendu côté serveur, ou en abrégé, SSR.
De son côté, Laravel Sanctum fournit un moyen simple d'authentifier les applications qui consomment une API développée dans Laravel. Il existe deux méthodes d'authentification : à l'aide de la sessioncookiesou APIjetons. La première approche est peut-être moins connue. Il est basé sur le stockage de cookies dans le navigateur qui sont envoyés à chaque demande et vérifiés par l'API, il ne fonctionne donc que pour les applications Web où il existe un navigateur. Le second est bien connu. Un jeton est attribué à l'utilisateur et tant que ce jeton est inclus dans les en-têtes de la requête, l'utilisateur sera authentifié.
Dans cet article, nous explorerons l'authentification à l'aide de cookies, car c'est là que des problèmes surviennent lorsque l'on tente d'effectuer des requêtes depuis le serveur plutôt que depuis le client. De plus, il faut profiter de cette méthode car elle protège contre les attaques CSRF, ce qui est impossible avec les tokens API.
Cet article parle des points clés, quelques détails sont présentés, mais c'est purement conceptuel. À la fin, il y a un lien vers un dépôt GitHub avec l'implémentation détaillée
Lorsque des requêtes client-serveur sont effectuées, les cookies du navigateur sont automatiquement envoyés. De plus, si la réponse contient des cookies, ils sont simplement stockés dans le navigateur sans aucune intervention. Cependant, lors d'une requête serveur-serveur, les cookies n'existent pas en tant que tels, car les cookies sont un concept du navigateur, le serveur n'en sait rien. Ainsi, si vous souhaitez faire une requête au serveur qui inclut des cookies, vous devez les demander au navigateur et les envoyer explicitement dans leBiscuiten-tête. Nous verrons comment procéder dans la section Next.js.
Il est possible d'installer Sanctum et d'ajouter toutes les configurations nécessaires, cependant cela prend du temps et pour cette raison, Laravel nous propose Breeze. Breeze crée le squelette complet nécessaire à la mise en œuvre de l'authentification. Il comprend des itinéraires pour se connecter et se déconnecter, s'inscrire, vérifier son courrier électronique et réinitialiser son mot de passe.
Il ajoute également la configuration nécessaire pour CORS et Sanctum afin que nous puissions nous concentrer sur le début du développement de notre application. Après avoir suivi les étapes d'installation du lien précédent, il y aura une partie où il nous demandera le type d'application avec laquelle nous voulons utiliser Breeze. Nous sélectionnerons leAPIoption afin qu'elle ne nous donne que ce dont nous avons besoin pour nous connecter à partir de Next.js.
Nous devons créer unRessourceUtilisateurpour renvoyer les informa...
[Courte citation de 8% de l'article original]