![\"App](\"https://paper-attachments.dropbox.com/s_E8FB3BC64D80223D4CC4AFEEE119F2426D27A7EBE018696513C17DED12022079_1622019813698_AppWorkflow.png\")
In this blog post, I will write a step-by-step tutorial to add Authentication to the Play Framework Application with OIDC and LoginRadius. I will be using pac4j and it's play-pac4j integration in this tutorial. Before jumping into the tutorial, let's learn about few concepts.
\nOIDC is an authentication protocol that allows users to verify their identity when they are trying to access a protected HTTPS endpoint. OIDC is an evolutionary development of ideas implemented earlier in OAuth and OpenID.
\nOpenID Connect allows clients to request and receive information about authenticated sessions and end-users. It allows all types of clients, including
\nYou can find out more details about OIDC here
\nPlay Framework is an open-source web application framework that follows the model–view–controller architectural pattern. It is written in Scala and usable from other programming languages that are compiled to JVM Bytecode.
\nIt makes it easy to build web applications with Java & Scala. Play is based on a lightweight, stateless, web-friendly architecture. Built on Akka, Play provides predictable and minimal resource consumption (CPU, memory, threads) for highly-scalable applications.
\npac4j is an easy and powerful security engine for Java to authenticate users, get their profiles and manage authorizations in order to secure web applications and web services.
\nIt provides a comprehensive set of concepts and components. It is based on Java and available under the Apache 2 license. It is available for most frameworks/tools and supports most authentication/authorization mechanisms.
\npac4j is supported with most of the Java frameworks like
\nThere are multiple options you can get started with the Play framework.
\nsbt.For this tutorial, I will be using creating a new play project using sbt.
brew install sbtYou can find Installation steps for Windows and Linux here.
\nFor this tutorial, I will be using
\nCreate a new java play project using the following command
\nsbt new playframework/play-java-seed.g8The above command will prompt you to fill in the project name and project package structure in organization as shown below.
[info] welcome to sbt 1.5.3 (Oracle Corporation Java 11.0.2)\n[info] set current project to new (in build file:/private/var/folders/_9/rcqwq2vx1cl_1sc4xdhb5_5c0000gn/T/sbt_661d1bf7/new/)\n\nThis template generates a Play Java project\n\nname [play-java-seed]: loginradius-play-oidc\norganization [com.example]: com.loginradius.developer\n\nTemplate applied in /Users/vishnuchilamakuru/self/longinradius/./loginradius-play-oidcNow that the project is created with a base template. You can test it by running the project using the following command from loginradius-play-oidc folder.
sbt runNow visit http://localhost:9000, and it should look like this.
build.sbtAdd pac4j dependencies, Java 11 as required, and target version to compile the project in build.sbt.
name := """loginradius-play-oidc"""\norganization := "com.loginradius.developer"\n\nversion := "1.0-SNAPSHOT"\n\nlazy val root = (project in file(".")).enablePlugins(PlayJava)\n\nscalaVersion := "2.13.6"\n\ninitialize := {\n val _ = initialize.value // run the previous initialization\n val required = "11"\n val current = sys.props("java.specification.version")\n assert(current == required, s"Unsupported JDK: java.specification.version $current != $required")\n}\n\nscalacOptions += "-target:jvm-11"\n\njavacOptions ++= Seq("-source", "11", "-target", "11")\n\n\nlibraryDependencies ++= Seq(\n guice,\n ehcache,\n "org.pac4j" %% "play-pac4j" % "11.0.0-PLAY2.8",\n "org.pac4j" % "pac4j-oidc" % "5.1.0",\n "com.typesafe.play" % "play-cache_2.13" % "2.8.8",\n "com.fasterxml.jackson.module" %% "jackson-module-scala" % "2.12.3"\n)Create app/modules/SecurityModule.java. This class configures OIDC, sets up a secure HttpActionAdapter, and registers callback and logout controllers.
package modules;\n\nimport com.google.inject.AbstractModule;\n\nimport com.nimbusds.oauth2.sdk.ParseException;\nimport com.nimbusds.oauth2.sdk.auth.ClientAuthenticationMethod;\nimport com.nimbusds.openid.connect.sdk.op.OIDCProviderMetadata;\nimport com.typesafe.config.Config;\nimport net.minidev.json.JSONObject;\nimport org.pac4j.core.authorization.authorizer.RequireAnyRoleAuthorizer;\nimport org.pac4j.core.client.Clients;\nimport org.pac4j.core.context.session.SessionStore;\nimport org.pac4j.oidc.client.OidcClient;\nimport org.pac4j.oidc.config.OidcConfiguration;\nimport org.pac4j.play.CallbackController;\nimport org.pac4j.play.LogoutController;\nimport org.pac4j.play.http.PlayHttpActionAdapter;\nimport org.pac4j.play.store.PlayCacheSessionStore;\nimport play.Environment;\n\nimport java.util.Optional;\n\npublic class SecurityModule extends AbstractModule {\n\n private final Config configuration;\n\n public SecurityModule(final Environment environment, final Config configuration) {\n this.configuration = configuration;\n }\n\n @Override\n protected void configure() {\n\n bind(SessionStore.class).to(PlayCacheSessionStore.class);\n\n final OidcConfiguration oidcConfiguration = new OidcConfiguration();\n oidcConfiguration.setDiscoveryURI(configuration.getString("oidc.discoveryUri"));\n oidcConfiguration.setClientId(configuration.getString("oidc.clientId"));\n oidcConfiguration.setSecret(configuration.getString("oidc.clientSecret"));\n oidcConfiguration.setClientAuthenticationMethod(ClientAuthenticationMethod.CLIENT_SECRET_BASIC);\n\n addProviderMetadata(oidcConfiguration);\n\n final OidcClient oidcClient = new OidcClient(oidcConfiguration);\n oidcClient.addAuthorizationGenerator((ctx, session, profile) -> {\n profile.addRole("ROLE_ADMIN");\n return Optional.of(profile);\n });\n\n final String baseUrl = configuration.getString("baseUrl");\n final Clients clients = new Clients(baseUrl + "/callback", oidcClient);\n\n final org.pac4j.core.config.Config config = new org.pac4j.core.config.Config(clients);\n config.addAuthorizer("admin", new RequireAnyRoleAuthorizer("ROLE_ADMIN"));\n config.setHttpActionAdapter(PlayHttpActionAdapter.INSTANCE);\n bind(org.pac4j.core.config.Config.class).toInstance(config);\n\n // callback\n final CallbackController callbackController = new CallbackController();\n callbackController.setDefaultUrl("/");\n bind(CallbackController.class).toInstance(callbackController);\n\n // logout\n final LogoutController logoutController = new LogoutController();\n logoutController.setDefaultUrl("/?defaulturlafterlogout");\n bind(LogoutController.class).toInstance(logoutController);\n\n }\n\n private void addProviderMetadata(OidcConfiguration oidcConfiguration) {\n JSONObject jsonObj = new JSONObject();\n jsonObj.appendField("token_endpoint", configuration.getString("oidc.tokenUri"));\n final OIDCProviderMetadata providerMetaData;\n try {\n providerMetaData = OIDCProviderMetadata.parse(jsonObj);\n oidcConfiguration.setProviderMetadata(providerMetaData);\n } catch (ParseException e) {\n e.printStackTrace();\n }\n }\n}In app/controllers/HomeController.java add the following methods
After adding the above methods HomeController.java looks like this.
package controllers;\n\nimport com.google.inject.Inject;\nimport org.pac4j.core.context.session.SessionStore;\nimport org.pac4j.core.profile.ProfileManager;\nimport org.pac4j.core.profile.UserProfile;\nimport org.pac4j.play.context.PlayContextFactory;\nimport org.pac4j.play.java.Secure;\nimport org.pac4j.play.store.PlayCacheSessionStore;\nimport play.mvc.*;\n\nimport java.util.ArrayList;\nimport java.util.List;\n\n/**\n * This controller contains an action to handle HTTP requests\n * to the application's home page.\n */\npublic class HomeController extends Controller {\n\n /**\n * An action that renders an HTML page with a welcome message.\n * The configuration in the <code>routes</code> file means that\n * this method will be called when the application receives a\n * <code>GET</code> request with a path of <code>/</code>.\n */\n public Result index() {\n return ok(views.html.index.render());\n }\n\n @Secure(clients = "OidcClient")\n public Result oidcIndex(Http.Request req) {\n return protectedIndex(req);\n }\n\n public Result protectedIndex(Http.Request req) {\n return ok(views.html.protectedindex.render(getProfiles(req)));\n }\n\n @Inject\n private SessionStore sessionStore;\n\n private List<UserProfile> getProfiles(Http.Request req) {\n final ProfileManager profileManager = new ProfileManager(PlayContextFactory.INSTANCE.newContext(req), sessionStore);\n final List<UserProfile> profiles = new ArrayList<>();\n if (profileManager.getProfile().isPresent()) {\n profiles.add(profileManager.getProfile().get());\n }\n return profiles;\n }\n\n}app/views/index.scala.html as follows to add the link protected by OIDC authentication.@()\n\n@main("Welcome to Play") {\n <h1>Welcome to Play!</h1>\n\n <a href="oidc/index.html">Protected URL by OIDC</a>\n}app/views/protectedindex.scala.html with the following content below. This page will be shown after Successful Login using OIDC in LoginRadius.@(profileList: java.util.List[org.pac4j.core.profile.UserProfile])\n@import scala.collection.JavaConverters._\n@profiles() = { @profileList.toList }\n<h1>Protected Area</h1>\n<a href="..">Back</a>\n<ul>\n <li><a href="/logout?url=/?forcepostlogouturl">Logout</a></li>\n</ul>\n\n<p>\n profiles: @profiles\n</p>Now we already added methods in HomeController.java and configured callback, logout controllers in SecurityModule.java. Let's configure the routes to map to these methods in conf/routes.
conf/routes will look like this.# Routes\n# This file defines all application routes (Higher priority routes first)\n# ~~~~\n\n# An example controller showing a sample home page\nGET / controllers.HomeController.index\nGET /oidc/index.html controllers.HomeController.oidcIndex(request: Request)\nGET /protected/index.html controllers.HomeController.protectedIndex(request: Request)\nGET /callback @org.pac4j.play.CallbackController.callback(request: Request)\nPOST /callback @org.pac4j.play.CallbackController.callback(request: Request)\nGET /logout @org.pac4j.play.LogoutController.logout(request: Request)\n\n\n# Map static resources from the /public folder to the /assets URL path\nGET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)Finally, configure the variables mentioned in SecurityModule.java in conf/application.conf as follows.
play {\n modules {\n enabled += modules.SecurityModule\n }\n}\n\nbaseUrl = "http://localhost:9000"\n\noidc.discoveryUri = "https://cloud-api.loginradius.com/sso/oidc/v2/{loginradius-site-name}/{loginradius-app-name}/.well-known/openid-configuration"\noidc.clientId = "{clientId}"\noidc.clientSecret = "{clientSecret}"\noidc.tokenUri = "https://cloud-api.loginradius.com/sso/oidc/v2/{loginradius-site-name}/token"Login to your LoginRadius account or signup here if you don't have one.
\nOnce you log in you can see by default, one application will be created for you. Otherwise, you can create a new application here from the following screen by clicking New App.
I will be using the existing application itself for this demo as I am using a free plan. In the free plan, you can create only one application (no need for card details).
\nUpgrade your application subscription to the Developer Pro Plan to configure OIDC. (Developer Pro Plan is available with 21 days trial).
Now click on Select & Configure on your application and navigate to the Integration Section and Configure Open ID configuration. You can find step-by-step details to configure OIDC here.
Once you configure these conf/application.conf will look something like this.
# This is the main configuration file for the application.\n# https://www.playframework.com/documentation/latest/ConfigFile\n\nplay {\n modules {\n enabled += modules.SecurityModule\n }\n}\n\nbaseUrl = "http://localhost:9000"\n\noidc.discoveryUri = "https://cloud-api.loginradius.com/sso/oidc/v2/dev-svv3qlcj2y/pac4j-play-loginradius-demo/.well-known/openid-configuration"\noidc.clientId = "8ce24413-9b7e-4282-9f5b-e0e5ec13a42a"\noidc.clientSecret = "c9c61f6e-325f-40d6-89fd-696d17f970eb"\noidc.tokenUri = "https://cloud-api.loginradius.com/sso/oidc/v2/dev-svv3qlcj2y/token"\n# Site Name - dev-svv3qlcj2y\n# App Name - pac4j-play-loginradius-demoLet's run our application using sbt clean run and visit http://localhost:9000. The Home page will look like this.
Now click on the protected url by OIDC link on the home page that will redirect you to the LoginRadius Auth Page (IDX), which you configured.
On successful login from the above step, you will be redirected to the protectedindex.scala.html page.
play-pac4j provides out of the box LogoutController which can be used to handle logout flows. It has logout functionality which has the logout logic implementation to clear the session. Below is the sample logout functionality from org.pac4j.play.LogoutController play-pac4j module.
public CompletionStage<Result> logout(final Http.Request request) {\n\n final HttpActionAdapter bestAdapter = FindBest.httpActionAdapter(null, config, PlayHttpActionAdapter.INSTANCE);\n final LogoutLogic bestLogic = FindBest.logoutLogic(logoutLogic, config, DefaultLogoutLogic.INSTANCE);\n\n final WebContext context = FindBest.webContextFactory(null, config, PlayContextFactory.INSTANCE).newContext(request);\n\n return CompletableFuture.supplyAsync(() -> (Result) bestLogic.perform(context, sessionStore, config, bestAdapter, this.defaultUrl,\n this.logoutUrlPattern, this.localLogout, this.destroySession, this.centralLogout), ec.current());\n }So to use this LogoutController, we just need to initialize it and define logout route for the same in our routes. We already initialized LoginController in SecurityModule.java.
logout action. // logout\n final LogoutController logoutController = new LogoutController();\n logoutController.setDefaultUrl("/?defaulturlafterlogout");\n bind(LogoutController.class).toInstance(logoutController);/logout Route using LogoutController in conf/routes.GET /logout @org.pac4j.play.LogoutController.logout(request: Request)On Clicking logout in our application, the session will be cleared and you will be redirected to the Home page based on our configuration.
You can see the full source code for the application developed in this tutorial on GitHub.
\n","frontmatter":{"date":"June 25, 2021","updated_date":null,"description":"Learn how to integrate play-pac4j and use its OIDC support to authenticate with LoginRadius using JAVA play framework.","title":"Add Authentication to Play Framework With OIDC and LoginRadius","tags":["OIDC","Java","pac4j","Play Framework","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/7fda86ee912dfb6374d4838c3062813c/ee604/pac4j-authentication.png","srcSet":"/static/7fda86ee912dfb6374d4838c3062813c/69585/pac4j-authentication.png 200w,\n/static/7fda86ee912dfb6374d4838c3062813c/497c6/pac4j-authentication.png 400w,\n/static/7fda86ee912dfb6374d4838c3062813c/ee604/pac4j-authentication.png 800w,\n/static/7fda86ee912dfb6374d4838c3062813c/db955/pac4j-authentication.png 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vishnu Chilamakuru","github":"vishnuchilamakuru","avatar":null}}}},{"node":{"excerpt":"There is an advanced feature of React that it can write renderers for multiple different env. Let discuss a few of them. React-Figma This is…","fields":{"slug":"/engineering/react-renderer/"},"html":"There is an advanced feature of React that it can write renderers for multiple different env. Let discuss a few of them.
\nThis is a Renderer for Figma. It can use React components as a design source.
\nSample code with react-figma:
\nimport * as React from 'react';\nimport { Page, View, Text } from 'react-figma';\n\nexport const App = () => {\n return (\n <Page name="My Resume" isCurrent>\n <View>\n <View style={{ width: 200, height: 100, backgroundColor: '#dd423a' }} /> <Text style={{ color: 'white' }}>Hi, There</Text>\n </View>\n </Page>\n );\n};Nowadays, Figma is the most popular design tool, similar renderers available as well: react-sketchapp for Sketch, react-xd for Adobe XD.
A device like Arduino can be operated by React components.
\nLet's checkout demo code :
\nimport React from 'react';\nimport ReactHardware, {Led} from 'react-hardware';\n\nconst App = () => {\n const [ledStage, setLedStage] = useState(false);\n\n useEffect(() => {\n setInterval(() => {\n setLedStage(prev => !prev);\n }, 2000);\n }, []);\n\n return <Led pin={13} value={ledStage ? 255 : 0} />\n}\nconst PORT = 'dev/tty.usbmodem1411';\nReactHardware.render(<App />, PORT);Another React solution for CLIs. It allows you to run, build and test your CLI output through components:
\nThe code of the demo:
\nconst Raiser = () => {\n const [i, setI] = useState(0);\n\n useEffect(() => {\n setInterval(() => {\n setI(prev => prev + 1);\n }, 200);\n }, []);\n\n return <Color>\n Increased by {i} \n\t</Color>;\n}Ink is a popular one that is used by libraries such a Gatsby, Parcel, Yarn 2, etc.\nreact-blessed is one of the similar libraries.
This is a great React renderer for threejs on the react-native and web.
\nLet's see a sample code:
\nimport ReactDOM from 'react-dom'\nimport React, { useRef, useState } from 'react'\nimport { Canvas, useFrame } from 'react-three-fiber'\n\nfunction MyFrame(props) {\n const Ref = useRef()\n const [hover, setOnHover] = useState(false)\n const [enable, setEnable] = useState(false)\n\n useFrame(() => (Ref.current.rotation.x = Ref.current.rotation.y += 0.01))\n\n return (\n <Ref\n {...props}\n ref={Ref}\n scale={enable ? [1.5, 1.5, 1.5] : [1, 1, 1]}\n onClick={(e) => setEnable(!enable)}\n onPointerOver={(e) => setOnHover(true)}\n onPointerOut={(e) => setOnHover(false)}>\n <boxBufferGeometry args={[1, 1, 1]} />\n <meshStandardMaterial color={hover ? 'hotpink' : 'orange'} />\n </Ref>\n )\n}\n\nReactDOM.render(\n <Canvas>\n <pointLight position={[10, 10, 10]} />\n <MyFrame position={[-3.2, 0, 0]} />\n <MyFrame position={[2.2, 0, 0]} />\n </Canvas>,\n document.getElementById('root')\n)The library has a great ecosystem along with packages such as react-three-flex ,react-xr, react-postprocessing , etc.
A renderer for React that render nothing.
\nimport React, { useState, useEffect } from "react"\nimport { render } from "react-nil"\nfunction MyComponent() {\n const [active, set] = useState(false)\n useEffect(() => void setInterval(() => set((active) => !active), 1000), [])\n return null\n}\n\nrender(<MyComponent />)It provides you kind of high-level abstraction to Node.
\nAnother reconciler for DOCX.js.
\nLet's understand with a sample code:
\nrenderAsyncDocument(\n <section>\n <paragraph heading={Docx.HeadingLevel.HEADING_1}>\n This is a sample paragraph with paragraph tag\n </paragraph>\n <p> This is a sample paragraph with P tag</p>\n <p>\n <t>this is for textrun</t>\n </p>\n <p>\n <img\n src="base64...."\n width={200}\n height={200}\n />\n <href\n src="http://localhost:8080"\n label={"image n links label"}\n />\n </p>\n <Component text="can try componets in this way of course, like react!">\n </Component>\n </section>\n).then((doc) => console.log(doc));Also, you can checkout react-pdf and redocx for a similar purpose.
Can visit this Github Repo for a curated list of react renderers.
\n","frontmatter":{"date":"June 23, 2021","updated_date":null,"description":"There is an advanced feature of React is that it can write renderers for multiple different env.","title":"React renderers, react everywhere?","tags":["JavaScript","React","Renderer"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/3e300a00ec9a7919e0e181600a6fc755/ee604/react.png","srcSet":"/static/3e300a00ec9a7919e0e181600a6fc755/69585/react.png 200w,\n/static/3e300a00ec9a7919e0e181600a6fc755/497c6/react.png 400w,\n/static/3e300a00ec9a7919e0e181600a6fc755/ee604/react.png 800w,\n/static/3e300a00ec9a7919e0e181600a6fc755/f3583/react.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"excerpt":"React's Context API Guide with Example In this blog, You will learn What React's Context API is and how to use React's Context API. It is…","fields":{"slug":"/engineering/react-context-api-guide-with-example/"},"html":"In this blog, You will learn What React's Context API is and how to use React's Context API. It is very much used as a state management tool, oftentimes replacing Redux.
\nAccording to the React doc:
\n\nContext provides a way to pass data through the component tree\nwithout having to pass props down manually at every level.
\n
To be more clear, this provides a way for you to make values available to all components of your application, no matter how complicated your application is.
\nconst App = () => {\n return(\n <ParentClass color= "blue"/>\n );\n}\n\nconst ParentClass = (props) => (\n <ChildClass color= {props.color} />\n)\n\nconst ChildClass = (props) => (\n <GrandChildClass color= {props.color} />\n)\n\nconst GrandChildClass = (props) => (\n <p>Color: {props.color}</p>\n)In the above code, we designed the application in which used color props in the ParentClass and passed that props to all component (top to down) without checking that it is required by the child class or not and another issue also here that in case if GrandChildClass component was more deeply nested than it was very difficult to manage. This is the problem that Context solves. Context is designed the share values that can be considered \"global\" such as preferred language, current user, or theme.
Using context, we can avoid passing props. Let's create the above example code using context:
\nWe will create a separate component for context that we can use throughout the components.\nOnce you have initialized your project, create a file called ColorContext.js in your /src folder.
Using React.createContext, we can create context and pass anything as an argument to React.createContext. In our case, we are passing \"white\" color to provide a light theme.
This will also give me ColorContext.Provider and ColorContext.Consumer. What these two components do is straightforward:
import React from \"react\";
\nconst ColorContext = React.createContext(\"white\");\nexport default ColorContext;
\nTo use this context all over the components, we have to use the provider. According to React document, every context object comes with a Provider React component that allows consuming components to subscribe to context changes.
\nAfter successfully creating context, we can import context and use it to create our provider.\nAs we want to access context in the entire application, we need to wrap our app in ColorContext.Provider.
import ColorContext from './ColorContext';\n function App() {\n const color= "white";\n return (\n <ColorContext.Provider value = {color}>\n <div className="App">\n <header className="App-header">\n <img src={logo} className="App-logo" alt="logo" />\n <h1 className="App-title">Welcome to my web page</h1>\n </header>\n </div>\n </ColorContext.Provider>\n );\n }The approach to providing context is the same for class and functional components but consuming is a little different for both.
\nMainly used way to accessing context in class component using static contextType. After that, you can access the context value using this.context. You can refer to it in any lifecycle method and even in the render method.
import ColorContext from './ColorContext'\n\nclass Page extends Component {\n static contextType = ColorContext;\n\n componentDidMount() {\n const colorValue= this.context\n\n console.log(colorValue) // "white" \n }\n\n render() {\n return <div>Color Value is {colorValue} </div>\n }\n}The traditional way to accessing context values is by wrapping the child component in Consumer. From there, You can access values as props.
import { ColorContext} from './ColorContext'\n\nclass Page extends Component {\n render() {\n return (\n <ColorContext.Consumer>\n {(props) => {\n return <div>{props}</div>\n }}\n </ColorContext.Consumer>\n )\n }\n} You can use useContextin functional components and its equivalent of static contextType. \t
import React, { useContext } from 'react'\nimport ColorContextfrom './ColorContext'\n\nexport const HomePage = () => {\n const colorValue= useContext(ColorContext)\n\n return <div>{ColorContext}</div>\n}We can update the context by updating the normal state. We just need to create a wrapper class that contains the state of context and the method to update it.\nExample code with file ColorContext.js
import React, { Component } from 'react'\n\nconst ColorContext = React.createContext()\n\nclass ColorContextProvider extends Component {\n // Context state\n state = {\n color:""\n }\n\n // Method to update state\n setColor = (color) => {\n this.setState((prevState) => ({ color}))\n }\n\n render() {\n const { children } = this.props\n const { color } = this.state\n\n\n return (\n <ColorContext.Provider\n value={{\n color,\n this.setColor,\n }}\n >\n {children}\n </ColorContext.Provider>\n )\n }\n}\n\nexport default ColorContext\n\nexport { ColorContextProvider }Now you can update and view the user from the Context method.
\nimport ColorContext from './ColorContext'\n\nclass Page extends Component {\n static contextType = ColorContext;\n\n render() {\n const { color, setColor } = this.context\n\n return (\n <div>\n <button\n onClick={() => {\n const newColorValue= "black";\n\n setColor (newColorValue)\n }}\n >\n Update Color\n </button>\n <p>{`Current Color Value: ${color}`}</p>\n </div>\n )\n }\n}In my opinion, It is much easier to use than Redux and requires very little code, so why wouldn't you use it?
\nThe problem with the context is simple: ** Everything that consumes the context re-renders each time the state of that reference changes. **
\nThis means that if you're consuming your context everywhere in your app, or worse, using one context for the state of your entire app, you'll end up re-rendering a ton everywhere.
\n","frontmatter":{"date":"June 09, 2021","updated_date":null,"description":"Deep Dive into React's Context API with example","title":"React's Context API Guide with Example","tags":["React","Redux","Hooks"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/157af7ff069ab273224b4718433d9790/ee604/title-image.png","srcSet":"/static/157af7ff069ab273224b4718433d9790/69585/title-image.png 200w,\n/static/157af7ff069ab273224b4718433d9790/497c6/title-image.png 400w,\n/static/157af7ff069ab273224b4718433d9790/ee604/title-image.png 800w,\n/static/157af7ff069ab273224b4718433d9790/f3583/title-image.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"excerpt":"In this tutorial, we will be covering some authentication concepts and learn about authentication and how to use JSON JWTweb tokens to…","fields":{"slug":"/engineering/implementing-authentication-on-vuejs-using-jwt/"},"html":"In this tutorial, we will be covering some authentication concepts and learn about authentication and how to use JSON JWTweb tokens to authorize a Vue app. To continue in this tutorial, you should be comfortable using vue, vuex, and express.
\nIn our app, we have a login form. The user enters a username and password that is then posted to an endpoint. The flow of the app is the user opens the app, then the login page appears, the user submits the login form, which makes a post request to a login endpoint, then we check if the username and password check out, then we return a JWT and store the token in vuex and depending on the token we display a different page.
\n
You can start a new project using the vue cli, but you have to install the CLI first by running-
\nnpm install -g @vue/cli\n OR\nyarn global add @vue/cliafter the cli is installed, you can create a new project by running-
vue create jwt-auth-appYou will then be prompted to select some basic setup. In your setup, select Babel, Linter, Vue Router, and Vuex!. That’s all we need.
\nTo set up our server, we need to install cors, dotenv, express, and nodemon
npm install cors dotenv expressOur server.js file is simplistic in a way that we just import express, tell it what port to listen to, and return “hello world” when we hit the base URL, and then we listen on that port.
\nrequire("dotenv").config();\nconst express = require("express");\nconst cors = require("cors");\nconst app = express();\nconst port = 3000;\napp.use(cors());\napp.use(express.json());\n\napp.get('/', (req, res) => {\n res.send('Hello World!')\n})\napp.listen(port, () => {\n console.log(`Example app listening at http://localhost:${port}`)\n})In our views folder, we add login.vue and welcome.vue files, and in the login.vue file, we build out the login form. But before that, we want to add a route to our vue router so that we can navigate to the login and welcome page.\nSo for the index.js file of our router folder, we import the login and welcome view, and we add login and welcome routes for the components to point to.
import Vue from "vue";\nimport VueRouter from "vue-router";\nimport Login from "../views/Login.vue";\nimport Welcome from "../views/Welcome.vue";\nVue.use(VueRouter);\nconst routes = [\n {\n path: "/",\n name: "Welcom",\n component: Welcome,\n },\n {\n path: "/login",\n name: "Login",\n component: Login,\n },\n];\nconst router = new VueRouter({\n mode: "history",\n base: process.env.BASE_URL,\n routes,\n});\nexport default router;We can now navigate to both pages. On our welcome page, we want to check if the user is not logged in, then present the link they can click to navigate to the login page. We use a router link to achieve this.
\n<template>\n <div>\n <h1>Welcome</h1>\n <router-link to="/login"><button>Login</button></router-link> \n </div>\n</template>In our login view, we scaffold our form. In the form, we are going to have two input boxes, one is the username input, and the other is a password. We then add a button with the type submit to submit the form. When we submit, we perform a login function in our script then set preventDefault on our form to stop the page from refreshing each time we click the login button.\nIn the script of our application, we model our input data by doing a two-way binding to the data state.
<template>\n <div>\n <h1>LOGIN</h1>\n <form @submit.prevent="login">\n <input v-model="username" placeholder="username" />\n <br />\n <br />\n <input v-model="password" placeholder="password" type="password" />\n <br />\n <br />\n <button type="submit">Login</button>\n </form>\n </div>\n</template>\n<script>\nexport default {\n data: () => {\n return {\n username: "",\n password: "",\n };\n },\n};\n</script>![\"login](\"https://paper-attachments.dropbox.com/s_E8FB3BC64D80223D4CC4AFEEE119F2426D27A7EBE018696513C17DED12022079_1622020162212_loginForm.png\")
For the login method that runs when you click the button, we would like to perform an HTTP request to our express backend. We want to make a post request to our /login route we will create in our server.\nIn the fetch method, the first parameter is the URL you are sending a request to. Then the second is the object you are posting containing the headers, which contain information about the request, and the body containing the form data.
<script>\nexport default {\n data: () => {\n return {\n username: "",\n password: "",\n };\n },\n methods: {\n login() {\n fetch("http://localhost:3000/login", {\n method: "POST",\n headers: {\n "Content-Type": "application/json",\n },\n body: JSON.stringify({\n username: this.username,\n password: this.password,\n }),\n });\n },\n },\n};\n</script>In our server.js, we create a post request to the /login route and send back some json to test it out. Now, if we click login now, we get back a 200 ok message.
Note: Make sure you set up *cors* so that you don't encounter an error message when hitting the */login* route
app.post("/login?", (req, res) => {\n res.json({\n message: "hello ma guy"\n })\n})The next step is to check if the username or password exists in a database or somewhere else. To not waste time dealing with a database, we can use a hardcoded username and password. In the post route, if somebody tries to log in with the exact login information we just hardcoded, we want to give the person a green light and log the person into the application; otherwise, we throw an error.
\nUsing the login payload we got from submitting the form, we can now check if the username and password are the same; else, we throw an error and respond with a status of 403 and a wrong login information message.
\napp.post("/login", (req, res) => {\n const USERNAME = "uma victor";\n const PASSWORD = "8888";\n const { username, password } = req.body;\n if (username === USERNAME && password === PASSWORD) {\n const user = {\n id: 1,\n name: "uma victor",\n username: "uma victor",\n };\n } else {\n res.status(403);\n res.json({\n message: "wrong login information",\n });\n }\n});This is the interesting part of the tutorial. Now, if you provide the correct login information and it checks out, the next step is to sign a JWT web token. Let’s first install the JWT plugin.
\nnpm install jsonwebtokenalso, make sure to import it at the top of your server.js file
const jwt = require("jsonwebtoken");Then when the user login is successful, we want to send a JWT that is signed. So we import the JWTpackage. Then you sign in with a unique password. In a real application, we will want to have a .env file where we store the secret key. Then use process.env to grab and use it when signing our user model. Imagine we have a user object which we got back from our database with a unique ID, name, and username.
app.post("/login", (req, res) => {\n const USERNAME = "uma victor";\n const PASSWORD = "8888";\n const { username, password } = req.body;\n if (username === USERNAME && password === PASSWORD) {\n const user = {\n id: 1,\n name: "uma victor",\n username: "uma victor",\n };\n const token = jwt.sign(user, process.env.JWT_KEY);\n res.json({\n token,\n user,\n });\n } else {\n res.status(403);\n res.json({\n message: "wrong login information",\n });\n }It is the user object we want to sign, so when you send it to the client. We can uniquely identify them. The unique ID is also very important because when a server gets a request with a token, we want to know what uniquely identifies the request.\nNow when we enter the username and password in our form, we can see in the console that our JWT token is generated but is not encrypted.
\nYou can visit this site jwt.io and paste in the token that was generated, and your token will be decoded and return information about your payload
\nNote: The token is not encrypted, and anyone who gets access to the token can hit your server with it. Tokens normally have an expiry period of between 30 - 60 minutes
\nIn our fetch method in the login view, we want to get back the token and the user and store it somewhere. Now we make our login method async, then we set our response to equal to the fetch method that returns the user and token, and we get back the user and token from the response.
<script>\nexport default {\n data: () => {\n return {\n username: "",\n password: "",\n };\n },\n methods: {\nasync login(e) {\n e.preventDefault();\n const response = await fetch("http://localhost:3000/login", {\n method: "POST",\n headers: {\n "Content-Type": "application/json",\n },\n body: JSON.stringify({\n username: this.username,\n password: this.password,\n }),\n });\n },\n },\n};\n</script>In our store, we add the user and token data in our state and set them to null initially. You can use the token to see if the user is logged in or not. If the token is null, then we are not logged in, but if it’s set to something, then we are probably logged in.\nWe create a setUser mutation in our mutation object that sets the state to the user object. We also create a setToken mutation to assign our token.
import Vue from "vue";\nimport Vuex from "vuex";\nVue.use(Vuex);\nexport default new Vuex.Store({\n state: {\n user: null,\n token: null,\n },\n mutations: {\n setUser(state, user) {\n state.user = user;\n },\n setToken(state, token) {\n state.token = token;\n },\n },\n actions: {},\n getters: {},\n});Note: It is best practice to always call mutations from our actions, but since our mutations can easily be traced, we are calling the mutations directly
\nIn the login view, we can import mapMutations from vuex and map the setUser and setToken mutation. We can now call the mutations from the login method.
<script>\nimport { mapMutations } from "vuex";\nexport default {\n data: () => {\n return {\n username: "",\n password: "",\n };\n },\n methods: {\n ...mapMutations(["setUser", "setToken"]),\n async login(e) {\n e.preventDefault();\n const response = await fetch("http://localhost:3000/login", {\n method: "POST",\n headers: {\n "Content-Type": "application/json",\n },\n body: JSON.stringify({\n username: this.username,\n password: this.password,\n }),\n });\n const { user, token } = await response.json();\n this.setUser(user);\n this.setToken(token);\n },\n },\n};\n</script>Now that we're logged in, our state has been mutated and updated with the information from our form. But after we login, we want to redirect to our welcome page using the $router.push(\"/\") method to redirect to the home page, which is also our welcome page.
this.$router.push("/");// image of the welcome page here\nSince you are logged in, you don’t want the login button showing anymore on the welcome page. You can use a getter from our store to do this. We check if the token is null or not and return true or false.
getters: {\n isLoggedIn(state) {\n return !!state.token;\n },\n},then in our welcome component template, we can use now map to our Getter and use the v-if directive to display the login button if isLoggedIn is true or false
<template>\n <div>\n Welcome\n <router-link v-if="!isLoggedIn" to="/login"><button>Login</button></router-link>\n </div>\n</template>\n<script>\nimport { mapGetters } from "vuex";\nexport default {\n computed: {\n ...mapGetters(["isLoggedIn"])\n }\n};\n</script>In this tutorial, we looked at how to authenticate a person using the JSON web token. We created a login form and used an express server for the login route in the application using Vue.js as a frontend framework.
\nDictionaries Dictionary<TKey, TValue> is used for storing a key-value pair. It is a generic collection that is defined in the System.Collection.Generic namespace and implements the IDictionary<TKey, TValue> interface.
Suppose we want to store the scores of a player in a cricket match, Then we have to save the key as the name of the player and score as value.
\nTo create a dictionary of key and value type as a string and int, respectively, we just simply need to initialize as below.
\nDictionary<string, int> dict = new Dictionary<string, int>();\nDictionary<string, int> dict1 = new Dictionary<string, int>(5); // Creates a dictionary with default initial capacity of 5The first line will create a dictionary with string type of key and int type of value and will have the initial default capacity as well default equality comparer for the key type.
\nThe Second line will create the same dictionary as line 1 except for the initial default capacity. It will create a dictionary with an initial default capacity of 5.
\nWe can create the dictionary by using the different constructors of the dictionary. Here I have talked about the two constructors only.
\nWe can add the elements in the dictionary by using add method of it.
\ndict.Add("Player",42);\ndict.Add("Player1",38);It will add the elements in the dictionary.
\nNote: Keys can not be null or duplicate. If we add the duplicate or null as a key, then the application will throw the run time exception, but Values can be null or duplicate.
To traverse through a dictionary, we can use a foreach loop or a for a loop.
\nforeach (var item in dict)\n{\n Console.WriteLine("Key "+ item.Key +" Value "+ item.Value);\n}for (int i = 0; i < dict.Count; i++)\n{\n Console.WriteLine("Key " + dict.ElementAt(i).Key + " Value " + dict.ElementAt(i).Value);\n}In the above code, we are using the
\nTo get the specified key's value from the dictionary, we can directly use the key as an index.
\nConsole.WriteLine(dict["Player"]); // Prints 42\nConsole.WriteLine(dict["Player1"]); // Prints 38To update the specified key's value of the dictionary, we can set it as below.
\ndict["Player"]=45;\nConsole.WriteLine(dict["Player1"]); // Prints 45Note:
\nTo remove elements from a dictionary, we can use the below methods.
\nTo remove a specific key, we can use the Remove(TKey) method of the dictionary.
\ndict.Remove("Player1"); // Removes Player1 from dictionaryTo clear all the elements of the dictionary, we can use the Clear() method of the dictionary.
\ndict.Clear(); // Clears all the elements and count will be 0In this article, We have learned about some of the basics of dictionaries. Dictionaries help to use to manage data in Key-Value pair, which we can easily access and manipulate the data accordingly.
\n","frontmatter":{"date":"May 27, 2021","updated_date":null,"description":"In this article, we will talk about how to create and use the Dictionary in C#.","title":"How to create and use the Dictionary in C#","tags":["C#","Dictionary"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/70d1172c5171ae195aeb525bdf6086b3/ee604/coverimage.png","srcSet":"/static/70d1172c5171ae195aeb525bdf6086b3/69585/coverimage.png 200w,\n/static/70d1172c5171ae195aeb525bdf6086b3/497c6/coverimage.png 400w,\n/static/70d1172c5171ae195aeb525bdf6086b3/ee604/coverimage.png 800w,\n/static/70d1172c5171ae195aeb525bdf6086b3/f3583/coverimage.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hemant Manwani","github":"hemant404","avatar":null}}}},{"node":{"excerpt":"While most of you — developers and architects — understand the need for strong password security and practice it, your users might not. For…","fields":{"slug":"/engineering/risk-based-authentication/"},"html":"While most of you — developers and architects — understand the need for strong password security and practice it, your users might not.
\nFor years security researchers have been hollering about the risks of weak, repeated passwords. Still, average Joe seems to be complacent about it and reuses the same or similar passwords across multiple logins, despite the fact that even a strong password is secure only if used for a single login.
\nA good password manager can alleviate the problem of remembering tens of passwords, if not hundreds. However, in reality, the average Joe doesn't invest in a password manager and carries on with life.
\nSo, what's the greater risk? You may ask.
\nMillions of data records, including login credentials, are being exposed in data breaches, which continue to make headlines around the world. In fact, data breaches globally exposed more than 36 billion records in 2020.
\nCybercriminals get access to these exposed records in black markets (generally on the dark web) and use them to perform credential stuffing and account takeover attacks or commit fraud.
\nWhether it's yours or your users' fault, such type of attacks damage brand reputation, make your business liable to legal damages, and impact user experience.
\nYou should take the onus upon yourself to ensure user access to your apps or portals is as secure as possible without impacting user experience. This is where risk-based authentication (RBA) — also known as adaptive authentication — comes into play.
\nRBA is a process of assessing the risk of an authentication request in real-time and requesting additional layers of authentication and identification based on the risk profile to validate that a user attempting to authenticate is who they claim to be.
\nThe risk is usually assessed based on various parameters and the environment from which the user is attempting to authenticate. Some common parameters used for risk profiling include:
\nBased on the risk assessed, an RBA system requests additional methods of authentication, such as:
\nRBA is different from multi-factor authentication (MFA). MFA is a static authentication method — that is, regardless of the risk of an authentication request, this method requires an additional layer(s) of validation.
\nOn the other hand, RBA is a non-static authentication method that requires additional authentication factors only when necessary based on the risk profile — as a result, RBA provides a better user experience.
\nNow, it's clear that better safe than sorry when it comes to authenticating users, and implementing RBA reduce account compromise risk on your apps.
\nThat said, RBA doesn't have to stop at user authentication; you can extend it to signups, payments, and other types of online transactions.
\nYou have two options:
\nYes, developing an RBA system in-house is possible. But, you should ponder upon some important details:
\nIf you got convincing responses to the above questions, you may go ahead and develop your in-house RBA system.
\nBut a lot of you might not have that sort of resources or just don't want to focus on non-core development projects. In this case, you can rely on a reputed RBA provider -- for example, LoginRadius.😉
\nWhen choosing an RBA provider, make sure the solution meets the following criteria:
\nOnce you have evaluated and finalized the vendor, it is vital to test the RBA solution and ensure that the user experience is as expected while minimizing risk.
\nWant to learn more about RBA and test how RBA works in LoginRadius? Signup for a free account here.
\n","frontmatter":{"date":"May 25, 2021","updated_date":null,"description":"RBA is a process of assessing the risk of an authentication request in real-time and requesting additional layers of authentication and identification based on the risk profile to validate that a user attempting to authenticate is who they claim to be.","title":"What is Risk-Based Authentication? And Why Should You Implement It?","tags":["RBA","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ef5a017980017a63c415e5259ef6d0a2/14b42/cover.jpg","srcSet":"/static/ef5a017980017a63c415e5259ef6d0a2/f836f/cover.jpg 200w,\n/static/ef5a017980017a63c415e5259ef6d0a2/2244e/cover.jpg 400w,\n/static/ef5a017980017a63c415e5259ef6d0a2/14b42/cover.jpg 800w,\n/static/ef5a017980017a63c415e5259ef6d0a2/47498/cover.jpg 1200w,\n/static/ef5a017980017a63c415e5259ef6d0a2/0e329/cover.jpg 1600w,\n/static/ef5a017980017a63c415e5259ef6d0a2/be7fd/cover.jpg 3999w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","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.
\nWhat does it mean for user authentication?
\nOn 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).
\nOn 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.
\nIn this article, we’ll discuss:
\nThird-party cookie restrictions affect user authentication in three ways, as follows.
\nIf 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.
\nIf 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.
\nIf 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.
\nFor 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.
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.
\nUsually, 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.
\nFor 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\nNote: 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
Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative.
\nSpecific to authentication, Google recommends the following:
\nCHIPS 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.
\nFor 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.
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.
You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.
\nIf you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.
\nHowever, 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.
\nWith 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.
\nStorage 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.
\nIt is most suitable when loading cross-site resources and interactions, such as:
\nVerifying 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.
\nAs 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.
\nWith 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.
Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets
\nIt provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.
\nIt 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.
\nThe top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.
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.
\nRelated 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.
\nFedCM API enables federated SSO without third-party cookies.
\nWith FedCM API, a user follows these steps for authentication:
\nYou can access a user demo of FedCM here: FedCM.
\nFor more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.
\nFirstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.
\nWe’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.
\nPlease subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.
\nThe 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.
\nMoreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.
\nFrom 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.
\nTop-level site: It is the primary site a user has visited.
\nFirst-party cookie: A cookie set by the top-level site.
\nThird-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.