Introduction to jwt-decode

The jwt-decode library is essential for working with JSON Web Tokens (JWTs) in JavaScript. This library provides a simple way to decode JWTs without verifying their signature, which is particularly useful for extracting payload data such as user information within the client-side applications.

APIs and Examples

Basic Usage

Decode a token with the decode method:

  
    import jwt_decode from 'jwt-decode';

    const token = "your_jwt_token_here";
    const decoded = jwt_decode(token);

    console.log(decoded);
  

Extracting Specific Claim from JWT

To extract specific claim data, you can access it directly from the decoded object:

  
    const userId = decoded.user_id;
    console.log('User ID:', userId);
  

Decoding Token with Invalid Signature

If you want to decode a token without validating its signature, you can still extract its contents:

  
    const invalidToken = "your_invalid_jwt_token_here";
    const decodedInvalidToken = jwt_decode(invalidToken);

    console.log(decodedInvalidToken);
  

Complete Application Example

Here is a complete example that demonstrates how to use the jwt-decode library in a simple application:

  
    import React, { useState } from 'react';
    import jwt_decode from 'jwt-decode';

    const App = () => {
      const [token, setToken] = useState('');
      const [decoded, setDecoded] = useState(null);

      const handleTokenChange = (event) => {
        setToken(event.target.value);
      };

      const decodeToken = () => {
        try {
          const decodedToken = jwt_decode(token);
          setDecoded(decodedToken);
        } catch (error) {
          console.error('Invalid token', error);
        }
      };

      return (
        

          
JWT Decoder
          
          Decode
          {decoded && (
            

              
Decoded Token
              
{JSON.stringify(decoded, null, 2)}

          )}
        
      );

    };
    export default App;

  
This example shows how to build a simple React application that decodes JWTs using the jwt-decode library. Users can input a JWT, and the application will display its decoded contents in a friendly format.
Hash: 2aa78f58e5c04634076af125655218fcd9c1a51e6fcb9eb05e4d8855cdbf35a3