Understand the concept of JWT — JSON Web Tokens

Balram Potabatti — Sun, 07 Mar 2021 14:57:19 +0000

JWT or JSON Web Token is an open standard (RFC 7519) which is used to securely transfer information between two parties.
To understand the detail concept of JWT, it’s very important to first know about Session tokens.
Session Tokens are an encrypted unique strings that are used to identify Session Instances. Look at the understandable example below-
Think of a Customer Care Dept. in a city, if a person(A) enters into it who has any queries to speak with representatives. Initially a person would speaks about all his problems and queries, then normally the care dept. would note down all the queries that particular customer has on a single piece of paper or in a database, and the point here is that, they would provide the customer with a Customer ID no. or Case ID no. which contains all information about queries or problems, as this would make customer care dept. to search for particular case in much faster way next time the same customer arrives for the solution.
Now Let’s think the same procedure with Clients and Servers —
Think of any website that contains Registration forms, here once the user enters into particular website and registers with his/her data. This data directly hits the server and on the server sends a token for that particular browser. The token is stored in the cookie of the browser and can be valid until the user logs off or until any time period. This token validates and helps the user to access all the subsequent requests made by him/her.
This method of validating and authorizing the user was much proper, but there was a key drawback to use session tokens. Let’s look at a example of Online Banking Systems, let’s imagine a scenario here, if a person logs in with his/her credentials on any banking website, Server(A) would pass a session token to the browser and hence here only Server(A) would authorize the current user as it has valid session token to match with its corresponding. And if any subsequent request would pass to Server(B), there would be conflict as Server(B) doesn’t know about historical tokens. This drawback gave birth to JWT.
JSON Web Tokens —
Let’s dive directly into the same example —
If a person, has problems to ask for a customer representative, the customer would visit the Care dept. and similarly rept. would note down all the problems with a Signature or Customer ID, so that if next time a customer enters the dept., a representative must identify the problems once they verify the Signature or Customer ID. But in this case, the document would be handover to customer, where the customer must bring the document whenever they enters dept. This saves the complexity that a rept. would be facing at the time of searching for particular customer Case ID and lot more other beneficial things.
Now Let’s think the same procedure with Clients and Servers —
In this case, Once a user registers or logs in with his or her credentials, a server generates a JWT token and assigns it with the data, and passes it to client-side. This token can only be verified by server, which on the client side it is stored in cookies of browsers and helps the browser or client to access all subsequent requests in no time. This brings lot of Reliability to users and helps in the process of Authentication.

Structure of JWT-
There must be 3 parts in which JWT structure is Divided —
Headers
Usually, headers are first part in JWT’s which consist of Algorithm used to encode JWT and type of the token which is JWT by-default.

Payload Payload section is the middle part of JSON web tokens, which consists of User Data, which is passed between Client and Server.
Signature Signature is the third part of the JWT which is created by server, and used to validate the requests, done by the user. To create the signature, the base-64 encoded header and payload are taken, along with a secret key and signed with algorithm specified in the header.

This Entire JWT is embedded in a type of string and these 3 parts are separated by dots(.).
Thank You!

Make your Website work like FIRE, Progressive Web Application(PWA)

Balram Potabatti — Tue, 02 Feb 2021 06:22:37 +0000

Do you know that there are more than 2 Billion websites on the World Wide Web, but less than 400 Million sites are Active. And unexpectedly 11.8 Million websites rank in Google Search Engine Result Pages(SERP’s).
Indeed, almost all of these 11.8 Million websites uses Best Search Engine Optimization (SEO) tactics which defended the 400 Million sites. Important Search Engine Optimization techniques involves
Improved UX/UI
Keywords used on Website
Responsive Web Design
Backlinks from Proficient Websites/Blogs
Content Management
Meta Tags
If these 6 elements played as Professional can lead a website into SERP’s, but is this all we do to serve Best User Interface to our customers, is this all we do to our website that has the capability to attract new customers, probably no, we have to Improve the Mobile First Experience, Improve Page Speed, make it work offline, in-short give powerful vitamins to our Website.
Yes, once we convert our Traditional Website into Progressive Web Application, our website can be directly installed into any Android device, we can also use Web Push Notification functionality on our websites, which can be the greatest benefit to attract potential customers.
Progressive Web Application does lot more than expected, these are some of the top companies that has PWA
Starbucks
Make My Trip
Uber
Twitter
You tube
Spotify
Now, let’s dig in more deep into this subject.
The word FIRE as I have mentioned in the title, releases its explanation —
F — Fast
I — Integrate
R — Reliable
E — Engaging
FAST —
Almost 53% of users abandon our website, if our website loads for more than 4 seconds, this is the destructive thing for a website which has amazing UI but takes time to load, there we fall down.
And here, we have to focus on the Speed of Website, make it as easy as possible to render functions and elements, show up images, and all related stuff.
INTEGRATE —
Here, Integrate in the sense, the user shouldn’t even think about the fact that they are on the web, they must feel our Web App as other mobile apps. Trying to keep a user in a flow, let him work with our application freely.
Integrate your application in such a way that they must feel safe and much reliable into our website.
RELIABLE —
Users don’t bother to try to browse for a web application when they have slow or no network connection, we need to change this Perception. Web Apps must load when there is no network connection. User expects to load, and this generates Reliability among user and web app.
ENGAGING —
Content Management, Customer Reviews and feedbacks, Attractive Images keeps our potential web visitors Engaging into website. And more the time they spend on website, more likely to convert a visitor into customer.
We have to keep on writing engaging content on our websites which is crucial for today’s internet world.
Lastly, we would look at the important benefits of PWA-
Engages mobile users
Works on No network connectivity
Much cheaper and easy to install
Fast
Installable on Android Devices
Fast rendering of components
Look at Portfolio Website which has all the capabilities and powers, and thus is a PWA.
Thank You!

DEV Community: Balram Potabatti

Understand the concept of JWT — JSON Web Tokens

Make your Website work like FIRE, Progressive Web Application(PWA)