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']}
I found this code at jwt.io and it works well.
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.
@Peheje will work, but you will have problem with unicode.
To fix it I use the code on https://stackoverflow.com/a/30106551/5277071;
You can use jwt-decode, so then you could write:
Simple function with try – catch
Thanks!
Simple NodeJS Solution for Decoding a JSON Web Token (JWT)
Based on answers here and here:
As “window” object is not present in nodejs environment,
we could use the following lines of code :
It’s working for me perfectly. Hope it helps.
Working unicode text JWT parser function:
I use this function to get payload , header , exp(Expiration Time), iat (Issued At) based on this answer
you can use pure javascript
atob()
function to decode token into a string:or parse directly it into a json object:
read about
atob()
andbtoa()
built-in javascript functions Base64 encoding and decoding – Web APIs | MDN.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.
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. 🙂For completion, here’s the vanilla javascript version too:
If you use Node.JS,
You can use the native Buffer module by doing :
And you’re good to go 🙂
Here is a more feature-rich solution I just made after studying this question:
Here’s some usage samples:
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:
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)
.In Node.js (TypeScript):
With
jose
by panva on GitHub, you could use the minimalimport { decode as base64Decode } from 'jose/util/base64url'
and replacenew Uint8Array(Buffer.from(input, 'base64'))
withbase64Decode(input)
. Code should then work in both browser and Node.js.If using node, you might have to use buffer package:
all features of jwt.io doesn’t support all languages. In NodeJs you can use