COVID19 Lockdown Dev Log – Day 36, JSON Webtokens

What I Worked On

The Taskmanager app.

What I Learned

I’ve known what JSON Webtokens were, but I’ve never really known the greater detail of how it worked and how it was used. Today I got a little smarter. I will refer to JSON Webtokens as “jwt” going forward.

To keep it short and simple, and because I work in Nodejs, I will use the npm package jsonwebtoken. Let’s set up a function to play around with jwt:

const jwt = require('jsonwebtoken')

const jwtFunction = async () => {

}

jwtFunction()

Great. Let’s use the sign() method from the jsonwebtoken package. It takes two arguments: a payload object and a string “secret”. You can optionally add an options object and/or a callback.

Anyways, the payload is the object of data that is going to be embedded in your token. In our case let’s imagine it’s a user that is going to be authenticated and we will recognize the user by his/her id .

const jwt = require('jsonwebtoken')

const jwtFunction = async () => {
    const token = jwt.sign({ id: 'myId' }, )

}

jwtFunction()

Now let’s provide the secret to “sign” the token. This is to make sure the token has not been altered or tampered with:

const jwt = require('jsonwebtoken')

const jwtFunction = async () => {
    const token = jwt.sign({ id: 'myId' }, 'secretstring' )
    console.log(token)

}

jwtFunction()

I’ll simplify the explanation as best I can. The “secret” string is used to recognize the payload, which can be an object, buffer or string reperesentation of valid JSON. The payload’s “secret” string is parsed through an algorithm that generates a token that matches that specific payload. If a token is tampered with it becomes invalid because it won’t match the value of the payload. So if someone tried to alter the data in the payload, like changing the id in this case, they would not be succesfull because it wouldn’t match the token and they don’t know the “secret” string used to generate the token from the id.

Let’s look at the token we will get from the above code:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiJteUlkIiwiaWF0IjoxNTg5NDY5MTI5fQ.-VT6yp7hCoerigS8qTjsGkU4ZsazyoR2Ul8LrlC1Dqk

That’s our jwt! 😀 the jsonwebtoken package also provides a method to verify a token. It’s called verify() and takes a token and the “secret” string. Let’s see how that looks by adding it to our function:

const jwt = require('jsonwebtoken')

const jwtFunction = async () => {
    const token = jwt.sign({ id: 'myId' }, 'secretstring' )
    console.log(token)

    const myData = jwt.verify(token, 'secretstring')
    console.log(myData)

}

jwtFunction()

Let’s run the code again and see the output:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiJteUlkIiwiaWF0IjoxNTg5NDY5MTI5fQ.-VT6yp7hCoerigS8qTjsGkU4ZsazyoR2Ul8LrlC1Dqk

{ _id: 'myId', iat: 1589469129 }

Nice! 😀 So we have our jwt and if we verify it with verify() we get the correct payload value. The iat value is a timestamp in milliseconds from when the jwt was created. It stands for “issued at”. It’s possible to set the expiration date for a jwt in the options argument of sign(). For example setting the above jwt to expire in after one day could be done like this:

const token = jwt.sign({ _id: 'myId' }, 'secretstring', {expiresIn: '1 day'})

To finsih off I would just let you know that you can actually go to https://jwt.io/ and paste in the jwt to the website’s decoder. Just make sure to select the “hs384” algorithm 😀 This will return the same value that verify() returned here 😀

What Distracted Me During The Day

• Phonecalls from sales people
• Proofreading an assignment for my brother

Resources

• npm jsonwebtoken – https://www.npmjs.com/package/jsonwebtoken
• JSON Webtoken website – https://jwt.io/
• Andrew Mead – https://mead.io/