{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/33","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Snapshot Testing Snapshot tests as the name implies, is a very powerful tool to test whether you the UI has change or not. A typical…","fields":{"slug":"/engineering/snapshot-testing-using-nightwatch-and-mocha/"},"html":"

Snapshot Testing

\n

Snapshot tests as the name implies, is a very powerful tool to test whether you the UI has change or not. A typical snapshot test case for a website/mobile app renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test.

\n

Snapshot Testing Benefits

\n

For QA Manual And Automation

\n\n

For Developer Unit Testing

\n\n

Need to install NPM

\n
    \n
  1. npm i mocha
    2. \n
  2. npm i clean-html
    3. \n
  3. npm i snap-shot
    4. \n
  4. npm i jsdom
    5. \n
  5. npm i jsdom-global
    6. \n
\n
\n

NightWatch does not have snapshot feature. So, We will use mocha to take snapshots. But Mocha will be run by NightWatch.

\n
\n

Directory Structure

\n

As per over automation project. We have created a \"snapshot\" folder under the \"test\" folder and we will be following the same structure as per the below project menu bar.

\n

\"N|Solid\"

\n

We also need to add Mocha test files, which will use to take snapshot and store under the root folder \"__snapshots__\".

\n

\"(https://cdn.filestackcontent.com/XGkI0wDrQoGDSp2djINg)\"

\n

If you are running automation code via visual code editor, then you can setup a launch.json file which helps you to debug your test code with all file/individual file.

\n

You can see the settings below of the launch.json file.

\n

\"(https://cdn.filestackcontent.com/qDjAHwHIQtKp2hmBdaEn)\"

\n
\n

Update Snapshot

\n

After creating a snapshot, sometimes we need to update snapshot due to improvement, customer requirements, and any valid changes on UI. So here, we can have some other settings which will help us.

\n
    \n
  1. \n

    If we want to update all snapshots by single command then we need to follow below instruction.

    \n

    Create a root folder file(update_snapshot.js) and paste code on it.

    \n
    (function(){\n      process.env.UPDATE\\=1;\n})()
    \n

    Add in package.json

    \n

    \"(https://cdn.filestackcontent.com/TTvchMDTW6F5x87J0688)\"

    \n
    2. \n
\n
\n

We can update all snapshot by using → npm run snapshot-u

\n
\n
    \n
  1. If we want to update the single snapshot then we can use the above technique but we just need to update the file name against \"test/snapshot\".
    2. \n
  2. \n

    If we use vscode, then we need to update launch.json as per above information

    \n

    \"(https://cdn.filestackcontent.com/uWX0pIUaSzKFyVKJGIYB)\"

    \n

    and need to create a file(\"snapshot.config.js\") in the root folder and paste the below code.

    \n

    \"(https://cdn.filestackcontent.com/Hh3PNxKmSo2pSFRA9YeM)\"

    \n
    3. \n
\n
\n

Important-: If we want to run only a snapshot test then we will need a small change in the nightwatch.json file.

\n
\n

\"(https://cdn.filestackcontent.com/EkBrPZffRv2ElZ0Qez36)\"

\n

You can find the complete reposrtory link here

\n","frontmatter":{"date":"July 29, 2020","updated_date":null,"description":"Snapshot testing is one of many different testing tools, which compares the previous and current snapshot. Unlike TDD, snapshot testing relies on the fact that your component renders correctly already. ","title":"Snapshot testing using Nightwatch and mocha","tags":["QA","Nightwatch","snapshot-testing"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/858d55e4f691f5e5780be7675877f12d/58556/snapshot_nightwatch.webp","srcSet":"/static/858d55e4f691f5e5780be7675877f12d/61e93/snapshot_nightwatch.webp 200w,\n/static/858d55e4f691f5e5780be7675877f12d/1f5c5/snapshot_nightwatch.webp 400w,\n/static/858d55e4f691f5e5780be7675877f12d/58556/snapshot_nightwatch.webp 800w,\n/static/858d55e4f691f5e5780be7675877f12d/99238/snapshot_nightwatch.webp 1200w,\n/static/858d55e4f691f5e5780be7675877f12d/135cd/snapshot_nightwatch.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nitesh Jain","github":"niteshjain1987","avatar":null}}}},{"node":{"excerpt":"Agile is becoming another SDLC methodology but in reality, it is beyond normal project management. With time It’s been accessorized a lot…","fields":{"slug":"/engineering/agile-development-team/"},"html":"

Agile is becoming another SDLC methodology but in reality, it is beyond normal project management. With time It’s been accessorized a lot and leaving behind the basic building blocks and the important entity the Agile Development Teams.

\n

Does anybody want a product full of bugs, non-scaleable, difficult to maintain?, certainly No.\nNo matter whatever the agile framework we use, the ultimate goal is a wonderful product with complete customer satisfaction. And it's the developers who sit in the centre and build the product and are responsible for the quality.

\n

Agile + Development Team = Agile Development Team

\n

What is Agile Development Team

\n

Before that let’s see who are the developers and what is a development team. A developer is a proficient individual in his technical skills. And a group of such individuals working on a project/product makes a development team. Then how does an Agile Development Team differ?

\n

The three attributes bring that difference.

\n

“A group of proficient individuals who are cross-functional, autonomous and self-organised sharing the same goal of building a bug-free product or delivering the project with proven quality”

\n

Cross-functional

\n

This doesn’t mean that every team member is 'master of all' or even a 'jack of all trades'. In fact, every individual carries their proficiency. But the important thing is that each team member is capable of building additional skills and as and when required can be applied during the development journey.

\n

It reduces the dependency and overall predictability increases and gives better room for risk management.

\n

Self-organised

\n

There is no right or wrong way to organise and hence sometimes teams fail. This attribute of the Agile development team gives freedom based on the maturity of the team to organise and plan the work for themselves. If in scrum team plans the daily work on their own. No one assigns the work.

\n

This helps in prevailing the high motivation, team members can better innovate and work towards the quality of deliverables. They can act without escalations without any unnecessary commands and control.

\n

Autonomy

\n

This brings the sense of ownership, a mental state when the team feels the accountability of the results. Team members voluntarily take ownership and make themselves responsible for the results of the product and project deliveries. Team members collaborate, work together, learn and share the feedback with an open mind. Help each other and grow together.

\n","frontmatter":{"date":"July 27, 2020","updated_date":null,"description":"Agile is becoming another SDLC methodology but in reality, it is beyond normal project management. With time It’s been accessorized a lot and leaving behind the basic building blocks and the important entity the Agile Development Teams.","title":"Qualities of an agile development team","tags":["Agile","Development","Teamwork"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/3e69292068b3c0327db542c1bc770f1c/58556/agile.webp","srcSet":"/static/3e69292068b3c0327db542c1bc770f1c/61e93/agile.webp 200w,\n/static/3e69292068b3c0327db542c1bc770f1c/1f5c5/agile.webp 400w,\n/static/3e69292068b3c0327db542c1bc770f1c/58556/agile.webp 800w,\n/static/3e69292068b3c0327db542c1bc770f1c/99238/agile.webp 1200w,\n/static/3e69292068b3c0327db542c1bc770f1c/7c22d/agile.webp 1600w,\n/static/3e69292068b3c0327db542c1bc770f1c/d4378/agile.webp 3600w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vikram Jain","github":null,"avatar":null}}}},{"node":{"excerpt":"Digital Identity and IAM Domain have been the talk of the technology town for decades. There has been plenty of research, innovation, and…","fields":{"slug":"/engineering/difference-between-iam-ciam-and-idaas/"},"html":"

Digital Identity and IAM Domain have been the talk of the technology town for decades. There has been plenty of research, innovation, and information around these two, which led to many terminologies for the platforms providing the relevant features. Some of these terminologies are specific to the characteristics of the platform, while others are used interchangeably.

\n

In this article, let’s discuss the following commonly used terminologies for the platforms providing the relevant features:

\n\n

These terminologies revolve around the IAM, CIAM, and IDaaS platforms. The infographic below categorizes these terminologies within these platforms:

\n

\"IAM

\n

Know the definition

\n

IAM defines and manages the roles and access privileges of network users and the cases in which users are granted or denied them. The primary purpose of IAM systems is one digital identity per individual. The established digital identity is then maintained, modified, and monitored throughout users' access lifecycles.

\n

CIAM is a subset of the broader concept of identity access management (IAM). It explicitly focuses on managing customers' identities who need access to websites, web portals, and mobile apps.

\n

IDaaS is an authentication infrastructure that is built, hosted, and managed by a third-party service provider. IDaaS companies supply cloud-based authentication or identity management to enterprises who subscribe. It allows enterprises to use single sign-on, authentication, and access controls to provide secure access to their growing number of software and SaaS applications.

\n

IAM Features and Use Case

\n

IAM is used for employee/internal-facing identity and access management solutions. The following explains a typical example of the IAM implementation within an organization:

\n

John, a new employee, joins the organization, and the application allows provisioning of his organizational identity. John can then login to his organization's portal, and based on the access configuration, he is either authorized or denied access to information or a resource.

\n

Besides, the organization has multiple portals, and John is allowed to access these portals using the same credentials. Throughout the job tenure, John's profile is maintained or updated from time to time. Eventually, when John decides to move on, deleting John's account from one portal revokes his access to all other portals.

\n

IAM has the following four components:

\n\n
\n

Organizations earlier used on-premises IAM software for identity and access management. Now the identity management process is getting more complicated as organizations add more cloud services to their environments. Thus, as a logical step, the organizations adopt cloud-based Identity-as-a-Service (IDaaS) and cloud IAM solutions.

\n
\n

CIAM Features and Use Case

\n

CIAM is used for customer-facing solutions. The capabilities of IAM are followed in the CIAM solutions; however, the use cases and requirements vary. Common features of CIAM include:

\n\n

The following explains a typical example of the CIAM implementation in a customer-facing application:

\n

Sarah, a new customer registers on the application. If applicable, the application should request for Sarah’s consent on business privacy policies and get her social profile data. The application must ensure the security and privacy of the captured data during registration, social login, or activities performed during her life cycle. Besides, Sarah should be allowed to manage access to her profile data and delete her account from the application. On the other hand, the business should be allowed to get insights on their customer to understand and deliver their needs.

\n

The core components of IAM remain the same across areas like authentication, authorization, user management, and central user repository. Thus, the need for Single Sign-On, Authentication Protocols, Access Management, Centralized and Universal Directories, User Lifecycle Management and Authorization, etc remains the same.

\n
\n

It is a common misconception that the technology required for CIAM is the same for IAM. CIAM is far more challenging irrespective of the similarities with the IAM, and it is recommended to have a CIAM solution in place for your customers.

\n
\n

IDaaS Features and Use Case

\n

The enterprises typically use IDaaS to extend their existing IAM infrastructure. Thus, enterprise IDaaS providers must deploy solutions that can:

\n\n

The following are the critical features of IDaaS:

\n\n
\n

The enterprises use several applications, mostly cloud-based services, while some of the applications hosted on-premise. Managing the credentials and access to each of those applications has become hectic.

\n
\n
\n

Since IDaaS provides a single point of user and access management for all the applications, granting or revoking access to users becomes very easy. Besides, it enables SSO to avoid managing separate login credentials for different service providers.

\n
\n

If you are looking for information on more terminology around the platforms mentioned in this article, add your request in the comments below. I will either address them here or write another article dedicated to your requests and questions!

\n","frontmatter":{"date":"July 24, 2020","updated_date":null,"description":"Over time, organizations are using many terminologies for IAM, CIAM, and IDaaS platforms. This article clarifies the use of these terms, key features, and common use cases of IAM, CIAM, and IDaaS platforms.","title":"IAM, CIAM, and IDaaS - know the difference and terms used for them","tags":["iam","ciam","idaas","identity"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/a5130bd86b66f92b9a0458e359a10100/58556/triplets.webp","srcSet":"/static/a5130bd86b66f92b9a0458e359a10100/61e93/triplets.webp 200w,\n/static/a5130bd86b66f92b9a0458e359a10100/1f5c5/triplets.webp 400w,\n/static/a5130bd86b66f92b9a0458e359a10100/58556/triplets.webp 800w,\n/static/a5130bd86b66f92b9a0458e359a10100/99238/triplets.webp 1200w,\n/static/a5130bd86b66f92b9a0458e359a10100/7c22d/triplets.webp 1600w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Archna Yadav","github":null,"avatar":null}}}},{"node":{"excerpt":"Logs are very helpful in finding the root cause of the issues you may be experiencing in an app. It is an efficient way to resolve issues by…","fields":{"slug":"/engineering/how-to-obtain-ios-application-logs-without-mac/"},"html":"

Logs are very helpful in finding the root cause of the issues you may be experiencing in an app. It is an efficient way to resolve issues by knowing the exact reason after checking Logs.

\n

Let's say we have developed an iOS app. As in many situations, we want to test our app on another's phone for many reasons. And probably that phone cannot be connected to the Mac. So, the console logs of the app can be sent directly from the app to the developer(us).

\n

This blog will provide step-by-step instructions for mailing iOS app logs directly from the app.

\n

Getting started

\n

Here we are having a project with a single ViewController. We may ask our users to install the app on their device, use it and at the end click on “Press for Logs” Button. By clicking IBAction pressForLogs function will get called which will open MailComposer and then the user can mail the Log file to us.

\n

Steps to do in your own project

\n\n
public var logFilePath:String!\n \n//======================//\nfunc print(_ items: Any..., separator: String = " ", terminator: String = "\\n") {\n    let output = items.map { "*\\($0)"}.joined(separator: " ")\n    //Swift.print(output, terminator: terminator)\n    NSLog(output)\n}
\n

Above function override any log calls in the app.

\n\n
func printTheDataAtLogFile() {\n    logFilePath = NSTemporaryDirectory().appending(String.init(format: "%@.log",Bundle.main.object(forInfoDictionaryKey: "CFBundleName") as! String)) as String\n       freopen((logFilePath as NSString).cString(using: String.Encoding(rawValue: String.Encoding.ascii.rawValue).rawValue)!, "a+", stderr)\n   }
\n

Above function will write all logs into a file instead of console.

\n\n

Voila!! :)

\n

Thanks for visiting us! We hope you find this knowledge base useful! Our mission is to make mobile app development happy. We hope we’re living up to the mission with your project.

\n

Please write to us for suggestions and for the contents we should come up with!

\n

Thanks for reading the blog. For detailed information and execution example of this blog, please refer to the video below:

\n\n","frontmatter":{"date":"July 22, 2020","updated_date":null,"description":null,"title":"How to obtain iOS application logs without Mac","tags":["Logs","ios","xcode","iPhone","troubleshoot","Mac"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4fdc8a84c6075fd3dd77f0b0be3f1939/58556/Log.webp","srcSet":"/static/4fdc8a84c6075fd3dd77f0b0be3f1939/61e93/Log.webp 200w,\n/static/4fdc8a84c6075fd3dd77f0b0be3f1939/1f5c5/Log.webp 400w,\n/static/4fdc8a84c6075fd3dd77f0b0be3f1939/58556/Log.webp 800w,\n/static/4fdc8a84c6075fd3dd77f0b0be3f1939/99238/Log.webp 1200w,\n/static/4fdc8a84c6075fd3dd77f0b0be3f1939/90fb1/Log.webp 1500w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Tanvi Jain","github":"tanvijn","avatar":null}}}},{"node":{"excerpt":"What is the “hosts” file A hosts file which is used by operating systems to map a connection between an IP address and domain names before…","fields":{"slug":"/engineering/hosts-file/"},"html":"

What is the “hosts” file

\n

A hosts file which is used by operating systems to map a connection between an IP address and domain names before going to domain name servers. This file is a simple text file with the mapping of IPs and domain names.

\n

Let’s talk about the usage of the hosts file

\n
Protecting Privacy
\n

You can use this to block advertisers, trackers, block marketing, or third party websites, block ads, banners, 3rd party page counters, or sites to protect your privacy.

\n
Block website for your kids
\n

If you don’t want your children to open some websites you can block them by the hosts file. You can decide entirely what you wish to block and even most hijackers and possibly unwanted programs.

\n
Security
\n

We can utilize it as a firewall in our local system. The hosts file is to block Spyware and/or ad Networks you can add all the Spyware sites & ad Networks domain names in your hosts file also you can block dangerous sites, ransomware sites, blockchain sites.

\n
Development
\n

You know during the development, you need to run your web application on the localhost for verification. Websites can run on the localhost, 127.0.0.1, or localhost IP address. There are some limitations in the localhost, you want to review your website on the custom domain before launching on the public domain suppose you have developed the e-commerce. You want to debug some payment gateway issue but your payment gateway is not supporting localhost URL or IP in the case of successful payment. You can add custom domain in the hosts file and validate the payment process on localhost

\n

How to edit hosts file

\n
Windows 8 or 10
\n

Windows operating system we need to open the host file

\n
    \n
  1. Go to the Start menu and start typing the Notepad.
    2. \n
  2. Right-click Notepad and choose Run as administrator
    3. \n
\n

\"Start

\n
    \n
  1. \n

    Open the hosts file. Click on File > Open and Copy and Paste the following path`

    \n

    c:\\Windows\\System32\\Drivers\\etc\\hosts

    \n
    2. \n
\n

\"edit-hosts-file-windows\"

\n

You can edit the hosts file

\n

Suppose you want to block facebook.com on your system and want to add a custom domain for your website. Just Copy and Paste following Lines

\n
0.0.0.0         www.facebook.com\n127.0.0.1       www.customdomain.com
\n

\"Save-hosts-file-windows\"

\n

After finishing the Editing, Save your hosts file

\n

\"Save-hosts-file-windows\"

\n

Open your browser and try to access www.facebook.com and see you can’t access this site

\n

\"Facebook-windows\"

\n
Linux
\n

Use following instructions for Linux

\n
    \n
  1. \n

    In the Linux terminal window, open hosts file using a favorite text editor

    \n
    $ sudo vim /etc/hosts
    \n
    2. \n
\n

\"linux-hosts-file\"

\n

It will prompt for the password, enter your administrator password.

\n
    \n
  1. Using the vim or your favorite text editor you can easily edit. The Linux hosts file is similar to the windows hosts file. Now again I am blocking Facebook and adding a custom domain
    2. \n
\n

\"linux-hosts-file-edit\"

\n
    \n
  1. Save the Changes
    2. \n
\n
Mac OS
\n

Use following instructions for macOS

\n
    \n
  1. Find the terminal application on your system\n-- We can use Spotlight application to search
    2. \n
\n

\"linux-hosts-file-edit\"

\n
    \n
  1. Type sudo vim /etc/hosts in the terminal\n-- It will prompt for the password, enter your administrator password\n-- Enter administrator Password\n
    2. \n
\n

\"mac-password\"

\n

Using the vim text editor you can easily edit you. The macOS hosts file is also similar to the windows and Linux hosts file. I am blocking Facebook and adding custom domain here as well.

\n

\"mac-hosts-file-edit\"

\n
    \n
  1. Save Changes\nOpen your browser and try to access www.facebook.com and see you can’t access this site.
    2. \n
\n

\"edit-hosts-file-mac\"

\n

Conclusion

\n

The hosts file is found on all operating systems. The hosts file is a powerful tool. It can make your computer more secure and safer by blocking malicious sites

\n","frontmatter":{"date":"July 20, 2020","updated_date":null,"description":"Hosts file maps hostnames to IP addresses, sometimes required to be edited either to block some sites or to test some custom domain.This blog explains how can we edit the hosts in different operating systems.","title":"Benefits and usages of Hosts File","tags":["Computer tricks","Networking","Hosts File"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.4184397163120568,"src":"/static/54b234435c9e01dc08a3d668cceb489e/991d2/index.webp","srcSet":"/static/54b234435c9e01dc08a3d668cceb489e/61e93/index.webp 200w,\n/static/54b234435c9e01dc08a3d668cceb489e/1f5c5/index.webp 400w,\n/static/54b234435c9e01dc08a3d668cceb489e/991d2/index.webp 640w","sizes":"(max-width: 640px) 100vw, 640px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"excerpt":"Biggest Challenge in React application is the management of state for frontend developers. In large applications, React alone is not…","fields":{"slug":"/engineering/react-state-management/"},"html":"

Biggest Challenge in React application is the management of state for frontend developers. In large applications, React alone is not sufficient to handle the complexity which is why some developers use React hooks and others use state management libraries such as Redux.

\n

In this post, We are going to take a closer look at both React hooks and Redux to manage the state.

\n

What is React State Management?

\n

React components have a built-in state object. The state is encapsulated data where you store assets that are persistent between component renderings.

\n

The state is just a fancy term for a JavaScript data structure. If a user changes state by interacting with your application, the UI may look completely different afterwards, because it's represented by this new state rather than the old state.

\n
\n

Make a state variable responsible for one concern to use efficiently.

\n
\n

Why do you need React state management?

\n

React applications are built using components and they manage their state internally and it works well for applications with few components, but when the application grows bigger, the complexity of managing states shared across components becomes difficult.

\n

Here is a simple example of an e-commerce application, in which the status of multiple components will change when purchasing a product.

\n\n

If developers do not have scalability in mind then it is really hard to find out what is happening when something goes wrong. This is why you need state management in your application.

\n

Let’s discuss how to use react state management using react hooks and redux

\n

What is Redux?

\n

Redux was created to resolve this particular issue. it provides a central store that holds all states of your application. Each component can access the stored state without sending it from one component to another. Here is a simple view of how Redux works.

\n

\"using

\n

There are three building parts: actions, store, and reducers. Let’s briefly discuss what each of them does.

\n

Actions in Redux

\n

Actions are payloads of information that send data from your application to your store. Actions are sent using store.dispatch(). Actions are created via an action creator.\nHere is an example action that represents adding a new todo item:

\n
{ \ntype: "ADD_TODO", \npayload: {text:"Hello Foo"}\n }
\n

Here is an example of its action creator:

\n
ocnst addTodo = (text) => {\n  return {\n     type: "ADD_TODO",\n     text\n  };\n}
\n

Reducers in Redux

\n

Reducers specify how the application's state changes in response to actions sent to the store.\nAn example of how Reducer works in Redux is as follows:

\n
  const TODOReducer= (state = {}, action) => {\n  switch (action.type) {\n    case "ADD_TODO":\n      return {\n        ...state,\n        ...action.payload\n      };\n    default:\n      return state;\n  }\n};
\n

Store in Redux

\n

The store holds the application state. You can access stored state, update the state, and register or unregister listeners via helper methods.

\n

Let’s create a store for our TODO app:

\n
const store = createStore(TODOReducer);
\n

In other words, Redux gives you code organization and debugging superpowers. This makes it easier to build more maintainable code, and much easier to track down the root cause when something goes wrong.

\n

What is React Hook?

\n

These are functions that hook you into React state and features from function components. Hooks don't work inside classes and it allows you to use React features without writing a class.

\n

Hooks are backwards-compatible, which means it doesn't keep any breaking changes. React provides some built-in Hooks like useState, UseEffect and useReducer etc. You can also make custom hooks.

\n

React Hook Rules

\n\n

Please see the following examples of some react hooks as follows:

\n
What is useState and how to use it
\n

useState is a Hook that Lets you add React state to function components.\nExample:\nDeclaring a State Variable in class and initialize count state with 0 by setting this.state to {count:0}.

\n
class Example extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0\n    };\n  }\n
\n

In a function component, we have no this, so we can’t assign or read this.state. Instead, we call the useState Hook directly inside our component:

\n
function Example() {\n    const [count, setCount] = useState(0);\n}
\n

We declare a state variable called count and set it to 0. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current count, we can call setCount.

\n
what is useReducer and how to use it
\n

useReducer is a hook I use sometimes to manage the state of the application. It is very similar to the useState hook, just more complex. useReducer hook uses the same concept as the reducers in Redux. It is basically a pure function, with no side-effects.

\n

Example of useReducer:

\n

useReducer creates an independent component co-located state container within your component. Whereas Redux creates a global state container that hangs somewhere above your entire application.

\n
          +----------------+              +----------------+\n          |  Component A   |              |                |\n          |                |              |                |\n          |                |              |      Redux     |\n          +----------------+              |                |\n          | connect Redux  |<-------------|                |\n          +--------+-------+              +--------+-------+\n                   |                               |\n         +---------+-----------+                   |\n         |                     |                   |\n         |                     |                   |\n+--------+-------+    +--------+-------+           |\n|  Component B   |    |  Component C   |           |\n|                |    |                |           |\n|                |    |                |           |\n+----------------+    +----------------+           |\n|    useReducer  |    | connect Redux  |<----------+\n+----------------+    +--------+-------+\n                               |\n                      +--------+-------+\n                      |  Component D   |\n                      |                |\n                      |                |\n                      +----------------+
\n

Below an example of todo items is completed or not using the useReducer react hook.

\n

See the following function which is a reducer function for managing state transitions for a list of items:

\n
 const todoReducer = (state, action) => {\n      switch (action.type) {\n        case "ADD_TODO":\n          return state.map(todo => {\n            if (todo.id === action.id) {\n              return { ...todo, complete: true };\n            } else {\n              return todo;\n            }\n          });\n        case "REMOVE_TODO":\n          return state.map(todo => {\n            if (todo.id === action.id) {\n              return { ...todo, complete: false };\n            } else {\n              return todo;\n            }\n          });\n        default:\n          return state;\n      }\n    };
\n

There are two types of actions which are equivalent to two states. they used to toggle the complete boolean field and additional payload to identify incoming action.

\n

The state which is managed in this reducer is an array of items:

\n
const initialTodos = [\n      {\n        id: "t1",\n        task: "Add Task 1",\n        complete: false\n      },\n      {\n        id: "t2",\n        task: "Add Task 2",\n        complete: false\n      }\n    ];
\n

In code, The useReducer hook is used for complex state and state transitions. It takes a reducer function and an initial state as input and returns the current state and a dispatch function as output

\n
 const [todos, dispatch] = React.useReducer(\n    todoReducer,\n    initialTodos\n  );
\n

Complete file:

\n
import React from "react";\n\nconst initialTodos = [\n  {\n    id: "t1",\n    task: "Add Task 1",\n    complete: false\n  },\n  {\n    id: "t2",\n    task: "Add Task 2",\n    complete: false\n  }\n];\nconst todoReducer = (state, action) => {\n  switch (action.type) {\n    case "ADD_TODO":\n      return state.map(todo => {\n        if (todo.id === action.id) {\n          return { ...todo, complete: true };\n        } else {\n          return todo;\n        }\n      });\n    case "REMOVE_TODO":\n      return state.map(todo => {\n        if (todo.id === action.id) {\n          return { ...todo, complete: false };\n        } else {\n          return todo;\n        }\n      });\n    default:\n      return state;\n  }\n};\nconst App = () => {\n  const [todos, dispatch] = React.useReducer(todoReducer, initialTodos);\n\n  const handleChange = todo => {\n    dispatch({\n      type: todo.complete ? "REMOVE_TODO" : "ADD_TODO",\n      id: todo.id\n    });\n  };\n  return (\n    <ul>\n      {todos.map(todo => (\n        <li key={todo.id}>\n          <label>\n            <input\n              type="checkbox"\n              checked={todo.complete}\n              onChange={() => handleChange(todo)}\n            />\n            {todo.task}\n          </label>\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default App;
\n

Let’s do a similar example with Redux.

\n

Store in App.js.

\n
import React from "react";\nimport { Provider } from "react-redux";\nimport { createStore } from "redux";\nimport rootReducer from "./reducers";\nimport Todo from "./Components/TODO";\nconst store = createStore(rootReducer);\n\nfunction App() {\n  return (\n    <div className="App">\n      <Provider store={store}>\n        <Todo />\n      </Provider>\n    </div>\n  );\n}\n\nexport default App;
\n

Actions in actions/index.js.

\n
export const addTodo = id => ({\n  type: "ADD_TODO",\n  id\n});\n\nexport const removeTodo = id => ({\n  type: "REMOVE_TODO",\n  id\n});
\n

Reducers in reducers/index.js.

\n
const initialTodos = [\n  {\n    id: "t1",\n    task: "Add Task 1",\n    complete: false\n  },\n  {\n    id: "t2",\n    task: "Add Task 2",\n    complete: false\n  }\n];\nconst todos = (state = initialTodos, action) => {\n  switch (action.type) {\n    case "ADD_TODO":\n      return state.map(todo => {\n        if (todo.id === action.id) {\n          return { ...todo, complete: true };\n        } else {\n          return todo;\n        }\n      });\n    case "REMOVE_TODO":\n      return state.map(todo => {\n        if (todo.id === action.id) {\n          return { ...todo, complete: false };\n        } else {\n          return todo;\n        }\n      });\n    default:\n      return state;\n  }\n};\n\nexport default todos;
\n

FIle components/Todo.js

\n
import React from "react";\nimport { connect } from "react-redux";\nimport { addTodo, removeTodo } from "../../redux/actions/authActions";\n\nconst Todo = ({ todos, addTodo, removeTodo }) => {\n  const handleChange = todo => {\n    if (todo.complete) {\n      removeTodo(todo.id);\n    } else {\n      addTodo(todo.id);\n    }\n  };\n\n  return (\n    <ul>\n      {todos.map(todo => (\n        <li key={todo.id}>\n          <label>\n            <input\n              type="checkbox"\n              checked={todo.complete}\n              onChange={() => handleChange(todo)}\n            />\n            {todo.task}\n          </label>\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nconst mapStateToProps = state => ({ todos: state.auth.todos });\nconst mapDispatchToProps = dispatch => {\n  return {\n    addTodo: id => dispatch(addTodo(id)),\n    removeTodo: id => dispatch(removeTodo(id))\n  };\n};\n\nexport default connect(\n  mapStateToProps,\n  mapDispatchToProps\n)(Todo);
\n

React offers react hooks which can be used as an alternative for connect(). You can use built-in hooks mainly useState, UseReducer and useContext and because of these you often may not require Redux.

\n

But for large applications, you can use both redux and react hooks. it works great! React Hook is a useful new feature, and the addition of React-Redux with Redux-specific hooks is a great step towards simplifying Redux development.

\n","frontmatter":{"date":"July 17, 2020","updated_date":null,"description":"Learn about React state management and why we need state management and how to use it with React hooks and Redux in the best possible way.","title":"React state management: What is it and why to use it?","tags":["React","Redux","Hooks"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ebbce990879fea50a2a8cce920c82894/a3e81/title-image.webp","srcSet":"/static/ebbce990879fea50a2a8cce920c82894/61e93/title-image.webp 200w,\n/static/ebbce990879fea50a2a8cce920c82894/1f5c5/title-image.webp 400w,\n/static/ebbce990879fea50a2a8cce920c82894/a3e81/title-image.webp 512w","sizes":"(max-width: 512px) 100vw, 512px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"

Introduction

\n

Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT, or JSON Web Tokens, a compact, stateless method for securely transmitting user identity and session data across services.

\n

With JWT token authentication, identity information is embedded in a signed token, allowing you to maintain user sessions without server-side storage. This approach is highly scalable and ideal for modern architectures like SPAs, mobile apps, and microservices.

\n

In this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.

\n

You’ll learn what JWT is, why it’s effective, and how it works in real-world applications. We'll cover both integration methods (IDX and Direct API), generating your signing key, managing sessions, storing the JWT token securely, and applying best practices throughout.

\n

Whether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.

\n

What is JWT?

\n

JSON Web Token (JWT) is an open standard (RFC 7519) used to transmit information securely between parties as a JSON object. It’s compact, self-contained, and digitally signed, making it a reliable format for authentication and authorization across modern applications.

\n

A JWT consists of three parts:

\n
    \n
  1. Header – Contains metadata like the type of token and signing algorithm (e.g., HS256).
    2. \n
  2. Payload – Stores the actual data or “claims,” such as user ID, roles, and token expiry.
    3. \n
  3. Signature – A cryptographic hash that ensures the token hasn’t been tampered with.
    4. \n
\n

Example of a token structure:

\n

<base64Header>.<base64Payload>.<signature>

\n

Why Use JWT?

\n\n

How JWT Works?

\n

\"Flowchart

\n
    \n
  1. A user logs in with credentials.
    2. \n
  2. Your app (or identity provider like LoginRadius) issues a signed JWT.
    3. \n
  3. The client stores the token and sends it with each request (usually in the Authorization header).
    4. \n
  4. The server validates the token’s signature and claims.
    5. \n
  5. If valid, access is granted — without any session stored on the backend.
    6. \n
\n

JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.

\n

JWT Authentication with LoginRadius: Overview

\n

LoginRadius provides robust support for JWT (JSON Web Token) authentication, which allows for flexible and secure access control across different digital platforms. Whether you're building a fully custom identity flow or using a pre-built interface, the platform supports various integration approaches depending on your architecture.

\n

If you're looking to understand how to implement JWT token authentication effectively, LoginRadius offers two primary implementation models that cater to different levels of customization and control:

\n

1. IDX Implementation – JWT through a Hosted Login Page

\n

The IDX-hosted login approach enables secure, standards-compliant, JWT-based authentication without requiring you to build a custom login interface. This is a strategic option for fast, compliant, and user-friendly deployments.

\n\n

Configuration Steps:

\n
    \n
  1. Enable JWT Login
    2. \n
  2. Go to authentication configuration settings and enable JWT Login in the Admin Console.
    3. \n
\n

\"Screenshot

\n
    \n
  1. Specify your signing algorithm and expiry policy, and define your JWT Secret Key.
    2. \n
  2. Input a secure JWT signing key.
    3. \n
  3. Specify token expiry duration (e.g., 15–60 minutes)
    4. \n
  4. Select the desired algorithm —HS256 for symmetric signing (same key signs and verifies)
    5. \n
  5. RS256 for asymmetric signing, where LoginRadius securely stores the private key used to sign the JWT.
    6. \n
  6. Your app or backend service uses the public key to validate the token signature.
    7. \n
  7. LoginRadius provides a JWKS (JSON Web Key Set) endpoint to dynamically fetch and rotate public keys, ensuring trust without key exposure.
    8. \n
  8. Update IDX Template for Callback
    9. \n
  9. Modify your IDX login page template to retrieve the JWT post-login. You can access the token via redirect URL parameters or secure JavaScript callbacks.
    10. \n
\n

Example Response:

\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",

\n

\"expires_in\": 1800

\n

}

\n

This integration approach works best for all teams that want effective identity workflows without the complexity of building proprietary login screens, something that is crucial for customer portals, onboarding of mobile applications, and even managing access for business partners.

\n

2. Direct API Implementation – Self Managed Login

\n

If you’re building a custom login UI or working in a headless environment, LoginRadius lets you generate and handle JWTs directly through its Authentication APIs. Here’s how you can programmatically perform token authentication using the classic method:

\n\n

Configuration Steps:

\n

Step 1: Authenticate via API:

\n\n

Include the user’s credentials (email + password) in the request body.

\n

Step 2: Get JWT in Response

\n\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",

\n

\"expires_in\": 3600

\n

}

\n

Step 3: JWT Decoding and Validation

\n\n

Step 4: Set Custom Claims (Optional)

\n

With LoginRadius, it is possible to customize the payload to include user roles and/or any additional metadata. You can set custom JWT claims on the Admin Console.

\n

With this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.

\n

NOTE- With either method, LoginRadius ensures that JWTs are securely signed, optionally short-lived, and compatible with standard token validation libraries, making integration seamless for everyone.

\n

To get started with JWT implementation, you can read our complete developer documentation.

\n

Hosted Login vs Direct API

\n

\"Illustration

\n

What is Session Management and How It Works with JWT

\n

Session management is how your app keeps track of a user after they log in so they don’t have to prove who they are with every request.

\n

In traditional apps, sessions are stored on the server using session IDs. Every time a request comes in, the server checks that session ID to verify the user.

\n

In modern apps, especially SPAs and APIs, JWTs are used to manage sessions without needing server-side storage; this is called stateless session management. The token itself carries the user’s identity, roles, and expiration details. As long as the token is valid, the user stays logged in.

\n

Good session management ensures:

\n\n

How LoginRadius Handles Session Management with JWT:

\n
    \n
  1. \n

    User Logs In

    \n\n
    2. \n
  2. \n

    Client Stores the Token

    \n\n
    3. \n
  3. \n

    Access Token Expiry

    \n\n
    4. \n
  4. \n

    Token Renewal

    \n\n
    5. \n
  5. Logout and Token Revocation Strategy
    6. \n
\n

When the user logs out, both the access token and refresh token should be cleared from client storage.

\n\n

Combining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.

\n

\"illustration

\n

How to Store JWT Tokens?

\n

When you implement JWT-based authentication, the client (browser or mobile app) needs a way to store the access token and, optionally, the refresh token after they are issued by the authentication server. This stored token is then attached to every subsequent request to prove the user's identity.

\n

Choosing where to store the JWT is a crucial security decision. The most common storage options are:

\n\n

Each option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

\n
    \n
  1. Never store sensitive tokens (like refresh tokens) in localStorage or sessionStorage.
    2. \n
  2. Use Secure and HttpOnly flags with cookies to prevent JavaScript access and ensure transmission only over HTTPS.
    3. \n
  3. Set the SameSite=Strict or Lax attribute on cookies to protect against CSRF.
    4. \n
  4. Use short-lived access tokens and rotate refresh tokens regularly.
    5. \n
  5. Implement CSP (Content Security Policy) to reduce XSS risk.
    6. \n
  6. Avoid storing any tokens in frontend code (e.g., hardcoded in JS files).
    7. \n
\n

Conclusion

\n

JWT authentication with LoginRadius offers a modern, stateless approach to managing sessions across distributed systems. The IDX integration is ideal for rapid deployment, while the Direct API model is best for organizations needing deep customization and integration flexibility.

\n

With robust token signing, refresh capabilities, and centralized control, LoginRadius provides a future-ready foundation for secure, scalable identity architecture. Contact us to know more about JWT authentication and implementation guide.

\n

FAQs

\n

1. What is JWT authentication used for?

\n

A: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.

\n

2. How does LoginRadius simplify JWT integration?

\n

A: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.

\n

3. Is JWT authentication secure?

\n

A: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

A: Yes, LoginRadius allows revocation of JWT refresh tokens explicitly, and supports strategies like short-lived tokens and key rotation to manage token lifecycles securely.

\n","frontmatter":{"date":"April 15, 2025","updated_date":null,"description":"Discover JWT (JSON Web Token) authentication, its advantages, and how to integrate it seamlessly using LoginRadius' hosted IDX and Direct API methods for secure, scalable identity management.","title":"JWT Authentication with LoginRadius: Quick Integration Guide","tags":["JWT","JSON Web Token","Authentication","Authorization"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.7782101167315175,"src":"/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp","srcSet":"/static/4cedb7829f98208cbc6d5a9aea4e983d/61e93/how-to-integrate-jwt.webp 200w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1f5c5/how-to-integrate-jwt.webp 400w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp 800w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1cc9f/how-to-integrate-jwt.webp 896w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},"pageContext":{"limit":6,"skip":192,"currentPage":33,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}