DEV Community: Syed Maaz Saeed

JWT explained in 4 minutes (With Visuals)

Syed Maaz Saeed — Sun, 24 Mar 2024 15:47:41 +0000

**Introduction

JWT authentication and session authentication are ways to authenticate users of your web app.
In this article we will explain the details of JWT, its structure along with its pros and cons.
JWT stands for JSON Web Token, and it is a commonly used stateless user authentication standard used to securely transmit information between client and server in a JSON format.
A JWT is encoded and not encrypted by default.
It is digitally signed using a secret key known only to the server.
It can be encrypted, but for this article we will focus on signed non-encrypted tokens.

Structure of JWT

**
A JSON Web Token consists of 3 parts separated by a period.
The header, the payload, and the signature.
Each section is base64 encoded

Header

**
The header consists of token type, which is JWT, and the signing algorithm used, such as HMAC SHA256 or RSA.

{ 
  "typ": "JWT",    
  "alg": "HS256"
}

Payload

The payload consists of the claims.
Claims are statements about the user, and additional data.
For example, we have the time the token was issued at.
We also have its expiration time, because tokens should expire.

{
"iss": "example_issuer",
"sub": "user_id123",
"exp": 1644768000,
"iat": 1644744000
}

Signature

The signature is most important part of a JWT.
It is calculated using the header, the payload, and the secret, which are fed to the signing algorithm to use.

signature = HMAC-SHA256(base64urlEncode(header) + "." + base64urlEncode(payload), secret_salt )

Steps

The steps involved in a typical JWT authorization flow are as follows:

1- Authentication: The user signs in using username and password, or using for example Google or Facebook.
The server verifies the provided credentials.

2- Token Generation & sending token to client: The server will generate the JWT and send it to the client, which stores it for future use.

3*-Sending the Token to server*: When the client wants to access a protected resource on the server, it sends the JWT in the Authorization header of the HTTP request.

axios.get(URL, {
    headers: {
        'Authorization': 'Bearer ' + token,
    },
})

4-Verifying the Token: The server receives the request and verifies the JWT by checking its signature using the secret key that was used to sign it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1wtz6vfzqavwm94wkdz.png)

If the JWT is valid, the server extracts the information contained in it and uses it to determine what actions the user is authorized to perform.

5- Authorizing the Request: If the user is authorized to access the resource, the server returns the requested data. If the user is not authorized, the server returns an error message

Setting Up a React Application

Syed Maaz Saeed — Tue, 26 Dec 2023 17:08:10 +0000

Install Node.js:

If you haven't already, download and install Node.js from Node.js website.

Create a React App:

Open your terminal and run the following command to create a new React app using Create React App:
npm create vite@latest / npm init vite@latest my-vite-project

Navigate to the Project Directory:

Move into the newly created Vite project directory using the terminal:

cd my-vite-project

Install Dependencies:

Inside the project directory, install the project dependencies using npm:

npm install

Run React App at localhost:

Launch the development server provided by Vite to begin development:

npm run dev

Creating Pull Request ON Github

Syed Maaz Saeed — Tue, 26 Dec 2023 17:01:22 +0000

Fork the Repository:

Visit the GitHub repository you want to contribute to.
Click the "Fork" button in the top-right corner to create a personal copy of the repository.

Clone Your Fork:

Copy the URL of your forked repository.
Open your terminal and run:
git clone
cd

Create a New Branch:

Establish a new branch for your changes:
git checkout -b feature/my-contribution
4.Make Changes:

Implement the necessary changes to the code or documentation in your branch.
5.Commit Changes:

Stage your changes:
git add .
Commit the changes with a meaningful message:
git commit -m "Added feature X"
6.Push Changes:

Push your changes to your forked repository:
git push origin feature/my-contribution
7.Create a Pull Request:

Navigate to your forked repository on GitHub.
Click on the "New Pull Request" button.
Select the branch containing your changes.
Provide a clear title and comment explaining your modifications.
8.Review and Merge:

The repository's owner or maintainers will assess your Pull Request.
If everything checks out, they'll merge your changes into the main project.

Flat Map in JavaScript

Syed Maaz Saeed — Sat, 30 Sep 2023 19:38:01 +0000

Flat Map in javascript is a great technique which you can learn here. Flat map essentially conbines techniques of map and filter Array method into one. I will suggest you to use flatMap() over combination of filter() and map().

FlatMap takes single pass and doesn’t produce intermediate array but filter ()and map() combination produces an intermediate array.

// using filterAndMap
console.time("filterAndMap")
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const squaredOddNumbers = numbers
.filter(num => num % 2 !== 0)
.map(num => num * num)

console.log(squaredOddNumbers); // [1, 9, 25, 49, 81]
console.timeEnd("filterAndMap")