title: How to decode JWT token by using jwt-decode library in reactjs
body: <p>I'm new to react, i wanted to add JWT authentication to my SPA. my Objective is i'm getting token in localstorage of Application but unable to decode the token. I couldn't able to figure it out where i'm going wrong. Can anyone assist me to get decoded. Here is a sample token generated by my API -<code>m5iZiI6MTU4ODQwNjQ5MywiZXhwIjoxNTg4NTc5MjkzLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQ1MDkyLyIsImF1ZCI6Imh0dHA6Ly9sb2NhbGhvc3Q6NDUwOTIvIn0.MjmDKCoQoEOLKtoL_iUAAqE7hnE2xmUdnCB6JdaGX3w</code>. </p>
  
  <p>Here is AuthService code:</p>
  
  <pre><code>import decode from 'jwt-decode';
  export default class AuthService {
      constructor(domain) {
          this.domain = domain || '/api/Login/auth'
          this.fetch = this.fetch.bind(this) // React binding stuff
          this.login = this.login.bind(this)
          this.getProfile = this.getProfile.bind(this)
      }
  
      login = (email, password) =&gt; {
          return this.fetch(`${this.domain}`, {
              method: 'POST',
              body: JSON.stringify({
                  email,
                  password
              })
          }).then(res =&gt; {
              this.setToken(res.token)
              return Promise.resolve(res);
          })
      }
  
      loggedIn () {
          const token = this.getToken()
          return !!token &amp;&amp; !this.isTokenExpired(token)
      }
  
      isTokenExpired (token) {
          try {
              const decoded = decode(token);
              if (decoded.exp &lt; Date.now() / 1000) {
                  return true;
              }
              else
                  return false;
          }
          catch (err) {
              return false;
          }
      }
  
      setToken (idToken) {
          localStorage.setItem('id_token', idToken)
          console.log("token values", idToken)
      }
  
      getToken () {
          return localStorage.getItem('id_token')
      }
  
      logout () {
          localStorage.removeItem('id_token');
      }
  
      getProfile () {
          return decode(this.getToken());
      }
  
  
      fetch (url, options) {
          const headers = {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
          }
          if (this.loggedIn()) {
              headers['Authorization'] = 'Bearer ' + this.getToken()
          }
  
          return fetch(url, {
              headers,
              ...options
          })
              .then(this._checkStatus)
              .then(response =&gt; response.json())
      }
  
      _checkStatus (response) {
  
          if (response.status &gt;= 200 &amp;&amp; response.status &lt; 300) {
              return response
          } else {
              var error = new Error(response.statusText)
              error.response = response
              throw error
          }
      }
  }
  </code></pre>
  
  <p>Login.js Code:</p>
  
  <pre><code>import React from 'react';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import TextField from '@material-ui/core/TextField';
  import Button from '@material-ui/core/Button';
  import Typography from '@material-ui/core/Typography';
  import Container from '@material-ui/core/Container';
  import AuthService from '../../service/AuthService';
  
  class LoginComponent extends React.Component {
  
      constructor(props){
          super(props);
          this.state = {
              username: '',
              password: '',
              message: '',
          }
          this.login = this.login.bind(this);
  this.Auth = new AuthService();
      }
  
     componentWillMount () {
      if (this.Auth.loggedIn())
        this.props.history.replace('/');
    }
      login = (e) =&gt; {
          e.preventDefault();
         this.Auth.login(this.state.email, this.state.password).then(res =&gt; {
              if(res.status === 200){
                  localStorage.setItem("userInfo", JSON.stringify(res));
                  this.props.history.push('/');
              }else {
                  this.setState({message: res.data.message});
              }
          });
      };
  
      onChange = (e) =&gt;
          this.setState({ [e.target.name]: e.target.value });
  
      render() {
          return(
              &lt;React.Fragment&gt;
                  &lt;AppBar position="static"&gt;
                      &lt;Toolbar&gt;
                          &lt;Typography variant="h6"&gt;
                              React User Application
                          &lt;/Typography&gt;
                      &lt;/Toolbar&gt;
                  &lt;/AppBar&gt;
                  &lt;Container maxWidth="sm"&gt;
                      &lt;Typography variant="h4" style={styles.center}&gt;Login&lt;/Typography&gt;
                      &lt;form&gt;
                          &lt;Typography variant="h4" style={styles.notification}&gt;{this.state.message}&lt;/Typography&gt;
                          &lt;TextField type="text" label="USERNAME" fullWidth margin="normal" name="username" value={this.state.username} onChange={this.onChange}/&gt;
  
                          &lt;TextField type="password" label="PASSWORD" fullWidth margin="normal" name="password" value={this.state.password} onChange={this.onChange}/&gt;
  
                          &lt;Button variant="contained" color="secondary" onClick={this.login}&gt;Login&lt;/Button&gt;
                      &lt;/form&gt;
                  &lt;/Container&gt;
              &lt;/React.Fragment&gt;
          )
      }
  
  }
  
  const styles= {
      center :{
          display: 'flex',
          justifyContent: 'center'
  
      },
      notification: {
          display: 'flex',
          justifyContent: 'center',
          color: '#dc3545'
      }
  }
  
  export default LoginComponent;
  </code></pre>
  
  <p>Can anyone help me or suggest me any appropriate link ?</p>