nextjs jwt authentication

Next.js JWT Authentification

Une application de preuve de concept pour démontrer l'authentification de l'application Next.js avec JWT.

L'application est faite en supposant que le serveur de rendu et le serveur API sont découplés.

Il utilise cette API pour l'authentification.

Idée:

Les applications rendues côté serveur sont géniales. Ils font un endroit idéal entre les applications monolithiques et les applications à page unique alimentées par des microservices. Mais ils ajoutent également de la complexité à leur création. Garder l'état sur le serveur et le client en synchronisation, le routage sur le client et le serveur, le chargement des données avant le rendu du serveur, etc. sont quelques-unes des choses qui rendent nos applications plus complexes. C'est pourquoi des cadres tels que Next.js existent, pour résoudre la plupart de ces problèmes. Cependant, des choses comme l'authentification nous sont laissées. Il s'agit d'une tentative d'implémentation de l'authentification basée sur JWT. Le fait est que nous ne pouvons pas stocker des jetons dans Localstorage comme nous le ferions avec Spa.

L'idée est de recevoir des jetons du serveur sur le client, de le stocker dans des cookies, puis chaque fois qu'une page se rend sur le serveur, nous pourrions accéder au jeton depuis le cookie.

Comment ça marche:

Le client:

L'utilisateur envoie une demande AUTH du client. Dans la réponse, JWT est reçu et stocké dans les cookies du navigateur et le magasin Redux. Ensuite, l'utilisateur a accès au jeton à partir du client et peut l'utiliser pour accéder aux itinéraires protégés.

Le serveur:

Lorsque l'utilisateur fait une demande de page, les cookies sont également envoyés, afin que le serveur puisse les lire. Pour le lire, l'utilisateur utilise la méthode du cycle de vie getInitialProps , fournie par next.js. Il obtient un argument - l'objet de contexte qui contient certaines propriétés. Vous pouvez en savoir plus ici. Sur la propriété req , nous pouvons accéder à la propriété headers qui contient le cookie avec le jeton. Un créateur d'action est envoyé pour enregistrer le jeton dans la boutique Redux, et l'application a maintenant à nouveau accès au jeton.

Usage:

Installation:

Assurez-vous que le nœud et le NPM sont installés.

Assurez-vous également que le serveur API fonctionne.

git clone https://github.com/alan2207/nextjs-jwt-authentication
cd nextjs-jwt-authentication
npm install

Démarrage de l'application:

 # Run in dev mode:
npm run dev

# Run in production:
npm run build
npm start