41

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

3
  • 1
    What prints console.log(token) after line 2? Commented Dec 18, 2018 at 15:07
  • Print my token value : eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJkeWxhbi5uYXRpZXJAYmx1ZXNvZnQtZ3JvdXAuY29tIiwiZXhwIjoxNTQ1MjMyMTUxfQ.4t7fCh3Ux8qJo8xVC3HvsQKx3q0ulfOQclJmGf4vcAu77xoFwboPAjHil1ASfZRr_S7PviM354PdLgioPeiL4g Commented Dec 18, 2018 at 15:09
  • 1
    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. Commented Jan 13, 2020 at 7:41

4 Answers 4

78

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());
  });
Sign up to request clarification or add additional context in comments.

3 Comments

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?
IMPORTANT: This library doesn't validate the token, any well formed JWT can be decoded. (source: official repo)
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?
7

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

Comments

5

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

Comments

1

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.