Decode Jwt token React

Question

I use jsonwebtoken to decode my Token to see if it has expired or not. But, the console.log return null.

 var token = response.headers.authorization;
 token = token.replace('Bearer','');
 var jwt = require('jsonwebtoken');
 var decoded = jwt.decode(token);
 console.log(decoded);

I'm don't understand because my token is not null

Print my token value : eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJkeWxhbi5uYXRpZXJAYmx1ZXNvZnQtZ3JvdXAuY29tIiwiZXhwIjoxNTQ1MjMyMTUxfQ.4t7fCh3Ux8qJo8xVC3HvsQKx3q0ulfOQclJmGf4vcAu77xoFwboPAjHil1ASfZRr_S7PviM354PdLgioPeiL4g — dna, Dec 18 '18 at 15:09
Thee package `jsonwebtoken` is intended for use on the backend. For the frontend, you should use `jwt-dcode` which is developed by the same company (auth0) but is much more smaller and intended for frontend use. — Tamer Shlash, Jan 13 '20 at 07:41

score 56 · Accepted Answer · edited Dec 19 '21 at 19:18

56

It seems like you are using JWT. To decode this type of token you can simply use jwt-decode library. For example, in ReactJS:

import jwt from 'jwt-decode' // import dependency
...
// some logic
axios.post(`${axios.defaults.baseURL}/auth`, { email, password })
    .then(res => {
      const token = res.data.token;
      const user = jwt(token); // decode your token here
      localStorage.setItem('token', token);
      dispatch(actions.authSuccess(token, user));
    })
    .catch(err => {
      dispatch(actions.loginUserFail());
  });

edited Dec 19 '21 at 19:18

Asela Priyadarshana

740
5
20

answered Aug 05 '19 at 09:51

Serhii Onishchenko

921
8
18

What are the pros and cons of doing this compared to decoding it on the server, basically sending the token from the client to the server and then it returning the info? What's better arquitecturally speaking? – Daniel Tkach Jan 19 '22 at 14:13
**IMPORTANT:** This library doesn't validate the token, any well formed JWT can be decoded. (source: official repo) – winklerrr Feb 20 '22 at 09:59
My problem is the same as this one, but I want to access the data I keep in the token, such as user role, name and surname. How can I do these? – NewPartizal Aug 26 '22 at 12:22

score 7 · Answer 2 · answered Dec 18 '18 at 15:15

Assuming your header is something like Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c then after line 2 you have a leading space. See the below example for the difference the leading space makes. Trimming the leading space should resolve your issue.

var jwt = require("jsonwebtoken");

var token1 = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
var token2 = " eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";

var decode1 = jwt.decode(token1);
var decode2 = jwt.decode(token2);

console.log("without leading space");
console.log(decode1);
// { sub: '1234567890', name: 'John Doe', iat: 1516239022 }

console.log("with leading space");
console.log(decode2);
// null

score 4 · Answer 3 · answered Dec 18 '21 at 12:08

4

Try jwt-decode in Library react

Install jwt-decode Library

npm i jwt-decode

Sample Code

import jwt_decode from "jwt-decode";

const token = "eyJ0eXAiO.../// jwt token";
const decoded = jwt_decode(token);
console.log(decoded);

answered Dec 18 '21 at 12:08

Asela Priyadarshana

740
5
20

score 2 · Answer 4 · answered Dec 18 '18 at 15:20

2

It may be as simple as removing the extra space that your pasted sample would leave. The authorization header is <scheme><space><value> so:

`var token = token.replace('Bearer ','');`

answered Dec 18 '18 at 15:20

bknights

14,408
2
18
31

Decode Jwt token React

4 Answers4

Linked