Forem: Swapnil Sagar

JWT Access Tokens & Refresh Tokens

Swapnil Sagar — Tue, 16 May 2023 12:17:37 +0000

Access tokens and refresh tokens are integral components of the JSON Web Token (JWT) authentication mechanism. Let's break down their concepts:

Access Token:
An access token is a digitally signed and encoded token that is issued by an authentication server to a client application after successful authentication. It represents the authorization granted to the client to access protected resources or perform specific actions on behalf of an authenticated user. The access token contains claims such as user identification, expiration time, and scope.
Once a client receives an access token, it includes it in the Authorization header or sends it as a parameter in API requests to the server. The server then verifies the token's authenticity and checks its claims to ensure the requested action is permitted for the authenticated user.

Access tokens typically have a relatively short expiration time, such as a few minutes or hours, to ensure security. When an access token expires, the client needs to obtain a new one to continue accessing protected resources.

Refresh Token:
A refresh token is a long-lived credential that is also issued alongside the access token during the authentication process. While the access token provides temporary access, the refresh token serves as a means to obtain new access tokens without re-authenticating the user.
When the access token expires, the client can send the refresh token to a token endpoint or authorization server. The server verifies the refresh token's validity, and if it is valid, issues a new access token. The client replaces the expired access token with the new one and continues accessing resources seamlessly.

Refresh tokens have a longer expiration time compared to access tokens, which can range from days to months. They are typically securely stored on the client-side and transmitted over secure channels to prevent unauthorized access.

The use of refresh tokens enhances security by minimizing the time an access token is active, reducing the risk of token interception and misuse. It also provides a smoother user experience since the user doesn't need to re-enter their credentials frequently.

It's important to note that the implementation details of access and refresh tokens can vary depending on the authentication framework or service being used, but the core concepts remain consistent.

import jwt from 'jsonwebtoken';

// Function to generate an access token
function generateAccessToken(userId) {
  const payload = {
    userId: userId,
    exp: Math.floor(Date.now() / 1000) + 15 * 60, // Token expires in 15 minutes
  };
  const accessToken = jwt.sign(payload, 'your-secret-key');
  return accessToken;
}

// Function to generate a refresh token
function generateRefreshToken(userId) {
  const payload = {
    userId: userId,
    exp: Math.floor(Date.now() / 1000) + 30 * 24 * 60 * 60, // Token expires in 30 days
  };
  const refreshToken = jwt.sign(payload, 'your-secret-key');
  return refreshToken;
}

// Example usage
const userId = 123;

const accessToken = generateAccessToken(userId);
console.log('Access Token:', accessToken);

const refreshToken = generateRefreshToken(userId);
console.log('Refresh Token:', refreshToken);

PWA / SPA / AMP

Swapnil Sagar — Sat, 28 Nov 2020 05:23:03 +0000

If you are into Web Development in 2020 and working in latest technologies like React, Gatsby, Etc. then you must be familiar with SPA, PWA and AMP. These are some new abbreviations which every dev should be familiar with. These technologies gave a step-up to the community in terms of Web functionalities. Lets have a look in them one-by-one.

PWA

PWA stands for PROGRESSIVE WEB APP. This is an app built from the web technologies we all know and love, like HTML, CSS, and JavaScript, but with a feel and functionality that rivals an actual native app. Thanks to a couple of smart additions, you can turn almost any website into a progressive web app. This means that you can build a PWA rather quickly, in regards to a native app that’s pretty difficult to develop. Plus, you can offer all the features of native apps, like push notifications, offline support, and much more.

Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications.

Many sites you find online are actually a progressive web app. Take twitter.com, for instance. If you visit that site on your smartphone, you can install it to your home screen. Now, on opening the saved Twitter site, you’ll notice that it looks and performs just like a native app. There’s no browser window or nothing. There’s no difference in running it from an iPhone or an Android smartphone. Simply log in and you’re good to go. That’s a major benefit of building your web app with a PWA in mind.

In order to call a Web App a PWA, technically speaking it should have the following features: Secure contexts (HTTPS), one or more Service Workers, and a manifest file.

-> Secure contexts (HTTPS)
The web application must be served over a secure network. Being a secure site is not only a best practice, but it also establishes your web application as a trusted site especially if users need to make secure transactions. Most of the features related to a PWA such as geolocation and even service workers are available only once the app has been loaded using HTTPS.

-> Service workers
A service worker is a script that allows intercepting and control of how a web browser handles its network requests and asset caching. With service workers, web developers can create reliably fast web pages and offline experiences.
Manifest file

-> A JSON file that controls how your app appears to the user and ensures that progressive web apps are discoverable. It describes the name of the app, the start URL, icons, and all of the other details necessary to transform the website into an app-like format.

You can check PWA availablity on a site by accessing lighout through inspect element.

For Example:

PWAs are gaining popularity. Many big sites are PWAs, like Starbucks.com, Pinterest.com, Washingtonpost.com and Uber.com are actually installable on your home screen and offer a comparable experience to their native apps.

SPA

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

A (SPA) is a web app or site that fits into one single page. SPA provides a more flexible, desktop-like user-experience and gives better performance.

It allows the development of a smoother and more controlled UX, hiding web complexity (requests, responses, etc.) SPA swaps only the content that is requested by the user, loading HTML data in chunks.

There are two types of SPA: one embeds the content of multiple pages into one ‘shell’ page; with the other, one single app uses Ajax to retrieve content whenever a user clicks a link, so only the content that changes will be updated on the page, while the rest of the page remains with no reloads.

Why You Need a Single Page Web App

It’s perfect if you have a large-scale app with a complex user interface and hundreds of content pages, and you need to satisfy a large and diverse audience (thousands of users) that uses multiple devices

If you need a super rapid site with dynamic data loading and improved UX

Advantages of Single Page Apps

➤ Faster and snappier user experience

➤ Decrease in page-load time

➤ No reload or execution with each new page request

➤ Dynamic loading of page or part of page’s content

➤ Simpler interaction for end-user with a single page

WHEN TO USE A SPA

You might be asking, “When should I use a single page application?” When you have a business or a personal website that needs a dynamic platform and small data volume, the single-page application is a good idea. It is also a great option if you are planning to develop a mobile app in the future, since, as we mentioned above, the backend API can be used for both the web and mobile apps.

The main drawback is the SEO, but the architecture is suitable for Software-as-a-Service (SaaS) platforms, closed communities, and social networks (which is why Facebook uses it). The reason for this is that these sites don’t need optimization for search on Google.

AMP

AMP (originally an acronym for Accelerated Mobile Pages) is an open source HTML framework developed by the AMP Open Source Project It was originally created by Google as a competitor to Facebook Instant Articles and Apple News.

AMP provides a straightforward way to create web pages that are fast, smooth-loading and prioritize the user-experience above all else.
AMP is a simple and robust format to ensure your website is fast, user-first, and makes money. AMP provides long-term success for your web strategy with distribution across popular platforms and reduced operating and development costs.

In Simpler Words

Technically speaking, AMP removes cumbersome HTML, CSS and JavaScript elements, resulting in a stripped-down page that only includes the most vital content (text, images, videos, and of course, site ads). This makes AMP lightning speed.

To experience AMP Website yourself Click Here

What makes AMP pages load so quickly?

Google has a strict set of optimisations that significantly improve page loading times:

➥ Allow only asynchronous scripts

➥ Size all resources statically

➥ Don’t let extension mechanisms block rendering

➥ Keep all third-party JavaScript out of the critical path

➥ All CSS must be inline and size-bound

➥ Font triggering must be efficient

➥ Minimise style recalculations

➥ Only run GPU-accelerated animations

➥ Prioritise resource loading

➥ Load pages in an instant

Example:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Read the official AMP Documentation HERE

DATA STRUCTURE AND WEB DEVELOPMENT

Swapnil Sagar — Sun, 01 Nov 2020 10:58:35 +0000

As a CS student and also a web development enthusiast I can say that there are two parts to this answer one pertains to what you have to know and the second what you should know. Both were asked and I see those as quite different. The former being the minimum to get by and the later being what sets you up for future success.

First of all, it's important to define "Web Developer" to understand the have to know. If we are talking about a front-end engineer, I see the following common languages to be required:

HTML
CSS
JavaScript (including a couple frameworks)
WHERE DOES DATA STRUCTURE COMES IN THE ROLE FOR WEB DEVELOPMENT?
For HTML and CSS, there is a minimal amount of data structure and algorithmic knowledge required or actually none.

But in order to write effective JavaScript or even use common JS frameworks it's very important to have a good understanding of:

-> Data structures: at least hashmap (every JS object is really just a hashmap), arrays/lists.

-> Common algorithms for sorting/searching and their tradeoffs: this is important for writing efficient JS. Say if you have a large data set in memory, whats the best way of displaying it to the user is sorted order? You may not always need to write this yourself, but it's very important to understand how it works.

-> Memory use and efficiency: you may not need to know exactly how memory is allocated in the browser, but you should definitely know the most efficient ways to store data in memory and how that may trade off with performance.

For any web development

HTTP/Network communication - this is really important for debugging issues (things like Chrome's inspect element). Know how each tab works and what it's for.
BUT....WHAT YOU SHOULD KNOW?
Apart from our beloved array what other Data structurs should be known :

Maps/Dictionaries are useful when you want to store and access items in a key-value way. Some people try to achieve this in an inefficient and cumbersome way with arrays and indexOf. JavaScript objects behave like dictionaries and you should use them instead.
Trees are used to implement the DOM structure, knowing how trees work will help you structure and navigate in your DOM. Such knowledge is also fundamental to have something like Facebook's React diff algorithm that minimizes the changes in the DOM tree to improve rendering performance. And in case you also happen to write server-side code, it will help you understand how database indices work and why they are important.
If you want to have quick access to the maximum or minimum value in a collection, like a priority queue for example, you should probably be using a Heap.
Talking about Queues, they actually model the way events are processed.
And Stacks will probably make it easier for you to understand how to handle the states in your single page app. It will also help you grasp recursion.

If you start working on the front-end of web applications or web sites as a front-end engineer, you will inevitably run into issues or interactions with backend systems. In these cases it's very advantageous to be able to know a thing or two about the backend systems, how parts (or all!) of it works and the data structures and algorithmic techniques used.