How to add authentication to your web app using JWTs.
If you are learning Back-end development and you need to add authentication to your web application, this post is for you. Like and share with other developers you know. Let’s get started
First, what are JWTs and how do they work?
JWTs stand for JSON Web Tokens and are standard formats for sending cryptographically signed data between two systems, i.e between a client-side app and a server-side app. JWT helps us sign and verify user tokens. Signing can be understood as encoding the data into a token, while verifying can be understood as decoding a the token back into data.
Don’t forget to share this post with other developers who might have this same question. Let’s move on.
As explained JWTs are cryptographically signed data. Here is an example of how JWTs look like: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiRGF2aWQiLCJhZ2UiOjEzLCJlbWFpbCI6ImJsYWJsYUBrd29udG9sLmNvbSJ9.xT7s7kedC5xeny7R4mDMFh-kCLbXWaxtOZQEwVMWdG4
Visit https://jwt.io/ and decode this JWT.
The JWT above contains simple data, this is how you can store the data of your users in your application. How do I make this work? you might ask when a user fills in their data in your front-end, you can send it to your back-end there you create the JWT for the user, send it back to the front-end and store it in the local storage. As easy as that!!, now let’s write some code.
Let’s write some code
Are you enjoying the post? please don’t forget to like and share.
You should start by creating a node project using npm and create an index.js file.
The first two things you need to do is install express and jsonwebtoken by npm.
The second is importing our libraries
Above is our basic express server code.
How to create JWTs
Now that we have imported jsonwebtoken into our app it’s time to create tokens.
Before we move on you need to install dotenv as a dev dependency, and create a .env file, like the one below, this will help us in our future codes.
For signing our tokens we need two things, the data we need to sign and a secret token for signing, that's what we created in our .env file. Here is the code for signing tokens.
At the beginning of our code we import our dotenv library because we will need it for our signing token. Below that we created a server route for creating tokens, you see that for signing our tokens we use jwt.sign() which takes the data for signing and a token used to sign(The token we stored in our .env file).
How to verify tokens
Verifying JWTs is the other side of the coin when using JWT for authentication, as explained verifying tokens is basically decoding JWTs.
Understand this, If a token for a user is stored on the frontend and the user visits a URL which verifies the token you have successfully logged a user in.
For verifying tokens we’ll create a new route at /verifyjwt
For verifying jwts we use the jwt.verify() function which takes a token and the secret token used to sign it.
Alright guys, this is the end of the road for this post, Like, Share and follow for more.
Check out the post on Instagram -> https://www.instagram.com/p/CiLovWmDdxd/
Check out a Todo app I built using HTML, CSS, Javascript, MongoDB and most importantly JWTs, feel free to contribute also -> https://github.com/dovidmoishe/Fullstack-todo-app
Follow for more!!! Bye
