Decode JWT on a browser

Without a npm package

Photo by dylan nolte on Unsplash

What is JWT and why we need it?

JWTs are a good way of securely transmitting information between parties because they can be signed, which means you can be certain that the senders are who they say they are. Additionally, the structure of a JWT allows you to verify that the content hasn’t been tampered with.

JWT relies on other JSON-based standards.

• JSON Web Signature (private secret or public/private key)
• JSON Web Encryption. (Base64)

JWT structure

Here is an example of JSON, which is very simple.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSm9obiBEb2UifQ.5Hm3bNazVbnK--vsGWMJ_tmZCviy7qL4T16XJLBtQq0

As you see, there are three part in JWT which are separated by dot(`.`)

Header:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

Base64-encoded with algorithm and token type info.

Payload:

eyJuYW1lIjoiSm9obiBEb2UifQ

Base64-encoded payload information, referred to as claims.

• iss: issuer (optional)