CODEWITHSUNDEEP
reactjsjwt
dna
dna

Reputation: 626

Decode Jwt token React

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

Upvotes: 39

Views: 132138

Answers (4)

Serhii Onishchenko
Serhii Onishchenko

Reputation: 1131

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 { jwtDecode } from 'jwt-decode' // import dependency
// If using v3 or earlier, use this instead:
// import jwtDecode from 'jwt-decode' // import dependency

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

Upvotes: 75

Asela Priyadarshana
Asela Priyadarshana

Reputation: 814

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

Upvotes: 5

bknights
bknights

Reputation: 15367

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 ','');`

Upvotes: 1

Chris
Chris

Reputation: 171

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

Upvotes: 7

Related Questions