web-dev-qa-db-fra.com

Comment implémenter l'authentification dans Next.js

Je suis nouveau sur Next.js et je lutte avec le système d'authentification à l'aide du jeton jwt. Je veux savoir quelle est la meilleure façon/standard de stocker le jeton jwt et le routage avec le système d'authentification. J'ai essayé différentes approches, à partir de différents tutoriels/articles, mais je ne le comprends pas très bien. Voici ce que j'ai essayé.

  1. Lorsque l'utilisateur se connecte, il envoie le nom d'utilisateur/mot de passe à un serveur api séparé (ex. Nouveau projet qui gère les trucs d'arrière-plan), le serveur répondra avec le access-token, puis dans le projet Next.js, j'ai défini le cookie avec ce jeton reçu. Dans le projet Next.js, les routes protégées seront enveloppées avec un withAuth hoc, qui vérifiera le jeton dans le cookie. Le problème avec cette approche est qu'elle est vulnérable à XSS, car le cookie n'a pas d'indicateur httpOnly.

  2. Ceci est similaire à 1.) mais en utilisant localStorage, le problème est access-token n'a pas pu être envoyé au serveur à la première demande. (Celui-ci, je ne suis pas sûr, mais à ma connaissance, dans chaque demande http, je dois coller mon access-token manuellement, qu'en est-il des demandes que je n'ai aucun contrôle? ex. première demande ou en utilisant <a> tag).

  3. J'ai écrit le backend d'authentification à l'intérieur du serveur Next.js (serveur express personnalisé). Lorsque l'utilisateur se connecte, le serveur le valide puis définit un cookie httpOnly. Ensuite, le problème est qu'avec le routage côté client (accédez à l'URL à l'aide du routeur Next.js), il n'a pas pu vérifier le jeton. Par exemple, si une page est enveloppée avec withAuth hoc, mais qu'elle ne peut pas accéder au jeton à l'intérieur des cookies avec javascript.

Et j'ai vu beaucoup de gens, dans getInitialProps de la route protégée, ils ne vérifient que le jeton d'existence dans cookie/localStorage, alors que se passe-t-il si le jeton est révoqué ou mis sur liste noire, comment le traitent-ils parce qu'ils n'a pas envoyé le jeton au serveur? Ou dois-je envoyer le jeton au serveur à chaque changement de page côté client?

jwtnext.jsserver-side-rendering
16
Kongpon Charanwattanakit

Avec l'introduction de Next.JS v8, il y avait aussi des exemples placés dans la page d'exemples NextJS . L'idée de base à suivre est:

[~ # ~] jwt [~ # ~]

  • Utilisation de cookies pour stocker le jeton (vous pouvez choisir de le chiffrer davantage ou non)
  • Envoi des cookies en tant qu'en-têtes d'autorisation

OAuth

  • Utilisation d'un service d'authentification tiers tel que OAuth2.0
  • Utiliser Passport
2
cr05s19xx