Is that safe use jwt decode to decode token in react js?

Viewed 2563

May be this will be silly question but I/m curious about that. I'm new to React-js and node-js backend. I'm save jwt token in web browser local storage and decode that token in react js frontend. my question is that safe use jwt decode method in front-end because someone can also decode token if they know token?

3 Answers

Yes, it is.

The idea behind JWTs isn't that they can't be decoded, in fact it's the exact opposite. They're designed for use in distributed systems. Instead they are secure, because they can only be generated using a secret key, which should only be available on the server-side of your application.

A JWT actually comprises three parts - headers, payload, and signature - with the headers, payload, and secret key being combined and hashed to form the signature.

This signature is then used to validate that the headers and payload haven't been modified. If they have, the signature would no longer match.

JWT codes have 3 separate part that separated with . Public part which contains

HEADER:ALGORITHM & TOKEN TYPE

PAYLOAD:DATA

and a VERIFY SIGNATURE which guarantee your token is valid or not.

The public part can be extracted by everyone who have the token

JWT decode only look for public part so it is totally safe to do that in your front-end code.

An example:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

>> after decode
HEADER:ALGORITHM & TOKEN TYPE
{
  "alg": "HS256",
  "typ": "JWT"
}
PAYLOAD:DATA

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

The answer is yes and no, in case you have some user identifying information (like userId) and u are okay with that data going out, then yes u can decode it in the front end. If you are gonna store some sensitive information on the token then no. (This is a bad practice). Also note that the payload cant be modified. Even if modified the signature wont verify the token. So the best practice will be not to have sensitive data in the payload.

Related