{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/7","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Why Follow React Coding Best Practices? Writing code to create apps isn't just enough; the code should be as clean and maintainable as your…","fields":{"slug":"/engineering/guest-post/react-best-coding-practices/"},"html":"

Why Follow React Coding Best Practices?

\n

Writing code to create apps isn't just enough; the code should be as clean and maintainable as your app. Before jumping into the good practices to follow, it's essential to realize the reasons behind the same. It becomes crucial for you to understand coding conventions because of the following reasons:

\n
    \n
  1. As a developer, you shall understand that writing code to build apps is not enough, but the code should also be Reliable, Scalable, and Maintainable. Generally, 40% - 80% of the total cost of software is spent on its maintenance.
    2. \n
  2. Readability is the priority. Any software is seldom fully supported by one single developer; There is a whole team or group of people working on it. Furthermore, new developers always join the project team. Thus, maintaining coding standards improves the product's readability that lets developers easily understand the codebase even faster.
    3. \n
  3. Like any product, the software must be well-packaged and clean. Following best coding practices helps you write clean code throughout the codebase by ensuring consistency.
    4. \n
\n

Starting with React Best Practices

\n

Code Structure

\n

There's basically no defined structure, but you should have a style to follow throughout the codebase. Thus, this section explains how you can structure your codebase for medium to large-sized apps.

\n
    \n
  1. \n

    Put all your imports in order at the very top of the code file. You shall ideally prioritize as follows:

    \n

    React imports <> Library imports <> import * as <> import ./<some file>

    \n

    Make sure all your imports statements are on new lines, as this will make your imports clean and easy to understand for all the components, third-party libraries, etc.

    \n
    2. \n
  2. Use index.js for each folder to export so that all the imports are referenced on the index.js file, and you don't have to write import statements again and again for every file.
    3. \n
  3. \n

    It's easy to get confused about whether to use double quotes (\" \") or single quotes (' ') while working with React. The simple answer is: maintain consistency whatever you're using.

    \n

    Also, consider that you use double quotes (\" \") for JSX attributes and single quotes (' ') for the JS code (Follow the standard way or maintain consistency).

    \n
    4. \n
  4. Most of the time, beginners merge two-three components inside a single file and play around with that. However, that's not a good practice to follow. Dividing the whole app into components and then working on it on a separate file is a good practice to maintain clean code.
    5. \n
  5. Do you sometimes use CSS styles with JSX? But it's a bad practice. Always make classNames for each element and put all the styling under respective CSS files only.
    6. \n
\n

Naming Conventions

\n
    \n
  1. Your filenames should always have consistent casing and extension. Either use .js or .jsx as explained in code structure for extensions. And PascalCase or camelCase for filenames.
    2. \n
  2. In React, name your file the same as the React component inside that file i.e. without a hyphen in the filename. For example: Registration-Form → ❌. RegistrationForm → ✔️.
    3. \n
  3. Not only filename but also make sure that your variables/functions/modules filenames are consistent with cases.
    4. \n
  4. Use well-descriptive names for variables/functions/modules/Actions, keeping in mind that it is application-specific so that even a third party or new developer can easily understand you code.
    5. \n
  5. It's bad to use the underscore prefix ( _ ) for a React component's internal methods because underscore prefixes seem to be used as a convention in other languages to denote private objects or variables. But everything in JavaScript is public. And there is no native support for privacy. So, even if you add underscore prefixes to your properties, It'll not make them private. _onClickSubmit() → ❌
    6. \n
  6. When making reducer functions, write Action types as domain/eventNames. For example: ADD_TODO and INCREMENT (in CAPITALS) as this matches the typical conventions in most programming languges for declaring the constant values.
    7. \n
  7. Talking about cases in a React component, use PascalCase for the same — and for their instances, use camelCase. For example:-
    8. \n
\n
const loginForm = <LoginForm />;\nimport LoginForm from './loginForm';
\n

Files and Folders

\n
    \n
  1. Your app's directory structure shall be as follows:
    2. \n
\n
└── /src\n  ├── /assets - Contains static assets such as  images, svgs, company logo etc.\n  ├── /components - reusable components like navigation bar, buttons, forms\n  ├── /services - JavaSript modules\n  ├── /store - redux store\n  ├── /utils - utilities, helpers, constants.\n  ├── /views/pages - majority of the app pages would be here\n  ├── index.js\n  └── App.js
\n
    \n
  1. Each component folder should have its respective files grouped under the same. It maintains the hierarchy throughout the codebase. The necessary files include:\nComponent.js, Component.css, Component.test.js
    2. \n
\n

Code

\n
    \n
  1. Play the game of HOOKS by following all its rules. You can read more about the rules here. Either manually follow these rules or use an ESLint plugin called eslint-plugin-react-hooks which enforces these rules. So, add these rules while working on any project
    2. \n
  2. Remove console. logs — unless you have strong motivation why you would like it.
    3. \n
  3. Avoid multiple if-else blocks. Instead, use ternary — best for clean code practice
    4. \n
  4. Remove all commented-out codes. The biggest motivation for writing comments is the bad code that you write. It would be good to spend more time writing descriptive functions, methods, and filenames that are self-explanatory.
    5. \n
  5. Write Tests for each component. It's a good practice to write test cases for each component developed as it reduces the chances of getting errors when deployed. You can check all the possible scenarios through unit testing — and for that, some of the most commonly used React test frameworks you can use are JEST and ENZYMES.
    6. \n
\n

Good Commenting Practices

\n
    \n
  1. Use comments to explain why you did something, not how you did it. If you find yourself explaining how you did something, then it's time to make your code self-explanatory.
    2. \n
  2. Another point is not to write comments that are obvious and redundant — for example:
    3. \n
\n
// Prints out the sum of two numbers\nconsole.log(sum);
\n
    \n
  1. Write comments that are legal, informative, explanatory of intent, and offer clarification,
    2. \n
\n

ES6

\n
    \n
  1. Always destructure your props. Destructuring your props helps make your code cleaner and more maintainable. It also makes assigning object properties to variables feels like much less of a chore.
    2. \n
  2. Know where to use spread/rest operators. You shall read about it before actually using it.
    3. \n
  3. Try using optional chaining if possible.
    4. \n
  4. Use const instead of var or let . const lets you check that a variable should always stay constant. let indicates that the values of the variables can be changed.
    5. \n
  5. Start preferring arrow functions (= >) for more cleaner code. Arrow functions allow simplifying your code to a single line.
    6. \n
\n

Basics

\n
    \n
  1. Always ensure that your app is responsive.
    2. \n
  2. Your app should contain a proper README.md file that clearly details or explains your app. Clearly mention the features, functionalities, contributions guidelines, installation process, guide, etc.
    3. \n
  3. Do check that your app runs without any errors.
    4. \n
  4. Use EsLint throughout your codebase and other automation tools so that most of the best practices are maintained automatically for you.
    5. \n
  5. Consolidate duplicate code throughout the codebase.
    6. \n
\n

Please note that I haven't talked about automation extension and tools that can help you maintain most of the best practices easily without looking into separately. But, I wanted to bring this into consideration. Anyhow, you can use extensions like prettier, EsLint, EditorConfig, PLOP etc., to maintain your codebase efficiently.

\n

These are the best practices that I've learned practically over time by working in a team, reviewing my mates' codebase, observing open-source projects and repositories, and reading great resources, such as the offical React docs.

\n

Conclusion

\n

I hope you gained valuable insights. If you have more suggestions or practices that the React or dev community can follow, please to let us know.

\n

Until next time, keep learning, build awesome stuff, and uplift the community.

\n

By the way, if you want to add user registration and authentication to your React apps, you can use LoginRadius. It helps you become more efficient and focus more on the core business features of your React apps.

\n","frontmatter":{"date":"October 26, 2021","updated_date":null,"description":"Important React best practices every React developer should follow before, during, & after writing the code. To ensure code maintainability, keep these React coding best practices handy.","title":"32 React Best Practices That Every Programmer Should Follow","tags":["React"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/05fa72d6fb6ace5ecff9919a78a8ff56/ee604/Best-Practices.png","srcSet":"/static/05fa72d6fb6ace5ecff9919a78a8ff56/69585/Best-Practices.png 200w,\n/static/05fa72d6fb6ace5ecff9919a78a8ff56/497c6/Best-Practices.png 400w,\n/static/05fa72d6fb6ace5ecff9919a78a8ff56/ee604/Best-Practices.png 800w,\n/static/05fa72d6fb6ace5ecff9919a78a8ff56/f3583/Best-Practices.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Anjali Rohira","github":"rohiraanjali","avatar":null}}}},{"node":{"excerpt":"A Progressive Web App (PWA) is a more dynamic web application that can run as a standalone. It offers benefits such as: performance; the…","fields":{"slug":"/engineering/guest-post/how-to-build-a-progressive-web-app-with-react/"},"html":"

A Progressive Web App (PWA) is a more dynamic web application that can run as a standalone. It offers benefits such as:

\n\n
\n

You can learn more about the differences between native apps and PWAs here.

\n
\n

In this article, you're going to learn how to build a PWA using React. As React is a popular web framework, this article starts by going over the setup, development process, and spinning it up to see how it looks. For this example, you'll create a simple Counter Page that simply adds or subtracts a number based on button controls.

\n

Create a React App with the Progressive Web App Template

\n

Before you can begin coding, you need to set up your project. Let's start by ensuring you can use React (if you're already familiar with coding in React, you can probably skip this section!). You need to use Node.js with any development using web frameworks such as Angular, React, or Vue -- especially if you wish to use libraries and packages to assist in developing your project.

\n

A popular utility in using such packages and libraries is the Node Package Manager, simply referred to as \"npm\". This utility allows you to install/uninstall packages, start your React application build using webpack, and many more other features. For your needs, you can take advantage of npm to create a React application with a PWA template, which allows you to code right away. Whenever you start building a React app, you can use templates offered by Facebook using the 'create-react-app' command with npm.

\n

Let's build the PWA starter app by running the following command:

\n
npx create-react-app name-of-our-PWA-app --template cra-template-pwa
\n

The above command can be broken down as follows:

\n\n

Hitting 'Enter' after this command should initiate the build of your starter PWA React application. You should see a stream of prompts in your command-line interface. It may take a few minutes, but if you can see this screen after the command, you have created the project.

\n

\n \n \n

\n

\n \n \n

\n

Here, you can see the following folder structure of your application so far. There are a few files that you shall pay attention to when it comes to PWA's:

\n\n

Adding a Simple React Component

\n

For your project, you'll build a simple Counter component, similar (if not exactly the same) to the example provided in the React docs: Hooks State

\n

Let's start by creating a Counter component. Here, it is named as Counter.jsx and placed in a components folder.

\n

To speed things up, you can copy and paste the following code in your specific files. Here, it is built out as a simple page and some generic stylings for the component.

\n
//Counter.jsx\nimport React, { useState } from 'react';\nimport Button from '@mui/material/Button';\n\nfunction Counter(props) {\n    let [count, setCount] = useState(0)\n\n    function increment() {\n        setCount(count + 1);\n    }\n\n    function decrement() {\n        setCount(count - 1);\n    }\n\n    return(\n        <div style={{textAlign: 'center'}}>\n            <h3>Counter App</h3>\n            <div>\n                <Button variant="contained" onClick={increment}>+</Button>\n                <span> {count} </span>\n                <Button variant="contained" onClick={decrement}>-</Button>\n            </div>\n        </div>\n    );\n};\n\nexport default Counter;
\n

Note: Here, Material UI's Button component is used. You don't need to and can substitute the Button component with:

\n
<button onClick={increment}>+</button>
\n

To use Material UI, run the following npm commands:

\n
npm install @mui/material\nnpm install @emotion/react @emotion/styled //these are additional dependencies for me to get Material UI working with the Counter component
\n

Running Your Application

\n

In your command prompt, entering 'npm start' can spin up your application to a specific http://localhost url. You can start to see what work you've done so far.

\n

With these simple components, let's try to spin this application up and ensure it is working.

\n

Enter the command:

\n
npm start
\n

This starts the application at a set http://localhost URL. Once the dev server is working and live on the command prompt, go to the URL to view the application. You should see something similar to this:

\n

\n \n \n

\n

Now, it's all good and ready to have the app live and working, but more interested in the PWA aspect.

\n

Running Your Progressive Web Application

\n

Focus back on the index.js file. Make the following change:

\n
// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://cra.link/PWA\nserviceWorkerRegistration.register(); //change the service worker registration from 'unregistered' to 'registered'
\n

Essentially, changing the service worker from unregistered to registered will allow you to utilize the app even when it's offline, a key benefit when it comes to PWAs. Check Google's explanation on this topic for more information: Service Worker Registration

\n

With the PWA files setup, in order to view the difference, you can deploy your application to a static server using the serve package that will serve your application to localhost. In a nutshell, make sure you have the serve package by installing, building the application again, and using serve to deploy the application:

\n
npm install serve\nnpm run build\nserve -s build //if you encounter an error with this command, try 'npx serve -s build'
\n

Once you use the serve command, you should see the following message, having your application deployed to http://localhost:5000. It automatically adds the URL to your clipboard as well for quick pasting in your browser.

\n

\n \n

After registering your service worker from index.js, you should be able to see it running in the Application tab. Inside that tab, on the left side you should see a Service Workers section. From here, you can see for http://localhost:5000. You have a Service Worker from your service-worker.js file and is activated/running.

\n

In the section above, you can see Manifest -- opening that should show you the relevant details you listed from your manifest.json files.

\n

\n \n

\n \n \n

\n

If you hit the '+' symbol on the right side of the URL ba,r you can install your PWA, just as done here.

\n

\n \n \n

\n

Use Workbox Lighthouse for testing the capabilities of your PWA: Lighthouse

\n

Conclusion

\n

You've learned about what PWAs are and how to build a PWA with React.

\n

If you want to quickly add user registration and authentication to your React PWA, you can use LoginRadius. It eliminates the burden of building and maintaining user authentication from scratch and helps you focus entirely on building your app's core features.

\n","frontmatter":{"date":"October 22, 2021","updated_date":null,"description":"Follow this article to understand how to develop a simple React PWA. It explains the step-by-step process to help you easily follow along.","title":"How to Build a Progressive Web App (PWA) with React","tags":["React","PWA","npm"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c7e3ca9131877e6d122821800050a259/ee604/blog-image.png","srcSet":"/static/c7e3ca9131877e6d122821800050a259/69585/blog-image.png 200w,\n/static/c7e3ca9131877e6d122821800050a259/497c6/blog-image.png 400w,\n/static/c7e3ca9131877e6d122821800050a259/ee604/blog-image.png 800w,\n/static/c7e3ca9131877e6d122821800050a259/f3583/blog-image.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abdullah Pathan","github":"aonepathan","avatar":null}}}},{"node":{"excerpt":"Introduction Bootstrap is an open-source tool collection for creating responsive web pages and web apps. It is the combination of HTML, CSS…","fields":{"slug":"/engineering/guest-post/bootstrap4-vs-bootstrap5/"},"html":"

Introduction

\n

Bootstrap is an open-source tool collection for creating responsive web pages and web apps. It is the combination of HTML, CSS, and JavaScript framework that makes it easy to develop responsive, mobile-first websites. It mainly aims to resolve the cross-browser compatibility issue. Bootstrap is at the core of every website that is perfect for all screen sizes and looks perfect in every modern browser.

\n

Getting Started with Bootstrap

\n

In order to start using Bootstrap in your web pages, you need to add a few CSS and JS tags in your template file.

\n
CSS Link tag\n\n<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
\n
JS Link tag\n\n<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>\n\n<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>\n\n<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
\n
\n

NOTE: Always add the jquery script first, followed by the popper and bootstrap scripts. Then you can add any of your custom scripts below them.

\n
\n

Bootstrap Versions

\n

The developers have been working continuously to enrich the developer experience of using Bootstrap for customizing the web pages quite easily. They've released many minor and major versions. But the major releases that are the most popular are the Bootstrap v4.x and Bootstrap v5.x. Let's look at what all v4.x offered and how those things evolved in the v5.x release with additional features.

\n

Bootstrap v4.x

\n

Bootstrap 4 was launched back in January 2018, and it was a great improvement over the existing previous versions. However, the most loved features included the following.

\n\n

Bootstrap v5.x

\n

Bootstrap 5 came into play back in May 2021. This release was launched after several iterations of alpha and beta releases and hence had a stack of major additions and new features. Some of the most talked about features are listed below.

\n\n

Let's dive into its features by comparing how things changed in Bootstrap 5 and understanding what better design perspectives it offers for developers.

\n

Bootstrap 5 vs. Bootstrap 4

\n

The above section talked about the features of both Bootstrap 4 and Bootstrap 5. This section talks about the upgrades that Bootstrap 5 provides over Bootstrap 4.

\n

Enhanced Grid System

\n

The grid system is retained in Bootstrap 5. However, an extra grid tier xxl has been introduced to minimize the effort in making the pages responsive on higher resolution displays.

\n

Columns don't have a default relative position in Bootstrap 5.

\n

Classes have been added to address vertical spacing.

\n

Enhanced Form Elements

\n

The form elements in Bootstrap 4 have defaulted to the browser-provided view. However, in Bootstrap 5, the form elements have a custom design that enables them to have a consistent look and feel in all browsers.

\n

The new form controls are based on completely semantic, standard form controls. This helps developers to avoid adding extra markups for form controls.

\n

Utilities API

\n

Unlike Bootstrap 4, Bootstrap 5 enables the developers to modify and create their own utilities.

\n

You can simply use sass to create your own utilities.

\n

You can use the state option to generate dummy class variations like hover and focus.

\n
$utilities: (\n  "opacity": (\n    property: opacity,\n    class: opacity,\n    state: hover,\n    values: (\n      0: 0,\n      25: .25,\n      50: .5,\n      75: .75,\n      100: 1,\n    )\n  )\n);
\n

Support for IE

\n

Bootstrap 5 no longer supports Internet Explorer 10 and 11 like its predecessor, Bootstrap 4.

\n

Extended Colors

\n

Bootstrap 4 had limited color options. But Bootstrap 5 has included many new color options to its color palette, enabling you to choose from the various shades available. You can find some of the color shades below.

\n

\n \n \n

\n

Bootstrap Icons

\n

Bootstrap 4 didn't have an SVG icon library. You had to use other third-Party libraries like Font Awesome to use icons in your applications. But Bootstrap 5 has taken care of this issue by introducing its own SVG library with 1000+ icons.

\n

It also includes a web font version in the stable version release of the icon library.

\n

\n \n \n

\n

Site Generation Strategy

\n

Bootstrap 5 has moved to Hugo for its static site generation over Jekyll. Hugo is a fast static site generator implemented in Go and is quite popular. You can learn more about Hugo here.

\n

Popper.js Update

\n

Bootstrap 5 update brings in an update for Popper.js as well, Popper.js v2. Popper.js generally helps to design the tooltips and popovers. With v2, the following changes come in:

\n\n

Placeholder Components

\n

Bootstrap 5 allows loading placeholders in your pages. This means that you can utilize the space of the components by showing placeholders in their place while they're still loading the actual content.

\n

\n \n \n

\n

RTL Support

\n

Bootstrap 5 has added support for RTL (Right-to-Left), which means you can develop content that needs writing from the right side of the page and continues to the left. As a result, websites in languages like Arabic, Sindhi, and Urdu can easily be developed.

\n

\n \n \n

\n

jQuery Deprecation

\n

Bootstrap used jQuery from the very beginning as a dependency to offer dynamic features. With Bootstrap 5, jQuery is dropped, and Vanilla JS is introduced as its replacement.

\n
\n

NOTE: There are still JS dependencies that depend on Popper and Vanilla JS modules. However, jQuery is optional and can be added based on the requirement of the project.

\n
\n

Other Significant Changes

\n\n

\n \n

This is all for this blog post at the moment. I hope you had a great time reading this and learned something new. Do let me know in the comments if you liked the content.

\n
\n

NOTE: All the images used in this blog post are taken from the official Bootstrap website and are used here for reference purposes only.

\n
\n","frontmatter":{"date":"October 21, 2021","updated_date":null,"description":"This article discusses the differences between Bootstrap 4 and Bootstrap 5 and helps you understand which version you should use for your projects.","title":"Bootstrap 4 vs. Bootstrap 5: What is the Difference?","tags":["Bootstrap","Frontend","Sass"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/8f7ef876ee3ee88f8ddb1becc34c70fa/ee604/coverImage.png","srcSet":"/static/8f7ef876ee3ee88f8ddb1becc34c70fa/69585/coverImage.png 200w,\n/static/8f7ef876ee3ee88f8ddb1becc34c70fa/497c6/coverImage.png 400w,\n/static/8f7ef876ee3ee88f8ddb1becc34c70fa/ee604/coverImage.png 800w,\n/static/8f7ef876ee3ee88f8ddb1becc34c70fa/f3583/coverImage.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rutam Prita Mishra","github":"Rutam21","avatar":null}}}},{"node":{"excerpt":"One of the most used authentication standards in web applications is the JSON Web Token standard. It is mostly used for authentication…","fields":{"slug":"/engineering/guest-post/jwt-authentication-best-practices-and-when-to-use/"},"html":"

One of the most used authentication standards in web applications is the JSON Web Token standard. It is mostly used for authentication, authorization, and information exchange.

\n

JSON Web tokens are made of three parts separated by dots (.) — and look like this typically: xxxxx.yyyyy.zzzzz. These correspond to the Header, the Payload, and the Signature. You can learn more about JWT tokens here.

\n

And before using them and continuing to read this article, you might want to check the advantages compared to the session authentication method. You can learn more about JWTs vs. Sessions here.

\n

When to Use JWT Authentication?

\n

Authentication

\n

Authentication is done when a client successfully proves its identity via a login endpoint. If it's successful, the server will create JSON Web Token and send it in response to the client.

\n

The client will use this JWT on every request for a protected resource.

\n

Authorization

\n

A server built on JWT for authorization will create a JWT when a client logs in. This JWT is signed, so any other party can’t alter it.

\n

Each time the client has access to protected resources, the server will verify that the JWT’s signature matches its payload and header to determine that the JWT is valid.

\n

Then if the JWT is successfully verified, it can grant or deny access to the resource.

\n

Data Exchanges

\n

JWT is also a great way to secure information transmission between parties — two servers, for example — and because you can verify the validity of the token (signature, structure, or the standards claimed in the JWT).

\n

When Not to Use JWT Authentication?

\n

Revocable Tokens

\n

JWT doesn’t require any lookup of the database, so revoking them before the expiration is quite difficult.

\n

Revocation is very important in many cases.

\n

For example, when logging out users or banning users, or changing permissions or passwords instantly, if the token hasn't been revoked, it might be possible for the user to continue to make requests even if this user no longer has the required authorization to do so.

\n

Sensitive Information

\n

JWT is usually signed to protect against data manipulation or alteration. With this, the data can be easily read or decoded.

\n

So, you can’t include sensitive information such as the user’s record or any identifier because the data is not encrypted.

\n

Cookie Size Factor

\n

The size of a JWT is greater than the size of a session token. And this can quickly increase linearly as you add more data to the JWT. And because you need to send the JWT at each request, you're increasing the payload size. This can become heavily complex if there is a low-speed internet connection.

\n

JWT: Best Practices

\n

1) JWT as Access Token

\n

JWT can be used as an access token to prevent unwanted access to a protected resource. They're often used as Bearer tokens, which the API will decode and validate before sending a response.

\n
Authorization: Bearer <token>
\n

2) Refresh Tokens Logic with JWT

\n

How do you get a new access token if this one is expired? The natural first idea is to log in again. But from a User Experience point, this can be quite painful.

\n

JWT can be used as refresh tokens; these tokens are used to retrieve a new access token.

\n

For example, when a client requests a protected resource and receives an error, which can mean that the access token has expired, the client can be issued a new access token by sending a request with a refresh token in the headers or the body.\nIf the refresh token is valid, a new access token will be created and sent as a response.

\n

Note that the refresh token is obtained at authentication and has a bigger lifetime.

\n

3) Which Signing Algorithm to Use?

\n

Interestingly enough, JWT can be signed using many different algorithms. But let’s quickly talk about the alg value in the JWT header. When it’s decoded:

\n

The alg value in JWT headers simply tells you how the JWT was signed. For example, with an alg value of RS512.

\n

RS512 => RS 512 where RS is the signature algorithm and SHA-512 is the hashing algorithm.

\n

SHA-512 will produce a 512-bits hash while SHA-256 will produce a 256-bit hash. And each of these algorithms gives you 50% of their output size of security level. This means that, for example, SHA-512 will provide you with 256-bits security.

\n

In any case, make sure to use a minimum of 128-bit security.

\n

4) Expiration, Issued Time, and Clock Skew

\n

JWTs are hard to revoke when they are created. Most of the time, you’ll have to wait until expiry. That’s why you should use a short expiration time.

\n

Additionally, you can implement your own revocation system.

\n

JWT comes with a time-based claim iat — issued at. It can be used to reject tokens that are too old to be used by the resource server.\nAnd clock skew specifies the allowed time difference (in seconds) between the server and the client clocks when verifying exp and nbf time-based claims. The default recommended default value is 5.

\n

5) JWT Signature

\n

The last part of a JWT is the signature, which is simply a MAC (or Message Authentication Code). This signature is created by the server using a secret key. This secret key is an important part of the JWT signature.

\n

There are two things to respect to decrease the probability of a secret key leaking or a successful brute force attack:

\n\n

6) Where to Store the Tokens?

\n

The easiest ways to store a token on the client side are localStorage and sessionStorage. However, both are vulnerable to XSS attacks, and sessionStorage is cleaned if the browser is closed.

\n

A better, secure way is to store JWT in cookies. Cookies are not accessible via JavaScript, they can’t be read and written, and interestingly, they are automatically sent to the server.

\n

7) Always Use HTTPS

\n

One of the main benefits of HTTPS is that it comes with security and trust. HTTP path and query parameters are encrypted when using HTTPS.

\n

Then, there is no risk of someone intercepting the request, particularly the token in transit. These types of attacks are commonly called MitM (man in the middle) attacks that can be successful on compromised or insecure networks.

\n

Conclusion

\n

This article discussed JWT and some best practices to fully use its potential.

\n

JWT is simply an authentication standard with its pros and cons. Thus, knowing some best practices can really help you use JWT better.

\n","frontmatter":{"date":"October 14, 2021","updated_date":null,"description":"JWT is a common way of implementing authentication in web and mobile apps. Read more to know how you can use JWT and learn the necessary best practices.","title":"JWT Authentication — Best Practices and When to Use","tags":["JWT","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/dd60f505aa7484a17a6cd0b90a5b0fae/ee604/cover-image.png","srcSet":"/static/dd60f505aa7484a17a6cd0b90a5b0fae/69585/cover-image.png 200w,\n/static/dd60f505aa7484a17a6cd0b90a5b0fae/497c6/cover-image.png 400w,\n/static/dd60f505aa7484a17a6cd0b90a5b0fae/ee604/cover-image.png 800w,\n/static/dd60f505aa7484a17a6cd0b90a5b0fae/f3583/cover-image.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kolawole Mangabo","github":"koladev32","avatar":null}}}},{"node":{"excerpt":"Ever wondered how amazing it would be if an application knows you are trying to access it, without having to re-validate your credentials…","fields":{"slug":"/engineering/guest-post/what-are-refresh-tokens-and-when-to-use-them/"},"html":"

Ever wondered how amazing it would be if an application knows you are trying to access it, without having to re-validate your credentials time and again?!

\n

Let's say you try accessing the application after a day or two, or even at the end of an entire week, and somehow... magically (not really xD) the system just knows it's you.

\n

Furthermore, the Security aspect of the app being completely robust, no other individual with malicious intent can access confidential information. Now that's music to a developer's ears -- or, at least, a powerful way to secure applications and systems at scale.

\n

Before diving into the know-hows of refresh tokens, let's understand why it is even needed in the first place.

\n

Conventional Approach of Securing Apps

\n

Many applications utilize the so-called token-based authentication to permit a user to access information (or resources) that would normally not be available for the general public (unauthenticated users).

\n

A token is an unique approval given to you (more like a digital signature) for accessing any resource. The application issues it to you once you have authenticated yourself with valid credentials. These tokens are generally short-lived, i.e., valid only for a short amount of time (say 5-15 minutes). This is plenty for you to perform a particular task requiring validation but makes it harder for individuals with malicious intent to get their hands on confidential resources. Now, until the token expires, the user would not have to enter the credentials again.

\n

This kind of system is widely used to perform online transactions where security is of utmost importance. However, due to the short-lived nature of such access tokens, the user would have to re-validate themselves to be re-issued a new access token.

\n

Refresh Tokens to The Rescue

\n

We can clearly make out that access tokens overall provide better security but hampers the user experience (UX) of the application. Imagine having to log in again and again just because the application has to make sure that you're still, well... you!

\n

Here is where refresh tokens come to the rescue. A refresh token just helps you re-validate a user without them having to re-enter their login credentials multiple times. The access token is re-issued, provided the refresh token is a valid one requesting permission to access confidential resources. This method provides an enhanced user experience all while keeping a robust security interface.

\n

OAuth 2.0 is a popular authentication framework that essentially allows client applications to access resources provided by other applications & servers on behalf of the user. This architecture leverages the benefits of utilizing access and refresh tokens.

\n

Now, having discussed the impact a refresh token has on enhancing the user experience of the application, is there any other benefit to using them?

\n

It is true that, generally, web applications and SPAs (Single-Page Applications) are meant to have short-term access to any resource leveraging authentication. When you do need access after a few days to the resources, you could definitely log in again, right? So why bother setting up refresh tokens?

\n

When to use Refresh Tokens?

\n

The main purpose of using a refresh token is to considerably shorten the life of an access token. The refresh token can then later be used to authenticate the user as and when required by the application without running into problems such as cookies being blocked, etc. If that does not make much sense, think of it this way:

\n

When a browser makes a request to an API endpoint to use a resource provided only to authenticated users, the application would require the credentials of the user. And upon authentication (login), the application on the user's browser is granted access to the resource. This access is provided by sharing an access token with the user's browser so that subsequent API calls from the browser -- which requires the credentials -- can be sent without any hassle.

\n

Now in the process of sharing the access token with the user, the system may also provide a refresh token that would later authenticate the user while making the subsequent API calls -- even if the access token has expired -- by requesting a new access token when required.

\n

Hence, the refresh tokens allow applications to obtain new access tokens utilizing mere API calls without any need of having users approve cookies, login multiple times, etc.

\n

Drawbacks and Ways to Conquer

\n

It's also true that you may not need the \"added superpowers\" offered by the refresh tokens to keep the user session and experience smooth. After all, methods such as cookies and silent authentication are beneficial in their own ways too! Let's talk about a scenario when refresh tokens might actually turn out to be an application's kryptonite... (not really xD).

\n

If a refresh token is compromised (someone else got their hands on it or, even worse -- steals it), the individual would not only gain access to the resources provided by the API but also the amount of time the access has been granted would be more. Now that's a dreadful scenario for developers and users alike.

\n

Having said that, counter-measures such as Refresh Token Rotation and Automatic Reuse Detection help limit the destructive nature -- and highlight the benefits of these refresh tokens.

\n

In such methods, when a refresh token is utilized to access any resource, the system not only responds with the access token but also with a new refresh token in turn. Any subsequent API requests can be made through newer refresh tokens from there onwards. If a request is made utilizing an older refresh token, the request is efficiently rejected (assuming the person/client requesting is unauthenticated).

\n

Also, Risk-Based Authentication (RBA) method suggests that if a refresh token is utilized multiple times, the tokens are revoked; thereby, preventing further access to valuable resources. Such a mechanism further helps strengthen the security of applications using refresh tokens.

\n

Conclusion

\n

Refresh Tokens are really a consummate way of providing sturdy security all while providing a great experience for users, provided it being used in appropriate ways. That being said, it might not be completely essential for your applications and their needs, so the final decision rests with you.

\n

I hope this blog provided an insight into refresh tokens and how you may utilize these in your applications. Thanks for reading!

\n","frontmatter":{"date":"October 05, 2021","updated_date":null,"description":"This is your guide to understanding refresh tokens, and why you may need to use them to enhance the user experience of your applications.","title":"What Are Refresh Tokens? When & How to Use Them","tags":["Authentication","Tokens","UX"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/395429ed9397d1de86cac90d1168da9a/ee604/coverImage.png","srcSet":"/static/395429ed9397d1de86cac90d1168da9a/69585/coverImage.png 200w,\n/static/395429ed9397d1de86cac90d1168da9a/497c6/coverImage.png 400w,\n/static/395429ed9397d1de86cac90d1168da9a/ee604/coverImage.png 800w,\n/static/395429ed9397d1de86cac90d1168da9a/f3583/coverImage.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mcvean Soans","github":"McTechie","avatar":null}}}},{"node":{"excerpt":"You might have already participated in Hacktoberfest as a contributor. But what if you have a project that you want to open source and get…","fields":{"slug":"/engineering/hacktoberfest-participation-as-maintainer/"},"html":"

You might have already participated in Hacktoberfest as a contributor. But what if you have a project that you want to open source and get contributions during Hacktoberfest?

\n

Well, this guide covers everything you need to know:

\n\n
\n

Most Important: The project should be in Working Condition or at both Logical and Coding End (if coding project). Here are the list of OpenSource repos by LoginRadius and the issues/guidelines for contributers.

\n
\n

If your project satisfies the above condition, you can just go ahead and implement the steps described as follows. By implementing these steps, you can successfully open source your project and get contributions for your open source project, especially during Hacktoberfest.

\n

Title

\n

Your project should have a concise title. This title will be the name of your project repo on GitHub.

\n\n

Repository Description

\n\n

Topic/Labels

\n

As part of Hacktoberfest and to make it easy to find the project, the repository should have one or more of the following labels

\n\n

Project README

\n

Each project must have a README file.

\n\n

CONTRIBUTING.MD

\n

It should have instructions on how to contribute to the project. Contributions guidelines should have at least three different sections.

\n\n

License

\n

Choose an appropriate open source license for your project

\n

MIT license is one of the popular open source licenses used by many open source projects on GitHub. Click here to know more about open source licenses and choose the license most appropriate for your project.

\n

Issues in Repos

\n

Each repo should have at least 5-10 well-labeled issues to be considered for Hacktoberfest.

\n\n

As a maintainer, you could also be eligible to win swag from DigitalOcean for participating in Hacktoberfest. For more information, click here.

\n","frontmatter":{"date":"September 28, 2021","updated_date":null,"description":"This ultimate guide is the resource you need to open source your project and participate in Hacktoberfest to get valuable contributions from the community.","title":"How to Participate in Hacktoberfest as a Maintainer","tags":["Hacktoberfest","Hacktoberfest 2021","Open Source"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/9b4d9cbebcded6e980c32d1f168669e4/ee604/cover.png","srcSet":"/static/9b4d9cbebcded6e980c32d1f168669e4/69585/cover.png 200w,\n/static/9b4d9cbebcded6e980c32d1f168669e4/497c6/cover.png 400w,\n/static/9b4d9cbebcded6e980c32d1f168669e4/ee604/cover.png 800w,\n/static/9b4d9cbebcded6e980c32d1f168669e4/f3583/cover.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Narendra Pareek","github":"pareek-narendra","avatar":null}}}}]},"markdownRemark":{"excerpt":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie…","fields":{"slug":"/engineering/identity-impact-of-google-chrome-thirdparty-cookie-restrictions/"},"html":"

Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients.

\n

What does it mean for user authentication?

\n

On one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes).

\n

On the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies.

\n

In this article, we’ll discuss:

\n\n

How is User Authentication Affected?

\n

Third-party cookie restrictions affect user authentication in three ways, as follows.

\n

External Identity Providers

\n

If your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app.

\n

Web SSO

\n

If you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials.

\n

If you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future.

\n

For example, you have apps at example.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.

\n

Federated SSO

\n

Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO.

\n

Usually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits.

\n

For example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords.

\n
\n

Note: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method).

\n
\n

Chrome’s Alternatives for Third-Party Cookies

\n

Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative.

\n

Specific to authentication, Google recommends the following:

\n
    \n
  1. Cookies Having Independent Partitioned State (CHIPS)
    2. \n
  2. Storage Access API
    3. \n
  3. Related Website Sets
    4. \n
  4. Federated Credential Management (FedCM) API
    5. \n
\n

Cookies Having Independent Partitioned State (CHIPS)

\n

CHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds.

\n

For example, a user visits a.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com.

\n

If the user visits b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.

\n

You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.

\n

If you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.

\n

However, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues.

\n

Storage Access API

\n

With Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage.

\n

Storage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context.

\n

It is most suitable when loading cross-site resources and interactions, such as:

\n

Verifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible.

\n

As it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options.

\n

Related Website Sets

\n

With Related Website Sets, you can declare a primary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.

\n

Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets

\n

It provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.

\n

It is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature.

\n

The top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.

\n

If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication.

\n

Related Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited.

\n

Federated Credential Management (FedCM) API

\n

FedCM API enables federated SSO without third-party cookies.

\n

With FedCM API, a user follows these steps for authentication:

\n
    \n
  1. The User navigates to a Service Provider (SP) — aka., Relying Party (RP)
    2. \n
  2. As the user requests to authenticate, the SP requests the browser through FedCM API to initiate authentication.
    3. \n
  3. The browser displays a list of available identity providers (supported by the RP), such as social IdPs like Google, Apple, LinkedIn, and Facebook, or other OAuth IdPs like LoginRadius.
    4. \n
  4. Once the user selects an IdP, the browser communicates with the IdP. Upon valid authentication, the IdP generates a secure token.\nThe browser delivers this secure token to the RP to facilitate user authorization.
    5. \n
\n

You can access a user demo of FedCM here: FedCM.

\n

For more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.

\n\n

Firstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.

\n

We’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.

\n

Please subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.

\n

In Conclusion

\n

The proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community.

\n

Moreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.

\n

From LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out.

\n

Glossary

\n

Top-level site: It is the primary site a user has visited.

\n

First-party cookie: A cookie set by the top-level site.

\n

Third-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited a.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.

\n

References

\n\n","frontmatter":{"date":"July 08, 2024","updated_date":null,"description":"Google Chrome has planned to phase out third-party cookies, which will affect different website functionalities depending on third-party cookies. This blog focuses on how this phase-out affects identity and user authentication and discusses alternatives for overcoming challenges.","title":"How Chrome’s Third-Party Cookie Restrictions Affect User Authentication?","tags":["Identity","Cookies","Chrome"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png","srcSet":"/static/eb7396060c0adc430dbed2d04b63d431/69585/third-party-cookies-phaseout-chrome.png 200w,\n/static/eb7396060c0adc430dbed2d04b63d431/497c6/third-party-cookies-phaseout-chrome.png 400w,\n/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png 800w,\n/static/eb7396060c0adc430dbed2d04b63d431/f3583/third-party-cookies-phaseout-chrome.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},"pageContext":{"limit":6,"skip":36,"currentPage":7,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}