web-dev-qa-db-fra.com

Comment puis-je stocker JWT et les envoyer à chaque demande en utilisant react

Je suis tellement content de le savoir parce que j'ai mon système d'enregistrement/d'authentification de base en cours.

donc en gros j'ai eu ceci:

app.post('/login', function(req,res) {
 Users.findOne({
email: req.body.email
}, function(err, user) {
if(err) throw err;

if(!user) {
  res.send({success: false, message: 'Authentication Failed, User not found.'});
} else {
  //Check passwords
  checkingPassword(req.body.password, user.password, function(err, isMatch) {
    if(isMatch && !err) {
      //Create token
      var token = jwt.sign(user,db.secret, {
        expiresIn: 1008000
      });
      res.json({success: true, jwtToken: "JWT "+token});
    } else {
      res.json({success: false, message: 'Authentication failed, wrong password buddy'});

       }
     });
    }
 });
});

Ensuite, je sécurise mes routes/admin et avec POSTMAN chaque fois que j'envoie une demande get avec le jwt dans l'en-tête, tout fonctionne parfaitement.

Maintenant, voici la partie délicate, essentiellement lorsque je vais me connecter si cela réussit, puis redirige-moi vers la page d'administration, et chaque fois que j'essaie d'accéder aux routes admin/*, je veux envoyer au serveur mon jwToken mais le problème est , comment puis-je y parvenir? Je n'utilise pas redux/flux, j'utilise simplement react/react-router.

Je ne sais pas comment fonctionne le mécanicien.

Merci les gars

expressreactjspassport.jsreact-routerjwt
15
MaieonBrix

1- Le composant de connexion envoie une demande de connexion au point de terminaison du serveur API

2- Le point de terminaison de l'API serveur renvoie un jeton

3- Je sauvegarde le token dans le localStorage de l'utilisateur

4- Tous les appels API auront désormais dans l'en-tête

Exemple: https://github.com/joshgeller/react-redux-jwt-auth-example

8
Tien Nguyen

Ne stockez pas le jeton dans localStorage, le jeton peut être compromis à l'aide d'une attaque xss. Je pense que la meilleure solution sera de fournir à la fois un jeton d'accès et un jeton d'actualisation au client lors de la connexion. enregistrez le jeton d'accès en mémoire (par exemple, état redux) et le jeton d'actualisation doit être créé sur le serveur avec l'indicateur httpOnly (et également l'indicateur sécurisé si possible). Le jeton d'accès doit être défini pour expirer toutes les 2-3 minutes. Afin de s'assurer que l'utilisateur n'aura pas à entrer ses informations d'identification toutes les 2-3 minutes, j'ai un intervalle qui appelle le /refreshToken point de terminaison avant l'expiration du jeton en cours (jeton d'actualisation silencieux).

de cette façon, le jeton d'accès ne peut pas être compromis à l'aide de xss/csrf. mais en utilisant une attaque xss, l'attaquant peut appeler en votre nom le /refreshToken endpoint, mais cela ne sera pas dangereux car le jeton retourné ne peut pas être compromis.

1
itay312