{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/11","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"When we develop a project in a react application, we encounter errors such as server-related errors, component/function errors, and so on…","fields":{"slug":"/engineering/react-error-boundaries/"},"html":"

When we develop a project in a react application, we encounter errors such as server-related errors, component/function errors, and so on, which break the application and result in a blank web page, which is not ideal. To resolve this, many methods are created that handle these errors and improve the user and developer experience.

\n

In React, Error Boundaries comes in the picture, which was introduced in React v16 that catch the javascript errors found in UI and handle them efficiently.

\n

React Error Boundaries are React components that catch tricky javascript errors, log those errors and render them into a fallback UI instead of crashing the whole application.

\n

Now let's understand the concept with the code.

\n

Without Error Boundaries

\n
class UpdateCount extends Component {\n  state = {\n    count: 0\n  };\n  handleClick = () => {\n    this.setState({\n      count: this.state.count + 1\n    });\n  }\n  render() {\n  const {count} = this.state;\n    if (count === 4) {\n      // Imitate an error!\n      throw new Error('Application crashed!');\n    }\n    return (\n      <div>\n        <h1>{count}</h1>\n        <button onClick={this.handleClick}>+</button>\n      </div>\n    );\n  }\n};
\n

When an application encounters an error, the component unmounts completely, leaving the user/developer with a blank web page and no idea what to do next.

\n

React Error Boundaries provides a method to handle these errors efficiently!

\n

With Error Boundaries

\n

First, let's make an error boundary component. Here is an example:

\n
class ErrorBoundary extends Component {\n  state = {\n    error: ''\n  }\n  static getDerivedStateFromError(error) { \n    // will update the state \n    return {error: error.toString()}\n  }\n  \n  render() {\n  const {error} =  this.state;\n    if (error) {\n      return (\n      <div>\n  <p>Looks like an error occurred!</p>\n        <p>\n          {error}\n        </p>\n          <div>\n      )\n    }\n    return <div>{this.props.children}</div>\n  }\n}
\n

In the above example code, you will see a static method getDerivedStateFromError(error). This method is a lifecycle method in which we catch the error and see it as the state. If an error occurs, the state is updated, and instead of a blank web page, a human-friendly error message appears in rendering; if no error occurs, the control is returned to the original element.

\n

Now let’s see how we can use this class for our component.

\n
function App() {  \n  return (  \n    <div>  \n      <p><b>Error Boundary Example code</b></p>  \n      <hr />  \n      <ErrorBoundary>  \n        <p>Two updatecounts component use same error boundary component.</p>  \n          <UpdateCount />  \n          <UpdateCount />  \n      </ErrorBoundary>  \n      <hr />  \n      <p>Two updatecounts component use their own error boundary component.</p>  \n        <ErrorBoundary><UpdateCount /></ErrorBoundary>  \n        <ErrorBoundary><UpdateCount /></ErrorBoundary>  \n    </div>  \n  );  \n}  \nexport default App
\n

In the above code, when we click on the plus (+) button, it increases the count. The program is programmed to throw an error when the count reaches 4. It simulates a JavaScript error in a component. Here, we have used the error boundary in two ways, which are given below.

\n

First, these two updatecounts are within the same error boundary. If one of the updateCount components crashes, then the error boundary will replace them both.\nSecond, these two updatecounts are within their individual error limits. So if one crashes, the other component is not affected because both have their own error boundary component.

\n

React Error boundary is a really nice feature in React, and it is comparatively less used.\nThere are a lot of nice error boundary packages out there; you should look into them. Here is a link react-error-boundary

\n","frontmatter":{"date":"May 20, 2021","updated_date":null,"description":"Error Handling in React using React Error Boundaries","title":"React Error Boundaries","tags":["React","Error Handling","JavaScript"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/95277564493241e87bee30b1a4197e71/ee604/error_boundary_cover.png","srcSet":"/static/95277564493241e87bee30b1a4197e71/69585/error_boundary_cover.png 200w,\n/static/95277564493241e87bee30b1a4197e71/497c6/error_boundary_cover.png 400w,\n/static/95277564493241e87bee30b1a4197e71/ee604/error_boundary_cover.png 800w,\n/static/95277564493241e87bee30b1a4197e71/f3583/error_boundary_cover.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"excerpt":"There are several Consumer/User data protection regulations in place to protect customer data and privacy. With data protection act like the…","fields":{"slug":"/engineering/user-privacy-data-masking-in-nginx-logs/"},"html":"

There are several Consumer/User data protection regulations in place to protect customer data and privacy. With data protection act like the California Consumer Privacy Act (CCPA) and the European Union's GDPR improving awareness of privacy rights, many data-driven businesses have sought to determine which of their applications contain sensitive data, where the sensitive data goes, and why data is going. As a result, they are re-evaluating their data protection controls for employee and consumer data.

\n

Your program must record vast volumes of data to meet business requirements. It's likely that the application log data contains highly sensitive information. Email addresses, URL parameters such as tokens, credit card data, jobs data, Login Credentials, and Official ID Numbers (passport numbers, driver's license numbers, social security numbers), and authentication tokens may be included in specific log messages. It is important to mask sensitive details such as authentication tokens or credit card info while logging.

\n

A few years ago, Twitter requested users to reset their passwords. According to Twitter's release, passwords were written in the logs without masking, allowing those with access to the logs to see the password. In most startups or small businesses, all staff members have access to all tools, so masking confidential data is critical. Most log management tools allow you to mask any information until it is saved in the logs. Most of the log monitoring tools provide the feature for masking any information before it will save in the logs.

\n

Masking Sensitive Data in Nginx Logs

\n

By default, Nginx logs predefined format is combined. As you know, we can overwrite access log formatting as per the requirement. The NGINX JavaScript plugin can be used to enforce data masking in NGINX logs. This module is a kind of JavaScript implementation for NGINX and NGINX Plus that is intended for server-side use cases and per-request processing. When each request is logged, we run a small amount of JavaScript code to masking the sensitive data.

\n

Instructions for enabling the NGINX JavaScript module

\n

The NGINX JavaScript module is by default included in the official NGINX Docker image. if your installed version is 1.9.11 or later, then you can install NGINX JavaScript as a prebuilt package for your platform

\n
    \n
  1. \n

    Install the prebuilt package.

    \n

    Ubuntu and Debian systems

    \n
    $ sudo apt-get install nginx-module-njs
    \n

    RedHat, CentOS, and Oracle Linux systems

    \n
    $ sudo yum install nginx-module-njs
    \n
    2. \n
  2. \n

    Enable the module by adding a load module directive in the nginx.conf

    \n
       load_module modules/ngx_http_js_module.so;\n   load_module modules/ngx_stream_js_module.so;
    \n
    3. \n
  3. \n

    Reload NGINX service

    \n
        sudo nginx -s reload
    \n
    4. \n
\n

How to mask Query String in NGINX and NGINX Plus

\n

An application can be passed some potentially confidential information as query string parameters like tokens, public key, etc., this information logged as part of the request URI. If your program sends personal information in this manner, you can use the NGINX JavaScript module for masking customer/user personal information in the query string.

\n
    \n
  1. \n

    Create a new file maskQueryString.js

    \n
       vi maskQueryString.js\n\n   function fnv32a(str) {\n   var hval = 2166136261;\n       for (var i = 0; i < str.length; ++i ) {\n           hval ^= str.charCodeAt(i);\n           hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24);\n       }\n       return hval >>> 0;\n   }\n\n   function maskQueryStringParameters(req) {\n   var query_string = req.variables.query_string;\n   if (query_string.length) {                     // Proceed if we have query string\n       var keyvaluepairs = query_string.split('&');     // Convert to array of key=value\n           for (var i = 0; i < keyvaluepairs.length; i++) { // Iterate through each Key Value pairs pair\n               var keyvaluepairs = keyvaluepairs[i].split('=');    // Split Key Value pair into new array\n               \n               if (keyvaluepairs[0] == "token") {              // Mask token query paramter\n               // Use first 5 digits of masked value\n               kvpairs[i] = kvpair[0] + "=" + fnv32a(kvpair[1]).toString().substr(5);\n               } \n               ekse if (keyvaluepairs[0] == "accountno") {              // Mask account no\n               // Use first 7 digits of masked value\n               keyvaluepairs[i] = keyvaluepairs[0] + "=" + fnv32a(keyvaluepairs[1]).toString().substr(0,7);\n               } else if (keyvaluepairs[0] == "email") {     // Mask email\n               // Use hash as prefix for a single domain\n               keyvaluepairs[i] = keyvaluepairs[0] + "=" + fnv32a(keyvaluepairs[1]) + "@sample.com";\n           }\n   }\n   return req.uri + "?" + keyvaluepairs.join('&');  // Construct masked URI\n}\nreturn req.uri; // No query string, return URI\n}
    \n

    The maskQueryStringParameters function loops through and key-value pair in the query string, searching for individual keys that have been identified as containing personal data. The value is converted into a masked value for each of these keys.

    \n
    2. \n
  2. Include maskQueryString.js file in the nginx.config file
    3. \n
\n
     http {\n\n js_include maskQueryString.js;\n js_set     $request_uri_masked maskQueryStringParameters;\n\n log_format custom_log_format '$remote_addr - $remote_user [$time_local] '\n                        '"$request" $status $body_bytes_sent $request_uri_masked '\n                        '"$http_host" "$upstream_response_time"'\n                         '"$http_referer" "$http_user_agent" clientId="$clientid"';\n\n access_log /spool/logs/nginx-access.log custom_log_format;\n....................\n\n  }
\n

In the above example, I am using the maskQueryStringParameters js function and Since we only need to mask the query string, so using a different variable $requesturimasked and then using the same variable in the log format.

\n

3.Reload NGINX service

\n
      sudo nginx -s reload
\n

Now nginx will store token, accountno, and email in the logs after sanitizing the data.

\n

Summery

\n

These best practices will help you keep confidential information out of your logs. It's not a full package that will get you ready for a HIPAA or SOC2 audit, but it'll get you started.

\n

The NGINX JavaScript module provides a quick and efficient approach for adding custom logic like data sanitizing to request processing. I showed how NGINX JavaScript could be used to mask personal data in the log files.

\n

You can get more detail about the Nginx logs and mask from here -\nNginx - Everything you want to know about the Nginx logs in 10 minutes

\n","frontmatter":{"date":"May 18, 2021","updated_date":null,"description":"Learn about data masking in nginx logs for user data privacy and compliance.","title":"Data Masking In Nginx Logs For User Data Privacy And Compliance","tags":["Nginx","Logs","Data Masking","Compliance","Privacy"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/5d13afa8ca711b40eb6527325a97adb1/f422e/data-masking-in-nginx-logs-for-user-data-privacy-and-compliance.jpg","srcSet":"/static/5d13afa8ca711b40eb6527325a97adb1/f836f/data-masking-in-nginx-logs-for-user-data-privacy-and-compliance.jpg 200w,\n/static/5d13afa8ca711b40eb6527325a97adb1/2244e/data-masking-in-nginx-logs-for-user-data-privacy-and-compliance.jpg 400w,\n/static/5d13afa8ca711b40eb6527325a97adb1/f422e/data-masking-in-nginx-logs-for-user-data-privacy-and-compliance.jpg 640w","sizes":"(max-width: 640px) 100vw, 640px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"excerpt":"Everyone wants their application so fast, but how to achieve that, in that case, code splitting comes into the picture, where we split code…","fields":{"slug":"/engineering/react-code-splitting-with-lazy-suspense/"},"html":"

Everyone wants their application so fast, but how to achieve that, in that case, code splitting comes into the picture, where we split code and set the priority loading of the code snippet.

\n

But how do we set the priority or load them whenever required?

\n

1. React.lazy()

\n

Using this we can set code priority to the lower or it will load only whenever required. So how to do that? it's easy, let's understand through an example.

\n
 //generally approach to import Component\n import Blog from './BlogComponent';
\n
// This component is loaded dynamically or lazy load\nconst BlogComponent = React.lazy(() => import('./BlogComponent'));
\n

2. React.Suspense()

\n

Once the component is set for a lazy load then we need to set some kind of fallback option as well, till that code is rendered. This fallback option either could be a loader icon, screen, image, etc.

\n
// This component is loaded dynamically or lazy load\nconst BlogComponent = React.lazy(() => import('./BlogComponent'));\n\nfunction AppComponent() {\n  return (\n    // Displays <LoaderSpinner> until BlogComponent loads\n    <React.Suspense fallback={<LoaderSpinner />}>\n      <div>\n        <BlogComponent />\n      </div>\n    </React.Suspense>\n  );\n}
\n","frontmatter":{"date":"May 13, 2021","updated_date":null,"description":"Load Application faster with code spliting and dynamic loading","title":"Code spliting in React via lazy and suspense","tags":["React"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/12ea532cdd9f0017a02bfb74d888bba7/ee604/react.png","srcSet":"/static/12ea532cdd9f0017a02bfb74d888bba7/69585/react.png 200w,\n/static/12ea532cdd9f0017a02bfb74d888bba7/497c6/react.png 400w,\n/static/12ea532cdd9f0017a02bfb74d888bba7/ee604/react.png 800w,\n/static/12ea532cdd9f0017a02bfb74d888bba7/f3583/react.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"excerpt":"Hey Everyone !!! This blog will walk you through the steps necessary to quickly implement authentication mechanisms for your React…","fields":{"slug":"/engineering/implement-authentication-in-react-using-loginradius-cli/"},"html":"

Hey Everyone !!! This blog will walk you through the steps necessary to quickly implement authentication mechanisms for your React application by leveraging LoginRadius and the LoginRadius CLI with the help of examples.

\n

Using the LoginRadius CLI, you can perform basic actions of your LoginRadius Dashboard through the command line. The actions include login, register, logout, social configuration, domain whitelisting, site management, etc. Once the actions are performed, changes will be reflected in your application.

\n

Configuring LoginRadius

\n

Please follow the steps below to install the LoginRadius CLI on your system. Once completed, use the CLI to finish registration on the LoginRadius portal and create your application.

\n

LoginRadius CLI Setup

\n

Mac or Linux

\n\n

Other Platforms

\n\n

Once you have the CLI installed, the following command can be used to complete the registration process via the LoginRadius portal.

\n
$ lr register
\n

This command will open the Portal in the browser, where you can register yourself and create the app.

\n

\n \n \n

\n

Configuring Callback URLs

\n

Here, a callback URL refers to a URL in your application that LoginRadius would redirect a user to after they have been authenticated. These URLs must be added to your Application Configuration. If not set, users will be unable to login into the application and receive an error.

\n

\n \n \n

\n

For security reasons, LoginRadius only processes API calls that are received from the whitelisted domains. To get the list of whitelisted domains, run lr get domain command from the CLI. Similarly, to add a domain, use the lr add domain command.

\n
\n

For the purposes of this tutorial, make sure that you set http://localhost as a whitelisted domain.

\n
\n

\n \n \n

\n

Setup React JS application

\n

This tutorial uses a demo app based on the Create React App (CRA) boilerplate. For instructions on how to create a React App, refer to the following docs.

\n

The React Demo Application mentioned here will display the User Profile data if the login process is completed successfully.

\n

After setting up the boilerplate:

\n\n
const config = {\n    APP_NAME: '<<App Name>>',\n    API_KEY: '<<API Key>>',\n  };\n  export default config;
\n
\n

This tutorial uses LoginRadius Auth Page(IDX) for authentication, where Registration and Login functionality is already implemented. For example, you can navigate your Register buttons to https://<LoginRadius APP Name>.hub.loginradius.com/auth.aspx?action=register&return_url=<Return URL>.

\n
\n

Add Code to your Application

\n\n
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";\nimport "./App.css";\nimport LandingPage from "./components/LandingPage";\nimport Login from "./components/Login";\nimport Logout from "./components/Logout";\n\nfunction App() {\n  return (\n    <Router>\n      <div className="App">\n        <Switch>\n          <Route exact path="/">\n            <LandingPage />\n          </Route>\n          <Route path="/login">\n            <div style={{ display: "flex", padding: "1em" }}>\n              <Login />\n              <Logout />\n            </div>\n          </Route>\n        </Switch>\n      </div>\n    </Router>\n  );\n}\n\nexport default App;
\n

Add Landing Page

\n

In your components folder under the src folder, create a src/components/LandingPage.js file and add the following code to navigate your Register/Login buttons to the following URL's as shown below.

\n
import React from "react";\nimport config from "../config.js";\nconst LandingPage = () => {\n  return (\n    <div>\n      <h1> React Demo App </h1>\n\n      <a\n        href={`https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=register&return_url=${window.location.origin}/login`}\n      >\n        <button>Register</button>\n      </a>\n\n      <a\n        href={`https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=login&return_url=${window.location.origin}/login`}\n      >\n        <button>Login</button>\n      </a>\n    </div>\n  );\n};\nexport default LandingPage;
\n

By doing this, we are redirecting our application to the LoginRadius Auth Page and are passing the return_url as the current origin. After successful login, the Login component fetches the user profile data as shown in the following step. However, return_url can also be your website, backend server, etc., where you can handle the access token to perform different actions.

\n

Add Login Component

\n

In your components folder, create a src/components/Login.js file and add the following code to retrieve User Profile Data.

\n
import React from "react";\nimport { withRouter } from "react-router-dom";\nimport config from "../config";\n\nclass Login extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      userProfileResponse: null,\n    };\n  }\n\n  componentDidMount() {\n    const token = new URLSearchParams(this.props.location.search).get("token");\n    if (token) {\n      fetch(\n        "`https://api.loginradius.com/identity/v2/auth/account?apikey=" +`\n          config.API_KEY,\n        {\n          method: "GET",\n          headers: {\n            Authorization: "Bearer " + token,\n          },\n        }\n      )\n        .then((res) => res.json())\n        .then((res) => {\n          this.setState({ userProfileResponse: res });\n        })\n        .catch((e) => {\n          console.log(e);\n        });\n    } else {\n      window.location.assign(\n        `https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=login&return_url=${window.location.origin}/login`\n      );\n    }\n  }\n\n  render() {\n    const { userProfileResponse } = this.state;\n\n    return (\n      <div>\n        <span style={{ whiteSpace: "pre-wrap", textAlign: "left" }}>\n          {JSON.stringify(userProfileResponse, null, 4)}\n        </span>\n      </div>\n    );\n  }\n}\n\nexport default withRouter(Login);
\n

The Login component will call the LoginRadius API to fetch the user data by making use of the token obtained upon logging in via the LoginRadius Auth Page.

\n

Add Logout component

\n

In your components folder, create a src/components/Logout.js file and add the code as shown below.

\n
import React from "react";\nimport config from "../config.js";\n\nconst Logout = () => {\n  localStorage.removeItem("token");\n\n  return (\n    <div class="container">\n      <a\n        href={`https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=logout&return_url=http://localhost:3000/`}\n      >\n        <button>Logout</button>\n      </a>\n    </div>\n  );\n};\nexport default Logout;
\n

This component contains logout functionality. Here, action=logout is passed to the LoginRadius Auth Page, which will log the user out and return them to the Landing Page specified in the return_url.

\n
\n

Full code of the demo can be found on github.

\n
\n

Testing the application

\n

Run the React Application from the command line using npm start. You will be able to see the output on localhost:3000. You can also directly open the IDX page on https://<LoginRadius APP Name>.hub.loginradius.com/auth.aspx?action=register&return_url=http://localhost:3000/login.

\n

Congratulations! You have set up a React Application configured with LoginRadius using LoginRadius CLI. Continue reading to check out some cool and advanced features of the LoginRadius CLI that will help you manipulate and configure the LoginRadius Auth Page for your application through the CLI.

\n

Advanced LoginRadius CLI features

\n

This section explains the use of the LoginRadius CLI in enabling users to quickly and efficiently make changes to the LoginRadius Auth Page configured for their application.

\n

Adding Social Login Methods

\n

We can add social login methods like Google, Facebook, etc., to the LoginRadius Auth Page using the CLI. Use the lr add social command to add a Login method and the lr get social command to view the current active social login methods. Check the image below for a visual representation.

\n

\n \n \n

\n

After changing the theme, navigate to the LoginRadius Auth Page using lr demo command to view the changes.

\n

\n \n \n

\n

Adding to the Registration schema

\n
\n

This functionality is only available for paid Developer Plans and above (not available for LoginRadius Free plan).

\n
\n

We can update the Registration Page schema using the lr add schema command. Use the lr get schema command with --active or --all flags to get the current Registration fields or view all available fields with their schemas. You can also configure addtional features by choosing the setup advance configuration option.
\nSee the image below for a visual representation of the command flow.

\n

\n \n \n

\n

In the below image 2 fields have been added to the registration schema, Confirm Password and Gender. To view the changes, navigate to the LoginRadius Auth Page using lr democommand.

\n

\n \n \n

\n
\n

Instead of using the lr demo command, you can also view the LoginRadius Auth Page by visiting locahost:3000 and following the same workflow as explained earlier.

\n
\n

The entire description for these commands can be found in the LoginRadius CLI Manual.

\n

Contributing to LoginRadius CLI

\n

The LoginRadius CLI is open-sourced under LoginRadius Organization. You are welcome to contribute to it, suggest improvements, or report bugs by following the contributing guidelines. You can also checkout our open source page if you wish to contribute to other opensource projects by LoginRadius.

\n

Your Take

\n

Using the LoginRadius CLI, you can easily setup authentication for your React applications. You can also perform certain LoginRadius functionalities and processes efficiently through the CLI, which saves a bunch of time. LoginRadius will handle all the authentication-related mechanisms so that you can solely concentrate on your application development.

\n

I hope you enjoyed this tutorial and found it to be useful. You can provide feedback or suggestions in the comment section below.

\n

Cheers!!!

\n","frontmatter":{"date":"May 12, 2021","updated_date":null,"description":"In this tutorial, we will learn about implementing authentication for React applications using LoginRadius in under 5 mins. We will be using the LoginRadius CLI, through which we can perform basic actions of the LoginRadius Dashboard on the command line in a fast and proficient manner.","title":"Implement Authentication in React Applications using LoginRadius CLI ","tags":["Authentication","React","CLI","LoginRadius CLI"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ebd0bed97181739f12158e74609a96c6/14b42/cover.jpg","srcSet":"/static/ebd0bed97181739f12158e74609a96c6/f836f/cover.jpg 200w,\n/static/ebd0bed97181739f12158e74609a96c6/2244e/cover.jpg 400w,\n/static/ebd0bed97181739f12158e74609a96c6/14b42/cover.jpg 800w,\n/static/ebd0bed97181739f12158e74609a96c6/47498/cover.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Akash Patil","github":"Akash-Patil","avatar":null}}}},{"node":{"excerpt":"Recoil js is another state management library for React. Though we already have Redux. Mobx, Context, but here we got a new light entry in…","fields":{"slug":"/engineering/recoiling-the-react/"},"html":"

Recoil js is another state management library for React.

\n

Though we already have Redux. Mobx, Context, but here we got a new light entry in the community.

\n

Why I am saying light you will figure it out at the end of this blog.

\n

Why Recoil

\n\n

Recoil concepts

\n

There are two major concepts:

\n
    \n
  1. Atoms
    2. \n
  2. Selectors
    3. \n
\n

Something new? Don't worry will understand this quickly.

\n

Atoms

\n

This is similar to how we use the useState hook in react. If you are new to react hooks, checkout react hooks guide.

\n

e.g.:

\n
 const [age, setAge] = useState(0);
\n

age : this will be used for state variable declaration.\nsetAge :this will be used for state variable updations.

\n

1. Let's start with binding root app with Recoil

\n

Now you need to make a few alterations in your app's root level, like the below snippet.

\n

RecoilRoot will behave like a global context provider that will share the global state to your app tree.

\n

Now update your older code snippet.

\n
ReactDOM.render( <AppPage />, document.getElementById("root"))
\n

to

\n
import { RecoilRoot } from "recoil";\n\nReactDOM.render( \n <RecoilRoot>\n    <AppPage />\n </RecoilRoot>, document.getElementById("root"))
\n

2. Set the Atom

\n

Recoil calls this part as atom, where we set the global key, value.

\n
import { atom } from "recoil";\n\nconst age = atom({\n  key: "age", \n  default: 0  // default global value for age key\n});
\n

Now this atom will be accessible throughout the app.

\n

3. use the atom

\n

Now update your older code snippet.

\n
 const [age, setAge] = useState(0);
\n

to

\n
import { useRecoilState } from 'recoil'\nconst [ageState, setAge] = useRecoilState(age);
\n

For a Larger view, here is Full Code

\n
import { atom,useRecoilState } from 'recoil'\n\nconst age = atom({\n  key: "age", \n  default: 0  // default global value for age key\n});\n\nexport const AgeCalculator = () => {\nconst [ageState, setAge] = useRecoilState(age);\n}
\n

Quite easy. Isn't it?\nNow let's move to another part selectors.

\n

Selectors

\n

This is similar to how Redux manages states.

\n

if a value can be derived/computed from the state, then we can skip re initialize of an another separate state key, for that use selectors.

\n

1. set the selectors

\n

In the below example, we are getting isChild value from age key, then we can directly use selector instead of adding a new key or atom.

\n
import {selector} from 'recoil'\n\nconst isChild = selector({\n  key: "childage",\n  get: ({ get }) => {\n    const state = get(age);\n    return state < 10 ;\n  }\n});
\n

2. use the selectors

\n

Now will use the above-mentioned selector.

\n

below code snippet use age value to isChild.

\n
  const [ageState, setAge] = useRecoilState(age);\n\n  const value = useRecoilValue(isChild);
\n

For a larger view, here is Full Code

\n
import {selector, useRecoilState} from 'recoil' \n\nconst isChild = selector({\n  key: "childage",\n  get: ({ get }) => {\n    const state = get(age);\n    return state < 10 ;\n  }\n});\n\nexport const AgeCalculator = () => {\n    const [ageState, setAge] = useRecoilState(age);\n   const value = useRecoilValue(isChild);\n}
\n

That's all, Milord.

\n

Conclusion

\n

I hope you got why I am saying this as light.

\n

Recoil is looking relatively easy, promising, and early-stage, but again this is the next generation, and it will take time to get the own space in the community.

\n","frontmatter":{"date":"April 30, 2021","updated_date":null,"description":"Recoil is an experimental state management library and It provides several capabilities that are difficult to achieve with React alone.In this article we learn about the recoil.js, and how it is managing state in react.","title":"What is recoil.js and how it is managing in react?","tags":["JavaScript","React","Recoil"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/f37a15f3f8cda8461c5455bdd2895e0c/ee604/react.png","srcSet":"/static/f37a15f3f8cda8461c5455bdd2895e0c/69585/react.png 200w,\n/static/f37a15f3f8cda8461c5455bdd2895e0c/497c6/react.png 400w,\n/static/f37a15f3f8cda8461c5455bdd2895e0c/ee604/react.png 800w,\n/static/f37a15f3f8cda8461c5455bdd2895e0c/f3583/react.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"excerpt":"Introduction As we all know that Enums are very commonly used in the C# program. While using the Enums, we should also be aware of how the…","fields":{"slug":"/engineering/how-enum-tryparse-works-in-csharp/"},"html":"

Introduction

\n

As we all know that Enums are very commonly used in the C# program. While using the Enums, we should also be aware of how the values are parsed into the Enums. In my earlier article, I have talked about the How to Use Enum in C#.In this article, I will specifically talk about the mistake we can make while using the Enum.TryParse() method.

\n

Let's get started

\n

As we know Enum.Tryparse() method will give us the parsed Enum. Like in the below example

\n
public enum IdentityProtocols\n{\n    SAML,\n    OAuth,\n    OpenID\n}\nvar isEnumParsed=Enum.TryParse("0", true, out IdentityProtocols parsedEnumValue);\nConsole.WriteLine(isEnumParsed?parsedEnumValue.ToString():"Not Parsed");
\n

The above code will print the SAML because the enum is started by default with the value 0.

\n

What happens if we run the below code with the same Enum declaration?

\n
var isEnumParsed=Enum.TryParse("-1", true, out IdentityProtocols parsedEnumValue);\nConsole.WriteLine(isEnumParsed?parsedEnumValue.ToString():"Not Parsed");
\n

As per our understanding isEnumParsed variable should be false, and the above code should print Not Parsed as the value which we are passing in the method is not in the Enum declaration, right?

\n

But here is a catch, isEnumParsed variable have the true value, and the code will print -1.

\n

Why Enum.tryParse() parse int values?

\n

The default type of Enum in C# is int. That's why any valid integer values are parsed by the Enum.TryParse() method irrespective of those integer values are defined in the Enum or not.

\n

We can define the Enum with types like byte, sbyte, etc. Then the Enum.TryParse() will parse those values which will fall in that defined Enum type.

\n

How to overcome this behavior of Enum.TryParse()

\n

To overcome this behavior of Enum.TryParse() we can follow the below approaches.

\n

1. Using Enum.IsDefined() method with Enum.TryParse() method

\n
var isValidEnum = Enum.TryParse("-1", true, out IdentityProtocols parsedEnumValue) && Enum.IsDefined(typeof(IdentityProtocols), parsedEnumValue);\nConsole.WriteLine(isValidEnum ? parsedEnumValue.ToString(): "Not Parsed");
\n

In the above code Enum.IsDefined() will check that the value which we are getting from the Enum.TryParse() method is defined in the Enum declaration or not.

\n

That will give us the proper result, and the above code will print Not Parsed

\n

2.Using Enum.GetNames() method

\n
var value = "-1";\nvar identityProtocolsList = Enum.GetNames(typeof(IdentityProtocols)).ToList();\nConsole.WriteLine(identityProtocolsList.Contains(value) ? value : "Not Parsed");
\n

In this code, checking that value is present or not by getting all the Names from the enum declaration by using Enum.GetNames() method.

\n

This code will print Not Parsed

\n

Note: Here, we will not be able to parse any of the integer values. It will only check the values which are defined in the Enum declaration.

\n

Conclusion

\n

In this article, We have discussed the mistake we can make using the Enum.TryParse() method. This mistake can hurt and can abnormally terminate our program/application. We can use the ways I have mentioned in this article to overcome so that our program/application can run smoothly.

\n","frontmatter":{"date":"April 28, 2021","updated_date":null,"description":"In this article, I will talk about how Enum.TryParse() works in C# and mistake which we can make while using it.","title":"How Enum.TryParse() works in C#","tags":["C#","Enum"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/51a037c87d4168dfe8b48e7169c2e0ed/ee604/coverimage.png","srcSet":"/static/51a037c87d4168dfe8b48e7169c2e0ed/69585/coverimage.png 200w,\n/static/51a037c87d4168dfe8b48e7169c2e0ed/497c6/coverimage.png 400w,\n/static/51a037c87d4168dfe8b48e7169c2e0ed/ee604/coverimage.png 800w,\n/static/51a037c87d4168dfe8b48e7169c2e0ed/f3583/coverimage.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hemant Manwani","github":"hemant404","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":60,"currentPage":11,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}