How to decode jwt token in javascript without using a library

Question

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

User · Answer

all features of jwt io doesn t support all languages  In NodeJs you can use   var decoded   jwt decode token

User · Answer

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 lt T extends object      k  string   string   number   gt     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

User · Answer

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

User · Answer

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  lt  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

User · Answer

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

User · Answer

Peheje will work  but you will have problem with unicode  To fix it I use the code on https   stackoverflow com a 30106551 5277071    x000D   x000D  let b64DecodeUnicode   str   gt  x000D    decodeURIComponent  x000D      Array prototype map call atob str   c   gt  x000D                00    c charCodeAt 0  toString 16   slice -2  x000D        join      x000D   x000D  let parseJwt   token   gt  x000D    JSON parse  x000D      b64DecodeUnicode  x000D        token split      1  replace  -        replace           x000D        x000D      x000D   x000D   x000D  let form   document getElementById  form   x000D  form addEventListener  submit    e    gt    x000D     form out value   JSON stringify  x000D        parseJwt form jwt value  x000D       x000D     e preventDefault    x000D     x000D  textarea width 300px  height 60px  display block  x000D   lt form id  form  action  parse  gt  x000D     lt textarea name  jwt  gt eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkrDtGhuIETDs8OoIiwiYWRtaW4iOnRydWV9 469tBeJmYLERjlKi9u6gylb-2NsjHLC 6kZNdtoOGsA lt  textarea gt  x000D     lt textarea name  out  gt  lt  textarea gt  x000D     lt input type  submit  value  parse    gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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   gt    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

User · Answer

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

User · Answer

function parseJwt token      var base64Payload   token split      1     var payload   Buffer from base64Payload   base64      return JSON parse payload toString        let payload  parseJwt  quot eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV adQssw5c quot    console log  quot payload -  quot   payload    If using node  you might have to use buffer package  npm install buffer var Buffer   require  buffer    Buffer

User · Answer

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  -

User · Answer

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

User · Answer

Simple function with try - catch  const parseJwt    token    gt      try       return JSON parse atob token split      1         catch  e        return null           Thanks

User · Answer

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

User · Answer

Here is a more feature-rich solution I just made after studying this question   const parseJwt    token    gt        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     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

User · Answer

you can use pure javascript atob   function to decode token into a string   atob token split      1      or parse directly it into a json object   JSON parse atob token split      1       read about atob   and btoa   built-in javascript functions Base64 encoding and decoding - Web APIs   MDN

User · Answer

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

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

Examples related to javascript

Examples related to jwt