0

I am new to JWT, not new to react, but am very confused on how to decode a JWT from the front end. I initially thought that I can store the JWT Secret in the .env file but many sources say that it is a very bad idea to do so. I have the backend setup to send me a JWT when you login. But without storing the secret key in the front end as well, how would I decode the information?

Backend:

if(bcrypt.compareSync(ctx.params.password, hashed_db_password)) {
                            ctx.status = 200;
                            const payload = { data: tuples[0] };
                            const options = { expiresIn: '1h', issuer: 'testIssuer'};
                            const secret = process.env.JWT_SECRET;
                            const token = jwt.sign(payload, secret, options);
                            ctx.body = token;
                            return resolve();
}

How I thought front end should have been:

let data = JWT.verify(result.data, process.env.REACT_APP_JWT_SECRET, options);

I have also read alot that the backend should do validation but then wouldnt that just be a huge security risk to validate, then send back unsecure raw user information? Any information would be greatly appreciated.

BTW, I am using Reactjs, Node.js, Express, and MySql

gad74
  • 85
  • 1
  • 11
  • 1
    there's no need to validate the token on frontend side. And you can still decode the token, the payload is only a base64url encoded json, you don't need the secret or key to decode. – jps Dec 19 '19 at 08:18
  • Thank you I just realized that after taking a break from the computer – gad74 Dec 19 '19 at 08:19

2 Answers2

1

You can store it in your main components state, Redux store, React Context, localstorage and so on..

You should get the JWT only when your authentication is successful and you should send it with each request to the server, you don't need to decode it on the front-end you just pass the encoded value to the server and decode it somewhere on the backend (some kind of middle-ware)

Smail Galijasevic
  • 607
  • 3
  • 15
  • If I don't need to decode it on the front end, how would I get the data it's holding? I think I'm accidentally using verify instead of decode... Oops – gad74 Dec 19 '19 at 08:17
  • @gad74 what's your use case for JWT? – Ilyas Assainov Dec 19 '19 at 08:21
  • It's for user authentication and such. Passwords, ID's, personal information, etc. I guess since all the data is already encrypted in each field, it's still pretty secure. Like the passwords and stuff are done using bcrypt – gad74 Dec 19 '19 at 08:24
  • 1
    @gad74: passwords don't belong into the token at all. For what would need a password in a token? Keep the payload as short as possible. – jps Dec 19 '19 at 08:51
  • 1
    @gad74 you don't.. you decode it in the backend when it is passed with some req. and check the info (userid? And some salt) – Smail Galijasevic Dec 20 '19 at 07:14
  • I stump upon this link while looking for a solution for my quest. There are two answers and they are totally contradict to each other. Wonder which one is the "correct" one ? – Hoang Minh Jul 18 '20 at 16:27
  • @HoangMinh They don't contradict each other at all, you should store the JWT (token) on the frontend the other answer is saying to not store the JWT SECRET on the frontend as that is an security issue – Smail Galijasevic Jul 27 '20 at 14:55
1

You should not store JWT secret in client side.

To decode token, you don't need the JWT secret.

You can decode the token using jwt-decode package.

Or if you want to decode without using a package, you can look at here.

SuleymanSah
  • 13,055
  • 5
  • 17
  • 42
  • I stump upon this link while looking for a solution for my quest. There are two answers and they are totally contradict to each other. Wonder which one is the "correct" one ? – Hoang Minh Jul 18 '20 at 16:27
  • 1
    @HoangMinh we shouldn't expose the jwt secret to the client, it is not secure at all. – SuleymanSah Jul 18 '20 at 16:34
  • @HoangMinh you may also find this question interesting https://stackoverflow.com/questions/27301557/if-you-can-decode-jwt-how-are-they-secure – SuleymanSah Jul 18 '20 at 18:34