Jwt Decode - rvdegroen/notes GitHub Wiki

decode cookies

Table of contents

What is JWT Decode?

JWT Decode, also known as "JSON Web Tokens" is, according to their documentation, an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This means that the information that's encoded as some sort of "key", can be securely transmitted on the web. An example of when to use this could be when using authorization for your application or for information exchange.

Why did we use this?

We only used this to show the name after logging into the application, like on this screenshot below. I created a fake email, with a fake name, so that's why it's showing "neppe gmail" as my name. This means "fake gmail" in dutch.

Example implementation

This is an example implementation from a different project:


import Cookies from "js-cookie";
import jwt_decode from "jwt-decode";
function WelcomeText() {
  const personData = jwt_decode(Cookies.get("token"));
  return (
    <>
      <div className={styles.block}>
        <div className={styles.block__inner_1}></div>
        <div className={styles.block__inner_2}></div>
        <div className={styles.block__inner_3}></div>
        <div className={styles.block__inner_4}></div>
        <h2 className="text-white text-40 font-medium top-[50px] left-[37%] absolute">
          Hallo
        </h2>
        <h2 className="text-white text-40 font-medium top-[110px] left-[16%] absolute w-[77%] text-center">
          {personData.name}
        </h2>
        <h2 className="text-white text-16 text-end top-[182px] left-[1%] absolute w-[90%]">
          Jouw mailbox kan volzitten met onbelangrijke e-mails
        </h2>
        <h2 className="text-white text-16 text-start top-[256px] left-[10%] absolute w-[80%]">
          Deze e-mails van jou hebben wel een effect op het CO2 uitstoot van de
          Google dataserver
        </h2>
      </div>
    </>
  );
}
export default WelcomeText;

As you can see, we're using JWT in the variable personData which is then used for the name, like so: personData.name. So the cookie is decoded, which contains a name and is then used to show on the screen.

Sources

⚠️ **GitHub.com Fallback** ⚠️