Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I store JWT and send them with every request using react

So happy right know because I got my basic registration/authentication system going on.

so basically I got this :

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'});         }      });     }  }); }); 

Then I secure my /admin routes and with POSTMAN whenever I send a get request with the jwt in the header everything works perfectly.

Now here is the tricky part, basically When i'm going to login if this a sucess then redirect me to the admin page, and everytime I try to access admin/* routes I want to send to the server my jwToken but the problem is, how do I achieve that ? I'm not using redux/flux, just using react/react-router.

I don't know how the mechanic works.

Thanks guys

like image 774
MaieonBrix Avatar asked Aug 27 '16 00:08

MaieonBrix


People also ask

How do you store a token in session storage in react JS?

Go to localhost:3000 or whatever port you are running it on, and go to a non-member register here and let's register for another account. Make sure it has an e-mail that you haven't used yet. It can be whatever, and hit create account. We get back the token and user object restoring the users.

How do I send a JWT token in every request?

When working with JWT (JSON Web Token) on the client side, you need to send with every request the token to your server. The most common way is to send the token via the Authorization header with the Bearer authentication scheme.

Is it safe to store JWT in localStorage react?

If you store it inside localStorage, it's accessible by any script inside your page. This is as bad as it sounds; an XSS attack could give an external attacker access to the token. To reiterate, whatever you do, don't store a JWT in local storage (or session storage).

Can I store JWT in session storage?

A JWT needs to be stored in a safe place inside the user's browser. Any way,you shouldn't store a JWT in local storage (or session storage). If you store it in a LocalStorage/SessionStorage then it can be easily grabbed by an XSS attack.


1 Answers

Do not store the token in localStorage, the token can be compromised using xss attack. I think the best solution will be to provide both access token and refresh token to the client on login action. save the access token in memory (e.g redux state) and the refresh token should be created on the server with httpOnly flag (and also secure flag if possible). The access token should be set to expire every 2-3 minutes. In order to make sure that the user will not have to enter his credentials every 2-3 minutes I have an interval which calls the /refreshToken endpoint before the current token expires (silent refresh token).

that way, the access token cannot be compromised using xss/csrf. but using an xss attack, the attacker can make a call on your behalf to the /refreshToken endpoint, but this will not be harmful because the returned token cannot be compromised.

like image 191
itay312 Avatar answered Oct 02 '22 21:10

itay312