{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/12","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"In this article, We will discuss the manipulation of DOM elements with Ref directly with React. React Framework builds your components and…","fields":{"slug":"/engineering/react-with-refs/"},"html":"

In this article, We will discuss the manipulation of DOM elements with Ref directly with React.

\n

React Framework builds your components and abstracts your code away from manipulation within the DOM but still leaves the door open for developers to access it. Reason are few cases where it might be necessary. That's why React provides an escape hatch know as refs.

\n

Refs are a function that use to access the DOM from components. You only need to attach a ref to the element in your application to provide access to it from anywhere within your component without making use of props and all.

\n

We can also use Refs to direct access to React elements and use callbacks with them.

\n

We should only use refs when the required interaction cannot be achieved using state and props.

\n

Use Refs

\n

We can use refs to do anything that needs to be manipulated in the DOM. Some good cases like focus, test selection, media playback, triggering mandatory animations, or integration with the third-party DOM library.

\n

Note: We should avoid using refs because it removes the purpose of using React. For example, If you want to show and hide a \tpopup component. We should use a boolean prop for it instead of manipulating dom.\n

\n

Creating Refs

\n

We can use React.createRef()method to create Refs, and then we can attach to a Dom element via the ref attribute after that, we can access and modify that element through the ref.

\n
class App extends React.Component {\n  constructor(props) {  \n    super(props);  \n    this.myRef = React.createRef();\n  }\n  render() {\n    return <div ref={this.myRef} />; \n  }\n}
\n

In above code, We created this.myRef in the constructor by calling React.createRef() method.

\n

Then in the render method , we attached the returned value to ref of the div element, a reference to the node becomes accessible at the current attribute of the ref.

\n

We should not use ref attribute on function components because they do not have instances.

\n

React will assign the current property with Dom element when component mount and assign null to it when component unmount.

\n

ref updates happen before componentDidMount or componentDidUpdate methods.

\n

We can pass refs as props to the component. Example:

\n
function MyCustomTextInput ({ myInputRef }) {  \n  return <input ref={myInputRef} />;  \n}\n\nclass App extends React.Component {  \n  constructor(props) {  \n    super(props);  \n    this.myInputRef = React.createRef();  \n  } \n  \n  componentDidMount() {  \n    this.myInputRef.current.focus();  \n  }\n  \n  render() {  \n    return <MyCustomTextInput inputRef={this.myInputRef} />;  \n  }\n}
\n

In above code, App passed its ref as props to MyCustomTextInput component.

\n

Callback Refs

\n

We can create ref using another way called callback refs; it gives us more fine-grain control over when refs are set and unset within the component.

\n

Instead of passing ref returned by createRef() method, we will pass a function to ref attribute.\nThe function receives React component instance or DOM element, which can be stored and accessed anywhere.

\n
class App extends React.Component {  \n  componentDidMount() {  \n    this.input.focus();  \n  } \n  \n  render() {  \n    return (    \n        <input ref={element => (this.input = element)} />;   \n    );  \n  }  \n}
\n

In the above code, React will call the ref callback t store the reference of the input element when the component mounts; then, it will focus the input element automatically and when the component unmounts, call it with null.

\n

We can pass callback refs between components . Example:

\n
function MyCustomTextInput({ inputRef }) {  \n  return <input ref={inputRef} />;  \n}\n\nclass App extends React.Component {  \n  componentDidMount() {  \n    this.myInputElement.focus();  \n  } \n  render() {  \n    return <MyCustomTextInput inputRef={el => (this.myInputElement = el)} />;  \n  } \n}
\n

In the above code, We passed the function to inputRef and access it in App component so we can call focus on it to focus the input element.

\n

Caveats with callback refs

\n

Callback refs are calling two times during updates if they are defined as an inline function. This is because a new instance of the function is created with each render. We can avoid this by calling it a method of a class.

\n

To understand more about React refs. Read Refs and the DOM

\n","frontmatter":{"date":"April 16, 2021","updated_date":null,"description":"Learn about manipulation of DOM elements with Ref directly with React","title":"React with Ref","tags":["React","Refs","DOM"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/0e4deace8ac6b8fceb2ca7ce559fc393/ee604/title-image.png","srcSet":"/static/0e4deace8ac6b8fceb2ca7ce559fc393/69585/title-image.png 200w,\n/static/0e4deace8ac6b8fceb2ca7ce559fc393/497c6/title-image.png 400w,\n/static/0e4deace8ac6b8fceb2ca7ce559fc393/ee604/title-image.png 800w,\n/static/0e4deace8ac6b8fceb2ca7ce559fc393/f3583/title-image.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"excerpt":"Hello Guys!!!, today we will be implemented the authentication in the Angular 2+ application within 5 mins using LoginRadius. Configuring…","fields":{"slug":"/engineering/implementing-authentication-in-angular-2-plus-with-loginradius-cli/"},"html":"

Hello Guys!!!, today we will be implemented the authentication in the Angular 2+ application within 5 mins using LoginRadius.

\n

Configuring LoginRadius

\n

To implement authentication in the angular app first let's start with registering in the Loginradius and creating the application using LoginRadius CLI.

\n

Why LoginRadius CLI

\n

Developer Experience plays a crucial role for us. We always think about the ways we can minimize the juggling between a quickstart tutorial, dashboard, and terminal. The LoginRadius CLI will simplify your flow by just using some simple commands to register, create an application, log in, etc., and enables you to get the job done in very little time without leaving the terminal.

\n

LoginRadius CLI Setup

\n

Mac or Linux

\n\n

Other Platforms

\n\n

After installing the CLI, you can register into the LoginRadius via the below command.

\n
$ lr register
\n

This command will open the Loginradius in the browser to register yourself and create the app.

\n

\n \n \n

\n

Once you successfully register you will be able to see the below message on the browser, you can close the tab and come back to the CLI.

\n
You are Successfully Authenticated, Kindly Close this browser window and go back to CLI.
\n

Get Your Application API Credentials

\n

Once you login/register using the CLI, You can now run the lr get config command to get your API credentials.

\n

\n \n \n

\n

Configuring Callback URLs

\n

A callback URL is a URL in your application where LoginRadius redirects the user after they have authenticated. The callback URL for your app must be added to your Application Configuration. If this field is not set, users will be unable to log in to the application and get an error.

\n

\n \n \n

\n

To get the list of whitelisted domains, you can run lr get domain command from the cmd prompt. And to add a domain in the list using lr add domain command.

\n
\n

If you are following this tutorial, you should set the http://localhost as a whitelisted domain. Check the below image for how to add the domain using LoginRadius CLI.

\n
\n

\n profile.component.ts file in the app/profile folder generated by ng CLI.

\n
import { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\nimport config from '../config';\nimport { ProfileService } from '../profile.service';\nimport { Profile } from './profile';\n\n@Component({\n  selector: 'app-profile',\n  templateUrl: './profile.component.html',\n  styleUrls: ['./profile.component.scss'],\n})\nexport class ProfileComponent implements OnInit {\n  profile: Profile;\n  loginRadius: any;\n\n  constructor(private configService: ProfileService, private router: Router) {\n    const token = localStorage.getItem('token');\n  }\n\n  ngOnInit(): void {\n    this.configService.getProfile().subscribe(\n      (data: Profile) => {\n        this.profile = { ...data };\n      },\n      (err: any) => {\n        if (err.status === 403) {\n          localStorage.removeItem('token');\n          this.router.navigate(['login']);\n        }\n      }\n    );\n  }\n\n  logout() {\n    localStorage.removeItem('token');\n    window.location.href = `https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=logout`;\n  }\n}
\n

Similary add the below code to profile.component.html file.

\n
<div class="container">\n  <h1>Hello {{ profile?.Email[0]?.Value }}</h1>\n  <button (click)="logout()">LogOut</button>\n</div>
\n

The profile component will call the LoginRadius API to fetch the profile details and store them in the profile variable. Using that profile, we are displaying the email in the HTML.\nIt also has the logout() function where we pass the action=logout in the LoginRadius Auth Page, which will help us log out the user.

\n

In the profile component, you can see the two things are used.

\n\n

You can generate the service in the angular using ng CLI by using this command ng generate service profile which will create profile.service.ts with required configuration. Add the below code in the profile.service.ts file.

\n
import { HttpClient } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport config from './config';\nimport { Profile } from './profile/profile';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ProfileService {\n\n  constructor(private http: HttpClient) {}\n\n  getProfile() {\n    // now returns an Observable of Config\n    return this.http.get<Profile>(\n      `https://api.loginradius.com/identity/v2/auth/account?access_token=${localStorage.getItem(\n        'token'\n      )}&apikey=${config.API_KEY}`\n    );\n  }\n}
\n

We will use the HTTP module to call the Rest API so let's add the HttpClientModule in the app.module.ts file.

\n
import { HttpClientModule } from '@angular/common/http';\n...\n\n@NgModule({\n  imports: [\n    ...\n    HttpClientModule\n    ...\n  ],\n})\nexport class AppModule { }
\n

Now let's create a Profile model which will be used for storing the user profile.

\n\n

Add Routes for Login and profile.

\n

Lets modify the app-routing.module.ts and add the below Routes in it.

\n
import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { AppComponent } from './app.component';\nimport { LoginComponent } from './login/login.component';\nimport { ProfileComponent } from './profile/profile.component';\n\nconst routes: Routes = [\n  {\n    path: 'login',\n    component: LoginComponent\n  },\n  { path: 'profile',\n    component: ProfileComponent\n  }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }
\n

Finally, to gather all, we need to modify the app.component.ts and add the routing logic.

\n
import { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit {\n  constructor(private router: Router) {}\n\n  ngOnInit() {\n    if (window.location.pathname === "/") {\n      if (localStorage.getItem('token')) {\n        this.router.navigate(['/profile']);\n      } else {\n        this.router.navigate(['/login']);\n      }\n    }\n  }\n}
\n

And add the router-outlet to the app.component.html file.

\n
<router-outlet></router-outlet>
\n
\n

You can find the full code in github

\n
\n

Testing the application

\n

Run ng serve to start the local server, and you will be able to see the output on locahost:4200.

\n

Adding Login Methods

\n

You can configure the LoginRadius Auth Page by adding social login methods like Facebook, Google, etc. To add the login method, you can use the command lr get social and lr add social command. Check the below image on how to add the social configuration.

\n

\n \n \n

\n

After adding, visit the LoginRadius Auth Page either by visiting locahost:4200 and log out. Or using the command lr demo. You will find the new login method added.

\n

\n \n \n

\n

Customizing theme for LoginRadius Auth Page

\n

LoginRadius Dashboard Support three pre-defined themes for you. You can check out the Theme Customization section in the LoginRadius Dashboard for all the customization options available.

\n

\n \n \n

\n

You can also get/set your current theme using LoginRadius CLI by using the commands like lr get theme and lr set theme.

\n

\n \n \n

\n

Contributing to LoginRadius CLI

\n

The LoginRadius CLI is opensourced in the LoginRadius Organization and you can contribute to it if you find any bugs or improvement by following the contributing guidelines. You can also checkout our open source page if you wish to contribute more in LoginRadius.

\n

Your Take

\n

With the help of LoginRadius CLI, you can setup the authentication for your Angular application in just 5 minutes. LoginRadius will take care of all the authentication-related stuff for your application so that you can focus on your application development.

\n

I hope you like this tutorial. Kindly provide feedback suggestions in the comment section below.

\n

Cheers!!!

\n","frontmatter":{"date":"April 14, 2021","updated_date":null,"description":"In this tutorial, you will learn about how to implement the authentication for Angular 2+ application in just 5 mins. We will be using LoginRadius for authentication.","title":"Implement Authentication in Angular 2+ application using LoginRadius CLI in 5 mins","tags":["Authentication","Angular","CLI","LoginRadius CLI"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/7c2ac2ca4ca6e495e226891293c79e92/14b42/angulat_demo_auth.jpg","srcSet":"/static/7c2ac2ca4ca6e495e226891293c79e92/f836f/angulat_demo_auth.jpg 200w,\n/static/7c2ac2ca4ca6e495e226891293c79e92/2244e/angulat_demo_auth.jpg 400w,\n/static/7c2ac2ca4ca6e495e226891293c79e92/14b42/angulat_demo_auth.jpg 800w,\n/static/7c2ac2ca4ca6e495e226891293c79e92/47498/angulat_demo_auth.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}},{"node":{"excerpt":"How Git Local Repository Works Let's understand how git set up a local repository\nOnce we initialize or clone any git project that will set…","fields":{"slug":"/engineering/how-git-local-repository-works/"},"html":"

How Git Local Repository Works

\n

Let's understand how git set up a local repository\nOnce we initialize or clone any git project that will set up a local project environment.

\n

that whole environment will look like the below picture

\n

\n \n \n

\n

Project Folder: The main folder consists of a workspace and local repository

\n

Work Directory: Inside Project Folder where we actually work,  we keep all files and perform many operations like addition, update, deletion of files

\n

Local Repository: Here we don't actually change anything, this is handled automatically by git. this consists staging area, commit history, stash area etc.

\n

Let's get into it step by step and see how we perform command or action and behind the scene, git do its own activity.

\n\n

Hope this makes clear how git handling things at the local repository.

\n
\n

Note: Click here to learn how you can automate your Git workflows with Hooks

\n
\n","frontmatter":{"date":"April 12, 2021","updated_date":null,"description":"In this article, I will talk about how Git Local Repository Works","title":"How Git Local Repository Works","tags":["GIT"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/326443284e0af982c65082fa6f3a393d/ee604/git.png","srcSet":"/static/326443284e0af982c65082fa6f3a393d/69585/git.png 200w,\n/static/326443284e0af982c65082fa6f3a393d/497c6/git.png 400w,\n/static/326443284e0af982c65082fa6f3a393d/ee604/git.png 800w,\n/static/326443284e0af982c65082fa6f3a393d/f3583/git.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"excerpt":"Do you have a WordPress site? Do you run a business with hundreds or thousands of users? Then, you might want your consumers to seamlessly…","fields":{"slug":"/engineering/sso-for-wordpress-site/"},"html":"

Do you have a WordPress site?

\n

Do you run a business with hundreds or thousands of users?

\n

Then, you might want your consumers to seamlessly move between your multiple sites without them having to re-enter their credentials, right?\nAsking them to re-authenticate is a cumbersome process. This is where SSO helps you!

\n

Businesses thrive by providing a seamless experience to their consumers. So, yes! Whether you are running an ecommerce business, travel, hospitality, or even blogging, you can only attract consumers to provide them with frictionless experiences.

\n

What is SSO

\n

Single Sign-On (SSO) refers to the authentication process that allows your customers to access multiple applications with a single set of login credentials and an active login session.

\n

SSO - For a seamless user experience

\n

Having SSO for your WordPress sites will boost the experience of the consumer spending time on your site. It is relatively effortless nowadays to build a fancy-looking site that will attract consumers at first.\nBut, for a site to gain traction and make those consumers return to your site will be a challenge.\nFor example, by offering a frictionless experience and having no barriers like complicated registration forms, asking not to sign in repeatedly will make your site stand out over your competitors.\nSSO helps your consumers navigate across your multiple web properties. Once the user is logged in, they don't have repeated demands for sign-ins. The experience is frictionless.

\n

SSO with LoginRadius

\n

Adding SSO to your existing web properties can be a challenge. LoginRadius WordPress Plugin is an out-of-box solution that replaces the WordPress default login form with the LoginRadius JS forms.

\n

With minimal time and effort, you can add SSO to your existing sites leveraging LoginRadius WordPress Plugin and gain access to login data via our dashboard. This will help you to boost conversion and also reduce the time to onboard consumers.

\n

We have detailed documentation.

\n

It's Here to Help Developers

\n

LoginRadius aims to help developers, web development agencies, and businesses to add SSO in the simplest way possible.\nLoginRadius allows you to store your consumer profiles securely and add our customizable login interfaces into your applications in minutes. By enabling our SSO, you can create a frictionless user experience, thus boosting your conversion rate.

\n

\n \n

\n

Your Take?

\n

We always want to hear from our customers. Like many others in the market, we want developers to install it and offer feedback. This feedback will help us enhance the plugin and make it more user-friendly.

\n

\n \n \n

\n","frontmatter":{"date":"March 26, 2021","updated_date":null,"description":"Providing a seamless experience for your consumers is non-negotiable, especially when running multiple WordPress sites. Single Sign-On provides that experience to your users. Here's how to provide a frictionless experience to your users.","title":"How to add SSO for your WordPress Site!","tags":["WordPress","SSO","Single Sign On"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5151515151515151,"src":"/static/b9dbf4785b8c5c64f26df5ea43566dbb/33aa5/sso-wp.jpg","srcSet":"/static/b9dbf4785b8c5c64f26df5ea43566dbb/f836f/sso-wp.jpg 200w,\n/static/b9dbf4785b8c5c64f26df5ea43566dbb/2244e/sso-wp.jpg 400w,\n/static/b9dbf4785b8c5c64f26df5ea43566dbb/33aa5/sso-wp.jpg 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Saikiran Babladi","github":null,"avatar":null}}}},{"node":{"excerpt":"The Authorization Code Flow for OAuth 2.0 is targeted at web applications that have a server-side component, which allows the client secret…","fields":{"slug":"/engineering/authorization-code-flow-oauth/"},"html":"

The Authorization Code Flow for OAuth 2.0 is targeted at web applications that have a server-side component, which allows the client secret for the authorization server to be kept secret (confidential client). Typically, authorization servers will require a secret to be used when making authentication requests if more sensitive data is wanted, such as personal data or refresh tokens. Without it, you would be restricted to following the Implicit flow for OAuth 2.0, which only returns an access token from the authorization server.

\n

In the Authorization Code flow, the server-side component of the web application can freely manage the user's session upon authenticating with the authorization server without revealing anything about the authorization server's response (such as personal data or refresh token) to the end-user.

\n

Overview

\n

\n \n","frontmatter":{"date":"March 24, 2021","updated_date":null,"description":"This article will help you to understand the OAuth 2.0 authorization code flow.","title":"Guide to Authorization Code Flow for OAuth 2.0","tags":["Oauth","Authorization Code Flow"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.492537313432836,"src":"/static/70f6529baa97e7fead70e053fa796bcd/14b42/unsplash.jpg","srcSet":"/static/70f6529baa97e7fead70e053fa796bcd/f836f/unsplash.jpg 200w,\n/static/70f6529baa97e7fead70e053fa796bcd/2244e/unsplash.jpg 400w,\n/static/70f6529baa97e7fead70e053fa796bcd/14b42/unsplash.jpg 800w,\n/static/70f6529baa97e7fead70e053fa796bcd/47498/unsplash.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nick Chim","github":"nickc95","avatar":null}}}},{"node":{"excerpt":"Overview UniFi is a community of wireless access points, switches, routers, controller devices, VoIP phones, and access control products. It…","fields":{"slug":"/engineering/introduction-to-unifi-ubiquiti-network/"},"html":"

Overview

\n

UniFi is a community of wireless access points, switches, routers, controller devices, VoIP phones, and access control products. It can be used for the corporate network and also for the home network. An Unifi network controller manages all the equipment in the UNIFI network. The best part of the Unifi network is that its controller can be hosted online with a Ubiquiti account using an Unifi Cloud Key, giving online access to the network to manage the Unifi devices and the connected client so can handle most of the operations remotely.

\n

Common Network Architecture

\n

\n \n \n

\n

Benefits of Ubiquiti UniFi Network

\n
    \n
  1. Easy Deployment
    2. \n
\n

Having an UniFi Controller on the cloud allows us easy deployment of hardware. On any UniFi network where we have UniFi Security Gateway (USG) Installed, any UniFi equipment plugged into the network is immediately recognized by the Unifi Controller and is also ready for adoption. Whenever the controller adopts the device, the device receives the correct configuration and comes up in the network within a short period.

\n
    \n
  1. Reduced Operating and Hardware Cost
    2. \n
\n

UniFi devices are ideal and helpful for most small and startups businesses and even for some medium-sized businesses because they don't need the extra cost to buy high-priced products like cisco enterprise equipment. Businesses can achieve almost the same performance with Ubiquiti products. Many products have advanced enterprise hardware that is not even needed, so Ubiquiti is useful for smaller businesses that want enterprise-grade equipment.

\n
    \n
  1. Simplified Length of Service
    2. \n
\n

UniFi products are built to be controlled remotely and its easy to leading and managing remote teams. All the Unifi products are designed with upgrades in mind, and they keep getting updates over some time for the new feature upgradation and the bug fixes.

\n
    \n
  1. Total Visibility
    2. \n
\n

In the UniFi network, the user can see everything going on in their network, from connected clients, total traffic to speed and throughput tests to information broken down into individual protocol using deep packet inspection available right in the UniFi Controller. UniFi Controller offers information about your network, how it is being used, and that insight can optimize the network for better efficiency.

\n

Conclusion

\n

Having an Unifi network at the office or home can be more satisfying in deploying the devices and monitoring the network. An Unifi controller gives transparency to the network.

\n","frontmatter":{"date":"March 15, 2021","updated_date":null,"description":"Getting started with Unifi Network for getting the freedom of remote management of network devices. Here's what you need to know about UniFi network.","title":"Introduction to UniFi Ubiquiti Network","tags":["Network","Unifi Networking","Remote Team Management","Startups Solutions"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/1d1284250801614add7b8a6f685aa15b/ee604/cover.png","srcSet":"/static/1d1284250801614add7b8a6f685aa15b/69585/cover.png 200w,\n/static/1d1284250801614add7b8a6f685aa15b/497c6/cover.png 400w,\n/static/1d1284250801614add7b8a6f685aa15b/ee604/cover.png 800w,\n/static/1d1284250801614add7b8a6f685aa15b/f3583/cover.png 1200w,\n/static/1d1284250801614add7b8a6f685aa15b/5707d/cover.png 1600w,\n/static/1d1284250801614add7b8a6f685aa15b/b135e/cover.png 6016w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Roshan Jangid","github":"roshan-jangid","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":66,"currentPage":12,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}