How to decode jwt token in javascript without using a library?

How can I decode the payload of JWT using JavaScript? Without a library. So the token just returns a payload object that can consumed by my front-end app.

Example token: xxxxxxxxx.XXXXXXXX.xxxxxxxx

And the result is the payload:

{exp: 10012016 name: john doe, scope:['admin']}

22 thoughts on “How to decode jwt token in javascript without using a library?”

  1. I found this code at jwt.io and it works well.

    //this is used to parse base64
    function url_base64_decode(str) {
      var output = str.replace(/-/g, '+').replace(/_/g, '/');
      switch (output.length % 4) {
        case 0:
          break;
        case 2:
          output += '==';
          break;
        case 3:
          output += '=';
          break;
        default:
          throw 'Illegal base64url string!';
      }
      var result = window.atob(output); //polifyll https://github.com/davidchambers/Base64.js
      try{
        return decodeURIComponent(escape(result));
      } catch (err) {
        return result;
      }
    }
    

    In some cases(certain development platforms),
    the best answer(for now) faces a problem of invalid base64 length.
    So, I needed a more stable way.

    I hope it would help you.

    Reply
  2. @Peheje will work, but you will have problem with unicode.
    To fix it I use the code on https://stackoverflow.com/a/30106551/5277071;

    let b64DecodeUnicode = str =>
      decodeURIComponent(
        Array.prototype.map.call(atob(str), c =>
          '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
        ).join(''))
    
    let parseJwt = token =>
      JSON.parse(
        b64DecodeUnicode(
          token.split('.')[1].replace('-', '+').replace('_', '/')
        )
      )
    
    
    let form = document.getElementById("form")
    form.addEventListener("submit", (e) => {
       form.out.value = JSON.stringify(
          parseJwt(form.jwt.value)
       )
       e.preventDefault();
    })
    textarea{width:300px; height:60px; display:block}
    <form id="form" action="parse">
      <textarea name="jwt">eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkrDtGhuIETDs8OoIiwiYWRtaW4iOnRydWV9.469tBeJmYLERjlKi9u6gylb-2NsjHLC_6kZNdtoOGsA</textarea>
      <textarea name="out"></textarea>
      <input type="submit" value="parse" />
    </form>
    Reply
  3. You can use jwt-decode, so then you could write:

    import jwt_decode from 'jwt-decode';
    
    var token = 'eyJ0eXAiO.../// jwt token';
    
    var decoded = jwt_decode(token);
    console.log(decoded);
    /*{exp: 10012016 name: john doe, scope:['admin']}*/
    
    Reply
  4. Simple function with try – catch

    const parseJwt = (token) => {
      try {
        return JSON.parse(atob(token.split('.')[1]));
      } catch (e) {
        return null;
      }
    };
    

    Thanks!

    Reply
  5. Simple NodeJS Solution for Decoding a JSON Web Token (JWT)

    function decodeTokenComponent(value) {
        const buff = new Buffer(value, 'base64')
        const text = buff.toString('ascii')
        return JSON.parse(text)
    }
    
    const token = 'xxxxxxxxx.XXXXXXXX.xxxxxxxx'
    const [headerEncoded, payloadEncoded, signature] = token.split('.')
    const [header, payload] = [headerEncoded, payloadEncoded].map(decodeTokenComponent)
    
    console.log(`header: ${header}`)
    console.log(`payload: ${payload}`)
    console.log(`signature: ${signature}`)
    
    Reply
  6. Based on answers here and here:

    const dashRE = /-/g;
    const lodashRE = /_/g;
    
    module.exports = function jwtDecode(tokenStr) {
      const base64Url = tokenStr.split('.')[1];
      if (base64Url === undefined) return null;
      const base64 = base64Url.replace(dashRE, '+').replace(lodashRE, '/');
      const jsonStr = Buffer.from(base64, 'base64').toString();
      return JSON.parse(jsonStr);
    };
    
    Reply
  7. As “window” object is not present in nodejs environment,
    we could use the following lines of code :

    let base64Url = token.split('.')[1]; // token you get
    let base64 = base64Url.replace('-', '+').replace('_', '/');
    let decodedData = JSON.parse(Buffer.from(base64, 'base64').toString('binary'));
    

    It’s working for me perfectly. Hope it helps.

    Reply
  8. Working unicode text JWT parser function:

    function parseJwt (token) {
        var base64Url = token.split('.')[1];
        var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
        var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));
    
        return JSON.parse(jsonPayload);
    };
    
    Reply
  9. I use this function to get payload , header , exp(Expiration Time), iat (Issued At) based on this answer

    function parseJwt(token) {
      try {
        // Get Token Header
        const base64HeaderUrl = token.split('.')[0];
        const base64Header = base64HeaderUrl.replace('-', '+').replace('_', '/');
        const headerData = JSON.parse(window.atob(base64Header));
    
        // Get Token payload and date's
        const base64Url = token.split('.')[1];
        const base64 = base64Url.replace('-', '+').replace('_', '/');
        const dataJWT = JSON.parse(window.atob(base64));
        dataJWT.header = headerData;
    
    // TODO: add expiration at check ...
    
    
        return dataJWT;
      } catch (err) {
        return false;
      }
    }
    
    const jwtDecoded = parseJwt('YOUR_TOKEN') ;
    if(jwtDecoded)
    {
        console.log(jwtDecoded)
    }
    
    Reply
  10. Answer based from GitHub – auth0/jwt-decode. Altered the input/output to include string splitting and return object { header, payload, signature } so you can just pass the whole token.

    var jwtDecode = function (jwt) {
    
            function b64DecodeUnicode(str) {
                return decodeURIComponent(atob(str).replace(/(.)/g, function (m, p) {
                    var code = p.charCodeAt(0).toString(16).toUpperCase();
                    if (code.length < 2) {
                        code = '0' + code;
                    }
                    return '%' + code;
                }));
            }
    
            function decode(str) {
                var output = str.replace(/-/g, "+").replace(/_/g, "/");
                switch (output.length % 4) {
                    case 0:
                        break;
                    case 2:
                        output += "==";
                        break;
                    case 3:
                        output += "=";
                        break;
                    default:
                        throw "Illegal base64url string!";
                }
    
                try {
                    return b64DecodeUnicode(output);
                } catch (err) {
                    return atob(output);
                }
            }
    
            var jwtArray = jwt.split('.');
    
            return {
                header: decode(jwtArray[0]),
                payload: decode(jwtArray[1]),
                signature: decode(jwtArray[2])
            };
    
        };
    
    Reply
  11. If you’re using Typescript or vanilla JavaScript, here’s a zero-dependency, ready to copy-paste in your project simple function (building on @Rajan Maharjan ‘s answer).

    This answer is particularly good, not only because it does not depend on any npm module, but also because it does not depend an any node.js built-in module (like Buffer) that some other solutions here are using and of course would fail in the browser (unless polyfilled, but there’s no reason to do that in the first place). Additionally JSON.parse can fail at runtime and this version (especially in Typescript) will force handling of that. The JSDoc annotations will make future maintainers of your code thankful. 🙂

    /**
     * Returns a JS object representation of a Javascript Web Token from it's common encoded
     * string form.
     *
     * @export
     * @template T the expected shape of the parsed token
     * @param {string} token a Javascript Web Token in base64 encoded, `.` separated form
     * @returns {(T | undefined)} an object-representation of the token
     * or undefined if parsing failed
     */
    export function getParsedJwt<T extends object = { [k: string]: string | number }>(
      token: string,
    ): T | undefined {
      try {
        return JSON.parse(atob(token.split('.')[1]))
      } catch {
        return undefined
      }
    }
    

    For completion, here’s the vanilla javascript version too:

    /**
     * Returns a JS object representation of a Javascript Web Token from it's common encoded
     * string form.
     *
     * @export
     * @template T the expected shape of the parsed token
     * @param {string} token a Javascript Web Token in base64 encoded, `.` separated form
     * @returns {(object | undefined)} an object-representation of the token
     * or undefined if parsing failed
     */
    export function getParsedJwt(token) {
      try {
        return JSON.parse(atob(token.split('.')[1]))
      } catch (e) {
        return undefined
      }
    }
    
    Reply
  12. If you use Node.JS,
    You can use the native Buffer module by doing :

    const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImp0aSI6ImU3YjQ0Mjc4LTZlZDYtNDJlZC05MTZmLWFjZDQzNzhkM2U0YSIsImlhdCI6MTU5NTg3NzUxOCwiZXhwIjoxNTk1ODgxMTE4fQ.WXyDlDMMSJAjOFF9oAU9JrRHg2wio-WolWAkAaY3kg4';
    const base64Url = token.split('.')[1];
    const decoded = Buffer.from(base64Url, 'base64').toString();
    console.log(decoded)
    

    And you’re good to go 🙂

    Reply
  13. Here is a more feature-rich solution I just made after studying this question:

    const parseJwt = (token) => {
        try {
            if (!token) {
                throw new Error('parseJwt# Token is required.');
            }
    
            const base64Payload = token.split('.')[1];
            let payload = new Uint8Array();
    
            try {
                payload = Buffer.from(base64Payload, 'base64');
            } catch (err) {
                throw new Error(`parseJwt# Malformed token: ${err}`);
            }
    
            return {
                decodedToken: JSON.parse(payload),
            };
        } catch (err) {
            console.log(`Bonus logging: ${err}`);
    
            return {
                error: 'Unable to decode token.',
            };
        }
    };
    

    Here’s some usage samples:

    const unhappy_path1 = parseJwt('sk4u7vgbis4ewku7gvtybrose4ui7gvtmalformedtoken');
    console.log('unhappy_path1', unhappy_path1);
    
    const unhappy_path2 = parseJwt('sk4u7vgbis4ewku7gvtybrose4ui7gvt.malformedtoken');
    console.log('unhappy_path2', unhappy_path2);
    
    const unhappy_path3 = parseJwt();
    console.log('unhappy_path3', unhappy_path3);
    
    const { error, decodedToken } = parseJwt('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c');
    if (!decodedToken.exp) {
        console.log('almost_happy_path: token has illegal claims (missing expires_at timestamp)', decodedToken);
        // note: exp, iat, iss, jti, nbf, prv, sub
    }
    

    I wasn’t able to make that runnable in StackOverflow code snippet tool, but here’s approximately what you would see if you ran that code:

    enter image description here

    I made the parseJwt function always return an object (to some degree for static-typing reasons).

    This allows you to utilize syntax such as:

    const { decodedToken, error } = parseJwt(token);
    

    Then you can test at run-time for specific types of errors and avoid any naming collision.

    If anyone can think of any low effort, high value changes to this code, feel free to edit my answer for the benefit of next(person).

    Reply
  14. In Node.js (TypeScript):

    import { TextDecoder } from 'util';
    
    function decode(jwt: string) {
        const { 0: encodedHeader, 1: encodedPayload, 2: signature, length } = jwt.split('.');
    
        if (length !== 3) {
            throw new TypeError('Invalid JWT');
        }
    
        const decode = (input: string): JSON => { return JSON.parse(new TextDecoder().decode(new Uint8Array(Buffer.from(input, 'base64')))); };
    
        return { header: decode(encodedHeader), payload: decode(encodedPayload), signature: signature };
    }
    

    With jose by panva on GitHub, you could use the minimal import { decode as base64Decode } from 'jose/util/base64url' and replace new Uint8Array(Buffer.from(input, 'base64')) with base64Decode(input). Code should then work in both browser and Node.js.

    Reply
  15. function parseJwt(token) {
      var base64Payload = token.split('.')[1];
      var payload = Buffer.from(base64Payload, 'base64');
      return JSON.parse(payload.toString());
    }
    
    let payload= parseJwt("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c");
    console.log("payload:- ", payload);
    

    If using node, you might have to use buffer package:

    npm install buffer
    var Buffer = require('buffer/').Buffer
    
    Reply

Leave a Comment