{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/77","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"All About Google One Tap Login—Explained! Google has recently launched a new secure, frictionless, easy to implement sign-up and sign-in…","fields":{"slug":"/identity/google-one-tap-login/"},"html":"<h1 id=\"all-about-google-one-tap-loginexplained\" style=\"position:relative;\"><a href=\"#all-about-google-one-tap-loginexplained\" aria-label=\"all about google one tap loginexplained permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>All About Google One Tap Login—Explained!</h1>\n<p>Google has recently launched a new secure, frictionless, easy to implement sign-up and sign-in experience by exposing the \"googleyolo\" API in Google IO 2k18. It comes with more security features to authorize consumers with more control. </p>\n<p>The beta version was launched in 2018, and after a lot of feedback and deliberations, Google finally decided to launch its stable version so developers can implement it using HTML/JS.</p>\n<p>What is Google One Tap Login </p>\n<p>Google One Tap is a new feature that allows users to create an account or log in to the website with a single click. It is also known as <strong>YOLO (You Only Login Once)</strong>.</p>\n<p>The login widget appears as a popup, and it will prompt the users to sign in or sign up with the existing Google account when any of these conditions are true:</p>\n<ul>\n<li>You are logged in to your Gmail account,</li>\n<li>You've signed in to your Chrome browser.</li>\n</ul>\n<p><img src=\"https://apidocs.lrcontent.com/images/google-onetap_2382160c344fde5f388.16537804.jpg\" alt=\"google one tap login\" title=\"google one tap login\"></p>\n<p>At first glance, it seems like a convenient feature: you click the web widget and sign in to a site with your existing Google account. There is no need to create a new user, no need to remember the email and password you used to log in before. Just click on a button, and you are good to go.</p>\n<h2 id=\"how-does-it-work\" style=\"position:relative;\"><a href=\"#how-does-it-work\" aria-label=\"how does it work permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How Does It Work</h2>\n<p>A JavaScript library is included on your website. HTML or JavaScript is used to customize the look and feel of the personalized button and, on one tap, control the automatic sign-in and sign-out behaviors.</p>\n<p>The Users who are signing in for the first time are prompted for consent to share their Google Account profile information. After providing the consent, a <a href=\"https://www.loginradius.com/blog/engineering/jwt/\">JSON Web Token</a> (JWT) credential containing the user's name, email, and profile picture is shared using a callback handler. </p>\n<p>Now you can create a new account on your platform or allow the verified user to continue using your site. If the user is already signed in on a Google device, a personalized button will appear; otherwise, a default button will appear.</p>\n<h2 id=\"benefits-of-google-one-tap-login\" style=\"position:relative;\"><a href=\"#benefits-of-google-one-tap-login\" aria-label=\"benefits of google one tap login permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Benefits of Google One Tap Login</h2>\n<p>The benefits can be massive, especially for businesses that struggle with engagement. Customers skip a tedious registration process, <a href=\"https://www.loginradius.com/customer-experience-solutions/\">get a more customized experience</a>, and at the same time create more opportunities for site owners to engage with them through different marketing channels.</p>\n<h2 id=\"use-cases\" style=\"position:relative;\"><a href=\"#use-cases\" aria-label=\"use cases permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Use cases</h2>\n<p>Some of the main reasons to add <strong>Sign In With Google</strong> to your site are:</p>\n<ul>\n<li>Add a visibly trusted and secure Sign In With Google button to an account creation or settings page.</li>\n<li>Pre-populate new accounts with consensually shared data from a Google Account profile.</li>\n<li>Sign in once to a Google Account without re-entering usernames or passwords on other sites.</li>\n<li>On return visits, sign in automatically or with one click across an entire site.</li>\n<li>Use verified Google Accounts to protect comments, voting, or forms from abuse while allowing anonymity.</li>\n</ul>\n<h2 id=\"how-one-tap-makes-the-android-sign-in-process-easy\" style=\"position:relative;\"><a href=\"#how-one-tap-makes-the-android-sign-in-process-easy\" aria-label=\"how one tap makes the android sign in process easy permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How One Tap Makes the Android Sign-in Process Easy</h2>\n<p>The consumers will have a better experience using their favorite apps, or websites, as they will have a seamless authentication with Google's One Tap sign-in and sign-up APIs.</p>\n<p>One Tap sign-up prompts consumers to register for an account using a dialog that conforms to the app's content. </p>\n<p>So, consumers do not feel that they are doing the sign-up process. Once they are finished, they get an account that does not require a password and their Google Account protects it.</p>\n<p>Consumers will remain signed in with One Tap, even after switching devices or apps. The consumers will not only sign-up on Android faster, but they can also sign back in with just one click, using the account they are already registered with. </p>\n<p>Hence, they <a href=\"https://www.loginradius.com/blog/identity/2019/10/passwordless-authentication-the-future-of-identity-and-security/\">no longer need to memorize passwords</a> or usernames they use for their account.</p>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>In this blog, we have learned how the Google one-tap login can be helpful for consumers and how it could remove the efforts required to create an account and simplify the login process. We have also covered how Google one tap works, and it gives a better experience to Android consumers.</p>\n<p>Cheers!</p>\n<p><a href=\"https://www.loginradius.com/book-a-demo/\"><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 30.307692307692307%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAABdElEQVQY002RO0/CUBzFG6PtbZWHCAmRmBB5P8vDII9SSC0omog4oAEGjZMO6OKEuLjoJ2Fx0cSBwUQnXZxcHPwux38LJA7nNvfec8+5v1tOCCiwpbbhye2BxbYgBMtgIRVioDRRsARGXxZUzLlEHmehBaesQ4rrEMPViYf2DR9nDGKkChbVICVqsMt1WJI1sHCFwhUsUIFohJH49TxECvRUjhDW2mAbB5iP6hB8hUkhiRPN5KIZYJdrsEYrcCSpmQqMm6/m9ylUhSulY7N5ivROB3L9GOlGF3Ktbc4zuz341UPw/uIk0ESbBjoSGlYIx8BfzjSwVmyCEYEUUmCPa3Bnd+hwC75yC95S05SxbolU/iEbOCFCpDexEfIioTNCNd6Tp6IlMnNuGeeDe3z//OLx5RWj5zFGT2O8fXxh/P4Ja6w6vSEFCnTIlW2YiDzhzX7ATFKojDlvjpBPcDF4QPdyiG5/iE7/BmfXd+hd3VKpCoG8fzxWw2+c+yTpAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"book-a-demo-loginradius\"\n        title=\"book-a-demo-loginradius\"\n        src=\"/static/fcc4c4b5dc38cc4528f99d09480f4eb2/e5715/book-a-demo-loginradius.png\"\n        srcset=\"/static/fcc4c4b5dc38cc4528f99d09480f4eb2/a6d36/book-a-demo-loginradius.png 650w,\n/static/fcc4c4b5dc38cc4528f99d09480f4eb2/e5715/book-a-demo-loginradius.png 768w,\n/static/fcc4c4b5dc38cc4528f99d09480f4eb2/63ff0/book-a-demo-loginradius.png 2887w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"June 11, 2021","updated_date":null,"description":"Consumers prefer basic login experiences over complicated signup procedures. The Google One-Tap Login feature, available on Android phones, allows users to quickly sign up for apps or web services with their Google credentials without creating an account.","title":"All About Google One Tap Login—Explained!","tags":["social login"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.8181818181818181,"src":"/static/916e3264a89d4071fbd3e41301a30804/14b42/google-onetaplogin-cover.jpg","srcSet":"/static/916e3264a89d4071fbd3e41301a30804/f836f/google-onetaplogin-cover.jpg 200w,\n/static/916e3264a89d4071fbd3e41301a30804/2244e/google-onetaplogin-cover.jpg 400w,\n/static/916e3264a89d4071fbd3e41301a30804/14b42/google-onetaplogin-cover.jpg 800w,\n/static/916e3264a89d4071fbd3e41301a30804/47498/google-onetaplogin-cover.jpg 1200w,\n/static/916e3264a89d4071fbd3e41301a30804/6da7e/google-onetaplogin-cover.jpg 1437w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Manish Tiwari","github":null,"avatar":null}}}},{"node":{"excerpt":"JSON web tokens are widely used as access tokens in commercial applications for granting access to consumers for a short period of time…","fields":{"slug":"/identity/json-web-token-stolen/"},"html":"<p>JSON web tokens are widely used as access tokens in commercial applications for granting access to consumers for a short period of time. </p>\n<p>These tokens include a token signature for integrity and are solely based on JSON format to authenticate users to provide access to certain services and resources within a network.  \\</p>\n<p>Since these tokens provide secure access to an authenticated user, attackers are always looking for ways to steal these tokens and quickly gain access by impersonating a consumer. </p>\n<p>So what can be done at the enterprise level to ensure maximum security, and what are the steps that can help in a situation where a client’s <a href=\"https://www.loginradius.com/blog/engineering/jwt/\">JSON web token</a> is stolen? </p>\n<p>Remember, once a JWT (JSON Web Token) is stolen, it can be the worst thing for an individual and the enterprise as there’s a huge chance of data breach and exploitation.</p>\n<p>In this post, we will discuss the security implications of utilizing JSON web tokens, how they work, and how to minimize the loss if a token is stolen. </p>\n<h2 id=\"jwt--how-is-it-used-for-authentication\" style=\"position:relative;\"><a href=\"#jwt--how-is-it-used-for-authentication\" aria-label=\"jwt  how is it used for authentication permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>JWT- How Is It Used for Authentication?</h2>\n<p>JWT is made from 3 components-the <em>Header</em>, the <em>Payload</em>, and the <em>Signature</em>. </p>\n<p>The _Payload _generally contains the user information and regarding the transaction for which access is required. </p>\n<p>The _Header _contains the technical metadata details of the JWT placed in a separate JavaScript object and is sent with the Payload. </p>\n<p>Now, the last part of JWT is the <em>Signature</em>. It’s a MAC (Message Authentication Code), which can only be produced by an individual that possesses both the Payload and Header along with a secret key. </p>\n<p>Once the user submits the credentials to the authentication server, the server validates the credentials and then creates a JWT with the user’s details along with the expiration timestamp.</p>\n<p>Now, the authentication server considers a security key and then utilizes it to sign the Header and the Payload and then sends it back to the user’s web browser.</p>\n<p>The browser then takes the signed JWT and begins sending the same with every HTTP request to the application server. </p>\n<p>In a nutshell, the signed JWT is now acting as a temporary login credential for a user, which replaces the permanent credential. </p>\n<p><strong>Read more</strong>: <a href=\"https://www.loginradius.com/blog/engineering/invalidating-jwt/\">Invalidating JSON Web Tokens</a></p>\n<h2 id=\"what-to-do-if-jwt-token-is-stolen\" style=\"position:relative;\"><a href=\"#what-to-do-if-jwt-token-is-stolen\" aria-label=\"what to do if jwt token is stolen permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What to Do if JWT Token is Stolen?</h2>\n<p>There could be nothing worse than getting a JWT token stolen, as it’s like providing a license to bypass all the layers of security to an attacker for exploiting sensitive information. </p>\n<p>Here are some crucial steps that enterprises should consider when their client’s token gets stolen: </p>\n<h3 id=\"1-ask-clients-to-change-their-passwords-immediately\" style=\"position:relative;\"><a href=\"#1-ask-clients-to-change-their-passwords-immediately\" aria-label=\"1 ask clients to change their passwords immediately permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1. Ask Clients to Change their Passwords Immediately</h3>\n<p>One of the most important steps is to ask your clients to change their passwords immediately if there’s an instance where the JWT token is stolen.  </p>\n<p>Changing the password of an account will prevent attackers from exploiting the account and would eventually help in avoiding a data breach. </p>\n<h3 id=\"2-revoke-tokens\" style=\"position:relative;\"><a href=\"#2-revoke-tokens\" aria-label=\"2 revoke tokens permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2. Revoke Tokens</h3>\n<p>If you suspect any token being used by an unauthorized professional, it is best to revoke a token. This immediately pulls the attacker out of your network and helps in minimizing the risk. </p>\n<p>Once the token is revoked, ask the client to reset their password and ensure they choose a strong password and must utilize <a href=\"https://www.loginradius.com/multi-factor-authentication/\">multi-factor authentication</a> in place as offered by LoginRadius CIAM.</p>\n<p><a href=\"https://www.loginradius.com/resource/guide-to-modern-customer-identity/\"><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 30.307692307692307%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAABoElEQVQY0zWPyUtbURjFH9aa4QmWakBrGmmrGXyJxEaeUWNsBqOpAzhAMArWlm4cKkhdiGlF3KjgQgQFqYVStSmCqCClcWF1IXXVVTcu/Fd+3ncli8O9373nO4NidYV4+KKZhbk5rk6zHH3bYnd7gz+5E3Z3vuIMdlEo/q2uVszV4tRilAX7KK2LYfHGMbvbMNe0CISwOEMoqiAWPAuSGnrPxc8dzvY3Od1b5+D7F7JrC3ib2nkgBcWCWFSFiCMyhBZPYdX7MfkSWJ0tUswQVvIXrXmAd4PDLM/OsL40z+ToGIsfZ6iL9klDI2FFQxK7/pongQ7KA53YGwT0JJV6FyXaK0x5QZOo4gokSfa+oX9gjHhnGndtmPqXMcp9EUk0eAZs9Qnsjd08DXbjaOqRJqo7LEPJypIo3Kt8UWr97Xj8CZ5rEWwOndLKAI89baieMEqFn4nMKv9vbjn8dc6P499kT3JcXv8jd/mXR94oRSKYkneW1cWDpeYeqpiLhbNR1UBBlU6jaDA+v8Lw9CfSUxnSHzK8nV1iZPozxcLUaHIH2VzYTeppS8MAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"EB-GD-to-mod-cust-id\"\n        title=\"EB-GD-to-mod-cust-id\"\n        src=\"/static/e8ca49370e6ab28514cbd05ef77951af/e5715/EB-GD-to-mod-cust-id.png\"\n        srcset=\"/static/e8ca49370e6ab28514cbd05ef77951af/a6d36/EB-GD-to-mod-cust-id.png 650w,\n/static/e8ca49370e6ab28514cbd05ef77951af/e5715/EB-GD-to-mod-cust-id.png 768w,\n/static/e8ca49370e6ab28514cbd05ef77951af/81501/EB-GD-to-mod-cust-id.png 2886w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></a></p>\n<h3 id=\"3---look-for-a-security-breach-within-your-network\" style=\"position:relative;\"><a href=\"#3---look-for-a-security-breach-within-your-network\" aria-label=\"3   look for a security breach within your network permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3.   Look for a Security Breach Within your Network</h3>\n<p>Since an attacker can exploit a user account to gain access to your organization’s sensitive information, it is crucial to inspect your environment for any attempts to access resources or bypass security layers. </p>\n<p>If you find anything suspicious, put your best foot forward to analyze the loss and work immediately to rectify the situation and minimize further damage. </p>\n<h3 id=\"4-work-on-the-root-cause\" style=\"position:relative;\"><a href=\"#4-work-on-the-root-cause\" aria-label=\"4 work on the root cause permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>4. Work on the Root Cause</h3>\n<p>Your business must identify the root cause of a token getting stolen from a client’s end. It’s your responsibility to check whether the breach was due to inadequate utilization of security measures, poor device security, or due to human error. </p>\n<p>Once you’re aware of the actual cause, make sure you tighten your security and add multiple layers of security and authentication like MFA (Multi-Factor Authentication) and RBA (Risk-Based Authentication) as offered by LoginRadius. </p>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>With businesses facing new security vulnerabilities every day, stolen JWT tokens could be the worst thing for any enterprise delivering online services. </p>\n<p>It’s crucial for businesses to ensure maximum security at the consumer level and take necessary precautions to <a href=\"https://www.loginradius.com/blog/identity/2019/10/cybersecurity-best-practices-for-enterprises/\">avoid a security breach</a>. </p>\n<p>The aforementioned aspects could help mitigate the risk and ensure minimum loss if a security threat related to a client’s JWT token is detected. </p>\n<p><a href=\"https://www.loginradius.com/book-a-demo/\"><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 30.307692307692307%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAABdElEQVQY002RO0/CUBzFG6PtbZWHCAmRmBB5P8vDII9SSC0omog4oAEGjZMO6OKEuLjoJ2Fx0cSBwUQnXZxcHPwux38LJA7nNvfec8+5v1tOCCiwpbbhye2BxbYgBMtgIRVioDRRsARGXxZUzLlEHmehBaesQ4rrEMPViYf2DR9nDGKkChbVICVqsMt1WJI1sHCFwhUsUIFohJH49TxECvRUjhDW2mAbB5iP6hB8hUkhiRPN5KIZYJdrsEYrcCSpmQqMm6/m9ylUhSulY7N5ivROB3L9GOlGF3Ktbc4zuz341UPw/uIk0ESbBjoSGlYIx8BfzjSwVmyCEYEUUmCPa3Bnd+hwC75yC95S05SxbolU/iEbOCFCpDexEfIioTNCNd6Tp6IlMnNuGeeDe3z//OLx5RWj5zFGT2O8fXxh/P4Ja6w6vSEFCnTIlW2YiDzhzX7ATFKojDlvjpBPcDF4QPdyiG5/iE7/BmfXd+hd3VKpCoG8fzxWw2+c+yTpAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"book-a-demo-loginradius\"\n        title=\"book-a-demo-loginradius\"\n        src=\"/static/fcc4c4b5dc38cc4528f99d09480f4eb2/e5715/book-a-demo-loginradius.png\"\n        srcset=\"/static/fcc4c4b5dc38cc4528f99d09480f4eb2/a6d36/book-a-demo-loginradius.png 650w,\n/static/fcc4c4b5dc38cc4528f99d09480f4eb2/e5715/book-a-demo-loginradius.png 768w,\n/static/fcc4c4b5dc38cc4528f99d09480f4eb2/63ff0/book-a-demo-loginradius.png 2887w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"June 10, 2021","updated_date":null,"description":"JWT tokens provide secure access to an authenticated user, and attackers are always looking for ways to steal these tokens and quickly gain access by impersonating a consumer. Here we’ve clubbed efficient ways for enterprises to ensure maximum security and steps that can help in a situation where a client’s JSON web token is stolen.","title":"What to Do if Someone Steals Your JSON Web Token?","tags":["data security","authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/048bbc276b9da7bd28ae8f5b2424c5a1/14b42/json-web-token-stolen-cover.jpg","srcSet":"/static/048bbc276b9da7bd28ae8f5b2424c5a1/f836f/json-web-token-stolen-cover.jpg 200w,\n/static/048bbc276b9da7bd28ae8f5b2424c5a1/2244e/json-web-token-stolen-cover.jpg 400w,\n/static/048bbc276b9da7bd28ae8f5b2424c5a1/14b42/json-web-token-stolen-cover.jpg 800w,\n/static/048bbc276b9da7bd28ae8f5b2424c5a1/16310/json-web-token-stolen-cover.jpg 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vishal Sharma","github":null,"avatar":null}}}},{"node":{"excerpt":"What is Web SSO and Why Does Your Business Need it? Consumers perceive your enterprise as a single entity and expect you to treat them like…","fields":{"slug":"/identity/what-is-web-sso/"},"html":"<h1 id=\"what-is-web-sso-and-why-does-your-business-need-it\" style=\"position:relative;\"><a href=\"#what-is-web-sso-and-why-does-your-business-need-it\" aria-label=\"what is web sso and why does your business need it permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What is Web SSO and Why Does Your Business Need it?</h1>\n<p>Consumers perceive your enterprise as a single entity and expect you to treat them like a single entity. If you have multiple websites and mobile apps under the same company umbrella, there’s no reason you can’t meet this expectation.</p>\n<p>One solution is to eliminate the need to use multiple passwords. Instead, you can use a centralized authentication method to get the job done seamlessly using a web-based single sign-on (popularly known as Web SSO).</p>\n<p>Web SSO is a part of Single Sign-On that brings everything together. Each consumer has one account and one set of credentials that they can use anywhere to interact with your brand.</p>\n<p>Before we explain the web counterpart of SSO, let’s start with the basics.</p>\n<h2 id=\"what-is-single--sign-on\" style=\"position:relative;\"><a href=\"#what-is-single--sign-on\" aria-label=\"what is single  sign on permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What Is Single- Sign-On</h2>\n<p>Single sign-on is the process of authentication that allows consumers to access multiple applications and websites with a single login credential and an active login session.</p>\n<p>It prevents the need for the consumer to log in separately to the different applications/websites.</p>\n<p>The following are two examples of the Single Sign-On environments:</p>\n<ul>\n<li>Consumers access multiple applications of the same provider: Consumers don't need to create and remember separate credentials for each application; they log in once and access various applications of that provider. Example: Google, Youtube, Gmail, etc.</li>\n<li>Employees access numerous applications daily: Employees don't need to create and remember separate credentials for each application; they can log in once and access various applications used in the organization. Example: HR Portal, Resource Portal, Organizational Account, etc.</li>\n</ul>\n<p>Furthermore, SSO can also facilitate the following for a developer:</p>\n<ul>\n<li>Allow consumers to authenticate across multiple applications without re-prompting them to log in.</li>\n<li>Allow consumers to log in to all their SaaS applications by only typing the credentials once.</li>\n<li>Align SaaS applications with organizational IAM policies.</li>\n</ul>\n<blockquote>\n<p><strong>Note:</strong> With SSO implementation, the SLO (Single Logout) is also required, i.e., if a consumer has logged out from one application, they should be logged out from other linked applications too.</p>\n</blockquote>\n<h2 id=\"how-does-single-sign-on-work\" style=\"position:relative;\"><a href=\"#how-does-single-sign-on-work\" aria-label=\"how does single sign on work permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How does Single Sign-On Work</h2>\n<p>As already mentioned, consumers want to log into a single place and access all of their favorite sites and services using their preferred login credentials.</p>\n<p>It simplifies the authentication and login process for enterprise consumers. Here's how SSO works:</p>\n<ol>\n<li>When consumers land on a page included in the SSO grouping, the first step is to check and request access to the site or application.</li>\n<li>The site checks to see if your identity has been authenticated with the SSO provider. If the SSO session was not present, it either goes into the logout function or redirects the page to the logout URL. Here, consumers redirect to the authentication interface where they can log in with credentials. (i.e., username and password).</li>\n<li>Consumers enter their login credentials.</li>\n<li>The SSO solution requests authentication from the identity provider your company uses.</li>\n<li>The identity provider confirms the consumer's identity to the SSO solution.</li>\n<li>After confirmation, it is redirected to the original website and redirects consumers to the site.</li>\n<li>As consumers navigate the website, the site tracks page to page using tokens, reauthenticating the identity. If consumers go to another website or application, that site will check the identity with the SSO solution. Since consumers are already logged in, their identities are automatically verified with the new site, and they don't need to log in again.</li>\n</ol>\n<h3 id=\"sso-components-explained\" style=\"position:relative;\"><a href=\"#sso-components-explained\" aria-label=\"sso components explained permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>SSO Components: Explained</h3>\n<ul>\n<li>Service Provider: They are applications a consumer visits for service—for example, eCommerce applications. In the SSO ecosystem, the SP is considered a Slave.</li>\n<li>Identity Provider: The service provider receives the consumer authentication status from the Identity Provider. In the SSO ecosystem, the IDP is considered a Master.</li>\n</ul>\n<p>Your organization can implement SSO in the following ways:</p>\n<ul>\n<li>Web SSO: When a single sign-on is required between two or more web applications.</li>\n<li>Mobile SSO: When a single sign-on is required between two or more mobile apps.</li>\n<li>Federated SSO: When a single sign-on is required between third-party applications.</li>\n</ul>\n<p>In the next section of this blog, we are going to discuss only the Web SSO.</p>\n<h2 id=\"what-is-web-sso\" style=\"position:relative;\"><a href=\"#what-is-web-sso\" aria-label=\"what is web sso permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What is Web SSO</h2>\n<p><a href=\"https://www.loginradius.com/web-and-mobile-sso/\">Web SSO</a> is a method of browser-based session management that utilizes browser storage mechanisms like sessionStorage, localStorage, Cookies to maintain the consumer's session across your applications.</p>\n<p>A centralized domain is used to serve the authentication on request, and this centralized domain shares the session with authorized applications.</p>\n<p>So that consumer's logged in to a single application automatically log into another application, independent of the platform or domain the consumer is using.</p>\n<h2 id=\"why-does-your-business-needs-web-sso\" style=\"position:relative;\"><a href=\"#why-does-your-business-needs-web-sso\" aria-label=\"why does your business needs web sso permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why Does Your Business Needs Web SSO</h2>\n<p>Single sign-on directly benefits your organization by gathering a wealth of consumer data and credentials securely in one spot for your services, teams, and applications to use.</p>\n<p>Failing to use SSO will make your consumers notice you in a bad light as they try to navigate your apps and services.</p>\n<p>By contrast, product managers who bring an SSO solution to their organization will stand out because of the many benefits that single sign-on provides for your business:</p>\n<h3 id=\"1-increases-the-productivity-of-it-employees\" style=\"position:relative;\"><a href=\"#1-increases-the-productivity-of-it-employees\" aria-label=\"1 increases the productivity of it employees permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1. Increases the productivity of IT employees</h3>\n<p>Relatively speaking, a single point of access minimizes the time consumers spend dealing with password-related issues/concerns and resources. With a single sign-on, you can:</p>\n<ul>\n<li>Reduce support calls: Consumers with just one password to access all their apps won't require assistance as often.</li>\n<li>Improve consumer experience: Since there's no need to hop between multiple login URLs or reset passwords, consumers reduce the time between 10 to 15 seconds on every sign-in.</li>\n<li>Mitigate security risks: Without risking the security, employees can use SSO functionality for login with their single set of credentials on any device, in any web browser.</li>\n</ul>\n<p>As we can see, the ability to increase the productivity of consumers is one of the most significant benefits of single sign-on.</p>\n<h3 id=\"2-security-capabilities-improve\" style=\"position:relative;\"><a href=\"#2-security-capabilities-improve\" aria-label=\"2 security capabilities improve permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2. Security capabilities improve</h3>\n<p>A few misconceptions regarding the SSO solution implementation, like it weakens the security in case if a master password is stolen, all associated accounts will be compromised.</p>\n<p>This appears to be true in theory, but with common-sense practices, we can reduce password theft with the help of SSO.</p>\n<p>Since consumers only need to remember one password for multiple applications, they're more likely to create a stronger (harder to guess) passphrase and reduce risk by minimizing lousy password habits.</p>\n<p>The following section will discuss how a single sign-on strategy can also be combined with <a href=\"https://www.loginradius.com/blog/2019/06/what-is-multi-factor-authentication/\">multi-factor authentication (MFA)</a> for extra security.</p>\n<h3 id=\"3-combines-risk-based-authentication-rba-with-sso\" style=\"position:relative;\"><a href=\"#3-combines-risk-based-authentication-rba-with-sso\" aria-label=\"3 combines risk based authentication rba with sso permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3. Combines Risk-Based Authentication (RBA) with SSO</h3>\n<p>As mentioned earlier, SSO gives your consumer one \"key\" to sign in to multiple web properties, mobile apps, and third-party systems using one single identity.</p>\n<p>For even more security, you can combine SSO with risk-based authentication (RBA), where organizations and their security team can monitor consumer patterns.</p>\n<p>This way, if you see any unusual consumer behavior, such as the wrong IP, or multiple login failures, an organization can ask for extra verification of identity; if the consumer fails at this point, the organization can block or suspend their access to the account.</p>\n<p>By using this effective combination, organizations can prevent cyberattacks on their websites or apps. They can feel safe from cybercriminals from stealing data or draining IT resources.</p>\n<h3 id=\"4-eliminates-password-fatigue\" style=\"position:relative;\"><a href=\"#4-eliminates-password-fatigue\" aria-label=\"4 eliminates password fatigue permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>4. Eliminates password fatigue</h3>\n<p>Cybercrime can be prevented. Security professionals demand a unique password for every single application. It means that the average consumer must remember a lot of passwords for office and personal usage.</p>\n<p>Unfortunately, this often leads to \"password fatigue.\" How does password fatigue hurt enterprises? In short, more passwords, more problems.</p>\n<p>If consumers are experiencing a challenging time signing in, they'll leave the organization's app or site before the conversion.</p>\n<p>A <a href=\"https://baymard.com/blog/password-requirements-and-password-reset\">recent usability study</a> by Baymard Institute proves this point. In this study, Baymard tested existing account consumers at two e-commerce sites (Amazon and ASOS) and found that 18.75% of consumers abandon their carts due to forgotten passwords or password reset issues.</p>\n<p>This is the considerable benefit of web SSO that it's only one password for consumers to remember for all of the enterprise's applications and websites.</p>\n<h3 id=\"5-streamlines-the-consumer-experience\" style=\"position:relative;\"><a href=\"#5-streamlines-the-consumer-experience\" aria-label=\"5 streamlines the consumer experience permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>5. Streamlines the consumer experience</h3>\n<p>As repeated logins are no longer required with SSO, consumers can enjoy a modern digital experience. The benefits for enterprises include consumer satisfaction, an increase in loyalty, and higher conversion rates.</p>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>In this article, we talked about the functionality, concept, and how Web Single-Sign-On can <a href=\"https://www.loginradius.com/blog/identity/2021/03/calcualting-roi-build-vs-buy/\">enhance business ROI</a>. We learned how it increases agility, security, convenience and streamlines the experience for your business and consumers alike.</p>\n<p>However, before implementing any functionality on your website, analyze and consider the pros and cons from every possible angle.</p>\n<p>Cheers!</p>\n<p><a href=\"https://www.loginradius.com/book-a-demo/\"><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 30.307692307692307%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAABdElEQVQY002RO0/CUBzFG6PtbZWHCAmRmBB5P8vDII9SSC0omog4oAEGjZMO6OKEuLjoJ2Fx0cSBwUQnXZxcHPwux38LJA7nNvfec8+5v1tOCCiwpbbhye2BxbYgBMtgIRVioDRRsARGXxZUzLlEHmehBaesQ4rrEMPViYf2DR9nDGKkChbVICVqsMt1WJI1sHCFwhUsUIFohJH49TxECvRUjhDW2mAbB5iP6hB8hUkhiRPN5KIZYJdrsEYrcCSpmQqMm6/m9ylUhSulY7N5ivROB3L9GOlGF3Ktbc4zuz341UPw/uIk0ESbBjoSGlYIx8BfzjSwVmyCEYEUUmCPa3Bnd+hwC75yC95S05SxbolU/iEbOCFCpDexEfIioTNCNd6Tp6IlMnNuGeeDe3z//OLx5RWj5zFGT2O8fXxh/P4Ja6w6vSEFCnTIlW2YiDzhzX7ATFKojDlvjpBPcDF4QPdyiG5/iE7/BmfXd+hd3VKpCoG8fzxWw2+c+yTpAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"book-a-demo-loginradius\"\n        title=\"book-a-demo-loginradius\"\n        src=\"/static/fcc4c4b5dc38cc4528f99d09480f4eb2/e5715/book-a-demo-loginradius.png\"\n        srcset=\"/static/fcc4c4b5dc38cc4528f99d09480f4eb2/a6d36/book-a-demo-loginradius.png 650w,\n/static/fcc4c4b5dc38cc4528f99d09480f4eb2/e5715/book-a-demo-loginradius.png 768w,\n/static/fcc4c4b5dc38cc4528f99d09480f4eb2/63ff0/book-a-demo-loginradius.png 2887w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"June 10, 2021","updated_date":null,"description":" Web SSO is a part of Single Sign-On that brings everything together. Each consumer has one account and one set of credentials that they can use anywhere to interact with your brand. Failing to use SSO will make your consumers notice you in a bad light as they try to navigate your apps and services.","title":"What is Web SSO","tags":["web sso","mfa","data security"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.6129032258064515,"src":"/static/2009b1a68cff4cd52739d5274e78aa57/33aa5/web-sso.jpg","srcSet":"/static/2009b1a68cff4cd52739d5274e78aa57/f836f/web-sso.jpg 200w,\n/static/2009b1a68cff4cd52739d5274e78aa57/2244e/web-sso.jpg 400w,\n/static/2009b1a68cff4cd52739d5274e78aa57/33aa5/web-sso.jpg 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Vaibhav Jain","github":null,"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":"<h1 id=\"reacts-context-api-guide-with-example\" style=\"position:relative;\"><a href=\"#reacts-context-api-guide-with-example\" aria-label=\"reacts context api guide with example permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>React's Context API Guide with Example</h1>\n<p>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.<br>\nAccording to the React doc: </p>\n<blockquote>\n<p>Context provides a way to pass data through the component tree\nwithout having to pass props down manually at every level.</p>\n</blockquote>\n<p>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.</p>\n<h2 id=\"when-to-use-context\" style=\"position:relative;\"><a href=\"#when-to-use-context\" aria-label=\"when to use context permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>When to use context</h2>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk11\">App</span><span class=\"mtk1\"> = () </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk15\">return</span><span class=\"mtk1\">(</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">ParentClass</span><span class=\"mtk1\"> </span><span class=\"mtk12\">color</span><span class=\"mtk1\">= </span><span class=\"mtk8\">&quot;blue&quot;</span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk11\">ParentClass</span><span class=\"mtk1\"> = (</span><span class=\"mtk12\">props</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">ChildClass</span><span class=\"mtk1\"> </span><span class=\"mtk12\">color</span><span class=\"mtk1\">= </span><span class=\"mtk4\">{</span><span class=\"mtk12\">props</span><span class=\"mtk1\">.</span><span class=\"mtk12\">color</span><span class=\"mtk4\">}</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk11\">ChildClass</span><span class=\"mtk1\"> = (</span><span class=\"mtk12\">props</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">GrandChildClass</span><span class=\"mtk1\"> </span><span class=\"mtk12\">color</span><span class=\"mtk1\">= </span><span class=\"mtk4\">{</span><span class=\"mtk12\">props</span><span class=\"mtk1\">.</span><span class=\"mtk12\">color</span><span class=\"mtk4\">}</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk11\">GrandChildClass</span><span class=\"mtk1\"> = (</span><span class=\"mtk12\">props</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Color: </span><span class=\"mtk4\">{</span><span class=\"mtk12\">props</span><span class=\"mtk1\">.</span><span class=\"mtk12\">color</span><span class=\"mtk4\">}</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">)</span></span></code></pre>\n<p>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 <code>Context</code> solves. Context is designed the share values that can be considered \"global\" such as preferred language, current user, or theme. </p>\n<p>Using context, we can avoid passing props. Let's create the above example code using context:</p>\n<p>We 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 <code>/src</code> folder.</p>\n<h3 id=\"create-context\" style=\"position:relative;\"><a href=\"#create-context\" aria-label=\"create context permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Create Context</h3>\n<p>Using React.createContext, we can create context and pass anything as an argument to <code>React.createContext</code>. In our case, we are passing \"white\" color to provide a light theme.</p>\n<p>This will also give me  <code>ColorContext.Provider</code>  and  <code>ColorContext.Consumer</code>. What these two components do is straightforward:</p>\n<ul>\n<li><strong>Provider</strong>  - The component that provides the value</li>\n<li><strong>Consumer</strong>  - A component that is consuming the value</li>\n<li>\n<p>import React from \"react\";</p>\n<p>const ColorContext = React.createContext(\"white\");\nexport default ColorContext;</p>\n</li>\n</ul>\n<p>To 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.</p>\n<h3 id=\"providing-context\" style=\"position:relative;\"><a href=\"#providing-context\" aria-label=\"providing context permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Providing Context</h3>\n<p>After 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 <code>ColorContext.Provider</code>.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ColorContext</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./ColorContext&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">App</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">color</span><span class=\"mtk1\">= </span><span class=\"mtk8\">&quot;white&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">ColorContext.Provider</span><span class=\"mtk1\"> </span><span class=\"mtk12\">value</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">{</span><span class=\"mtk12\">color</span><span class=\"mtk4\">}</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">className</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;App&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">header</span><span class=\"mtk1\"> </span><span class=\"mtk12\">className</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;App-header&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">              </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">img</span><span class=\"mtk1\"> </span><span class=\"mtk12\">src</span><span class=\"mtk1\">=</span><span class=\"mtk4\">{</span><span class=\"mtk12\">logo</span><span class=\"mtk4\">}</span><span class=\"mtk1\"> </span><span class=\"mtk12\">className</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;App-logo&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">alt</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;logo&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">              </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">h1</span><span class=\"mtk1\"> </span><span class=\"mtk12\">className</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;App-title&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Welcome to my web page</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">h1</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">              </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">header</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk10\">ColorContext.Provider</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span></code></pre>\n<h3 id=\"consuming-the-context\" style=\"position:relative;\"><a href=\"#consuming-the-context\" aria-label=\"consuming the context permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Consuming the context</h3>\n<p>The approach to providing context is the same for class and functional components but consuming is a little different for both.</p>\n<h4 id=\"class-component\" style=\"position:relative;\"><a href=\"#class-component\" aria-label=\"class component permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>class component</h4>\n<p>Mainly used way to accessing context in class component using static <code>contextType</code>. After that, you can access the context value using <code>this.context</code>.  You can refer to it in any lifecycle method and even in the render method.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ColorContext</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./ColorContext&#39;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Page</span><span class=\"mtk1\"> </span><span class=\"mtk4\">extends</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Component</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">static</span><span class=\"mtk1\"> </span><span class=\"mtk12\">contextType</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">ColorContext</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">componentDidMount</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">colorValue</span><span class=\"mtk1\">= </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">context</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk10\">console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">log</span><span class=\"mtk1\">(</span><span class=\"mtk12\">colorValue</span><span class=\"mtk1\">) </span><span class=\"mtk3\">//  &quot;white&quot; </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">render</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Color Value is </span><span class=\"mtk4\">{</span><span class=\"mtk12\">colorValue</span><span class=\"mtk4\">}</span><span class=\"mtk1\"> </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>The traditional way to accessing context values is by wrapping the child component in <code>Consumer</code>. From there, You can access values as props.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">ColorContext</span><span class=\"mtk1\">} </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./ColorContext&#39;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Page</span><span class=\"mtk1\"> </span><span class=\"mtk4\">extends</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Component</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">render</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">ColorContext.Consumer</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk4\">{</span><span class=\"mtk1\">(</span><span class=\"mtk12\">props</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span><span class=\"mtk4\">{</span><span class=\"mtk12\">props</span><span class=\"mtk4\">}</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        }</span><span class=\"mtk4\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk10\">ColorContext.Consumer</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    )</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<h4 id=\"functional-component-and-hooks\" style=\"position:relative;\"><a href=\"#functional-component-and-hooks\" aria-label=\"functional component and hooks permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Functional component and Hooks</h4>\n<p> You can use <code>useContext</code>in functional components and its equivalent of <code>static contextType</code>. \t</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">React</span><span class=\"mtk1\">, { </span><span class=\"mtk12\">useContext</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;react&#39;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ColorContextfrom</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./ColorContext&#39;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">export</span><span class=\"mtk1\"> </span><span class=\"mtk12\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">HomePage</span><span class=\"mtk1\"> = () =&gt; {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">colorValue</span><span class=\"mtk1\">= </span><span class=\"mtk12\">useContext</span><span class=\"mtk1\">(</span><span class=\"mtk12\">ColorContext</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">return</span><span class=\"mtk1\"> &lt;</span><span class=\"mtk12\">div</span><span class=\"mtk1\">&gt;{</span><span class=\"mtk12\">ColorContext</span><span class=\"mtk1\">}&lt;/</span><span class=\"mtk12\">div</span><span class=\"mtk1\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<h3 id=\"updating-context\" style=\"position:relative;\"><a href=\"#updating-context\" aria-label=\"updating context permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Updating Context</h3>\n<p>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 <code>ColorContext.js</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">React</span><span class=\"mtk1\">, { </span><span class=\"mtk12\">Component</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;react&#39;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ColorContext</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">React</span><span class=\"mtk1\">.</span><span class=\"mtk11\">createContext</span><span class=\"mtk1\">()</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">ColorContextProvider</span><span class=\"mtk1\"> </span><span class=\"mtk4\">extends</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Component</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk3\">// Context state</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">state</span><span class=\"mtk1\"> = {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">color:</span><span class=\"mtk8\">&quot;&quot;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk3\">// Method to update state</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">setColor</span><span class=\"mtk1\"> = (</span><span class=\"mtk12\">color</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk11\">setState</span><span class=\"mtk1\">((</span><span class=\"mtk12\">prevState</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> ({ </span><span class=\"mtk12\">color</span><span class=\"mtk1\">}))</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">render</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">children</span><span class=\"mtk1\"> } = </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">props</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">color</span><span class=\"mtk1\"> } = </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">state</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">ColorContext.Provider</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">value</span><span class=\"mtk1\">=</span><span class=\"mtk4\">{</span><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk12\">color</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          this.</span><span class=\"mtk12\">setColor</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        }</span><span class=\"mtk4\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk4\">{</span><span class=\"mtk12\">children</span><span class=\"mtk4\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk10\">ColorContext.Provider</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    )</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk15\">default</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ColorContext</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">ColorContextProvider</span><span class=\"mtk1\"> }</span></span></code></pre>\n<p>Now you can update and view the user from the Context method.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ColorContext</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./ColorContext&#39;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Page</span><span class=\"mtk1\"> </span><span class=\"mtk4\">extends</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Component</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">static</span><span class=\"mtk1\"> </span><span class=\"mtk12\">contextType</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">ColorContext</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">render</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">color</span><span class=\"mtk1\">, </span><span class=\"mtk12\">setColor</span><span class=\"mtk1\"> } = </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">context</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">button</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk12\">onClick</span><span class=\"mtk1\">=</span><span class=\"mtk4\">{</span><span class=\"mtk1\">() </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">newColorValue</span><span class=\"mtk1\">= </span><span class=\"mtk8\">&quot;black&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk11\">setColor</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">newColorValue</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          }</span><span class=\"mtk4\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          Update Color</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">button</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span><span class=\"mtk4\">{</span><span class=\"mtk8\">`Current Color Value: </span><span class=\"mtk4\">${</span><span class=\"mtk12\">color</span><span class=\"mtk4\">}</span><span class=\"mtk8\">`</span><span class=\"mtk4\">}</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    )</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>In my opinion, It is much easier to use than Redux and requires very little code, so why wouldn't you use it?</p>\n<p>The problem with the context is simple: ** Everything that consumes the context re-renders each time the state of that reference changes. **</p>\n<p>This 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.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk17 { color: #808080; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n</style>","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":"Today a large number of professionals are working remotely from different locations due to the pandemic. Are you worried that your marketing…","fields":{"slug":"/growth/best-brainstorming-tools-and-techniques/"},"html":"<p>Today a large number of professionals are working remotely from different locations due to the pandemic. Are you worried that your marketing team won't be able to generate profitable ideas from isolation? Don't worry! According to a <a href=\"https://www.cosocloud.com/press-releases/connectsolutions-survey-shows-working-remotely-benefits-employers-and-employees\">report by CoSo Cloud</a>, 77% of work from home workers have become more productive during isolation.</p>\n<p>Wondering how?</p>\n<p>Research shows that <a href=\"https://velocityglobal.com/blog/the-complete-guide-how-to-successfully-build-and-manage-a-remote-international-workforce/\">80% of remote workers</a> say that their productivity has improved with real-time collaborative solutions. Virtual  brainstorming tools can help you grow your ideas, rethink your marketing strategies, and collaborate theme for successful outcomes.</p>\n<p>A brainstorming tool is strategically designed to help organize and gather ideas. It helps in collaborative brainstorming online, making it easier to harness collective mentality to <a href=\"https://www.loginradius.com/blog/fuel/20-content-ideas-for-most-engaging-b2b-linkedin-posts/\">create content strategies</a>.</p>\n<p>So, let's start your online brainstorming practice  tips with the tools first.</p>\n<h2 id=\"5-best-brainstorming-tools\" style=\"position:relative;\"><a href=\"#5-best-brainstorming-tools\" aria-label=\"5 best brainstorming tools permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>5 Best Brainstorming Tools</h2>\n<h3 id=\"1-ideaboardz\" style=\"position:relative;\"><a href=\"#1-ideaboardz\" aria-label=\"1 ideaboardz permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1. IdeaBoardz</h3>\n<p>IdeaBoardz is an easy-to-use collaborative brainstorming tool that can help your team members to combine their ideas in one location online. With the help of this tool, your teammates can post notes on a collaborative board and even export the board as a PDF or excel file.</p>\n<h3 id=\"2-google-documents\" style=\"position:relative;\"><a href=\"#2-google-documents\" aria-label=\"2 google documents permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2. Google Documents</h3>\n<p>Google Documents is a popular tool to use for brainstorming as it has all the resources that your team may need during brainstorming. It supports multiple files, including TXT, PDF, DOCX, and HTML. Plus, it lets team members track changes in the docs too.</p>\n<h3 id=\"3-coggle\" style=\"position:relative;\"><a href=\"#3-coggle\" aria-label=\"3 coggle permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3. Coggle</h3>\n<p>Coggle is another result-oriented brainstorming tool that allows real-time collaboration. It helps share flow charts, complex algorithms, diagrams, mind maps effortlessly with other team members. Plus, Coggle allows unlimited image uploads, the addition of floating texts, etc.</p>\n<h3 id=\"4-wisemapping\" style=\"position:relative;\"><a href=\"#4-wisemapping\" aria-label=\"4 wisemapping permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>4. WiseMapping</h3>\n<p>WiseMapping is an effective tool for brainstorming and mind mapping. This tool is apt for small groups and individuals. Plus, one can install it on their devices or use it online. Moreover, WiseMapping is a free tool for even business users and allows a teammate to share his/her mind map online with other members. The most attractive features of this tool include customizable font, customizable colors, easy export of maps, etc.</p>\n<h3 id=\"5-mindmup\" style=\"position:relative;\"><a href=\"#5-mindmup\" aria-label=\"5 mindmup permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>5. MindMup</h3>\n<p>MindMup is a tremendous tool for collaboration planning and brainstorming with its advanced features. It allows you to convert maps easily to PowerPoint and PDF and lets you share and publish your maps online. Further, MindMup enables you to save your mind maps to Google Drive and allows you to access them later through any device. It has an in-built keyboard shortcuts feature too that lets you and your team members jot down ideas faster.</p>\n<p>So, once you've ensured that you have the people you need and the tools and resources they need, here is what you have to do next.</p>\n<p>Also Read: <a href=\"https://www.loginradius.com/blog/fuel/How-to-Make-Businesses-Marketing-Plans-After-Coronavirus/\">Thinking Beyond the Pandemic: How to Make Marketing Plans After Coronavirus</a></p>\n<h2 id=\"virtual-brainstorming-tipstricks\" style=\"position:relative;\"><a href=\"#virtual-brainstorming-tipstricks\" aria-label=\"virtual brainstorming tipstricks permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Virtual Brainstorming Tips/Tricks</h2>\n<p>Here are some of the effective tips for running brainstorming sessions for your <a href=\"https://www.loginradius.com/blog/growth/top-5-marketing-strategies-to-power-up-your-business/\">marketing strategies</a>.</p>\n<h3 id=\"1-gather-team-from-various-disciplines\" style=\"position:relative;\"><a href=\"#1-gather-team-from-various-disciplines\" aria-label=\"1 gather team from various disciplines permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1. Gather team from various disciplines</h3>\n<p>Virtual brainstorming is a great way to get a wide range of teams on the same platform. Therefore, you must invite people from various disciplines in the organization, as well, and get their ideas and perspectives. It will help you acquire a broader set of suggestions and increase the creativity of your team.</p>\n<h3 id=\"2-start-with-icebreakers\" style=\"position:relative;\"><a href=\"#2-start-with-icebreakers\" aria-label=\"2 start with icebreakers permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2. Start with icebreakers</h3>\n<p>Want to host a Virtual Brainstorm session that will bring out the creativity of your teammates? Start with icebreakers to encourage people to verbalize their ideas often. The key to increasing participation and energy is by organizing a brainstorming session that won't stifle spontaneity. So, start with motivating words and get your teammates on their feet from the beginning.</p>\n<h3 id=\"3-set-expectations\" style=\"position:relative;\"><a href=\"#3-set-expectations\" aria-label=\"3 set expectations permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3. Set expectations</h3>\n<p>Setting out ground rules lets people be clear on the purpose of the meeting. Plus, prepping ahead readies a team more open to participating. To make your collaborative brainstorming online successful, brief your team about what they need to prepare and what to expect from the session. Doing this will increase confidence and engagement when you host an online brainstorming  session.</p>\n<h3 id=\"4-keep-a-moderator\" style=\"position:relative;\"><a href=\"#4-keep-a-moderator\" aria-label=\"4 keep a moderator permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>4. Keep a moderator</h3>\n<p>Moderators can help focus on the goals, clarify ideas, motivate introverts, and keep a session engaging. A perfect idea may not come at the beginning of a session, but keeping an eye out for people with unique ideas can help you get a thoughtful suggestion in the first session. You can choose a moderator who can share a brief idea about the session ahead of the scheduled meeting time. Doing this will help your team stick to the goal during the brainstorm session.</p>\n<h3 id=\"5-let-everyone-speak\" style=\"position:relative;\"><a href=\"#5-let-everyone-speak\" aria-label=\"5 let everyone speak permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>5. Let everyone speak</h3>\n<p>If only a few people talk in your meeting, you won't get as many business ideas as you need. Some of the introverts of your team may not come forward at all. Therefore, it is crucial to approach the session more supportively and positively. Press the Mute button whenever needed. Giving everyone a chance to speak by encouraging others to set themselves to mute will let others speak up, and everyone will listen and hear each other.</p>\n<h3 id=\"6-experiment-with-different-techniques-and-tools\" style=\"position:relative;\"><a href=\"#6-experiment-with-different-techniques-and-tools\" aria-label=\"6 experiment with different techniques and tools permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>6. Experiment with different techniques and tools</h3>\n<p>Each brainstorming session doesn't have to be the same. If you are thinking about how to boost creativity? You can use different mind mapping  tools and an online brainstorming board to create a plan of opportunities, information, and issues.</p>\n<h3 id=\"7-appreciate-the-team\" style=\"position:relative;\"><a href=\"#7-appreciate-the-team\" aria-label=\"7 appreciate the team permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>7. Appreciate the team</h3>\n<p>Want to motivate your team to participate in brainstorm sessions in the future? Remember, it is vital to acknowledge their efforts, appreciate, and thank them.</p>\n<h2 id=\"wrapping-up\" style=\"position:relative;\"><a href=\"#wrapping-up\" aria-label=\"wrapping up permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Wrapping Up</h2>\n<p>You can also try the rapid virtual Ideation technique, where you give your participants a limited timescale to come up with ideas. You will be surprised that sometimes even time pressure can bring the best out of people. Finally, use the above tips and tools to spark your team's creativity now and <a href=\"https://www.loginradius.com/blog/fuel/2021/02/tips-managing-remote-team/\">manage remote teams efficiently.</a></p>\n<p>Keep the ideas flowing!</p>\n<p><a href=\"https://www.loginradius.com/book-a-demo/\"><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 30.307692307692307%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAABdElEQVQY002RO0/CUBzFG6PtbZWHCAmRmBB5P8vDII9SSC0omog4oAEGjZMO6OKEuLjoJ2Fx0cSBwUQnXZxcHPwux38LJA7nNvfec8+5v1tOCCiwpbbhye2BxbYgBMtgIRVioDRRsARGXxZUzLlEHmehBaesQ4rrEMPViYf2DR9nDGKkChbVICVqsMt1WJI1sHCFwhUsUIFohJH49TxECvRUjhDW2mAbB5iP6hB8hUkhiRPN5KIZYJdrsEYrcCSpmQqMm6/m9ylUhSulY7N5ivROB3L9GOlGF3Ktbc4zuz341UPw/uIk0ESbBjoSGlYIx8BfzjSwVmyCEYEUUmCPa3Bnd+hwC75yC95S05SxbolU/iEbOCFCpDexEfIioTNCNd6Tp6IlMnNuGeeDe3z//OLx5RWj5zFGT2O8fXxh/P4Ja6w6vSEFCnTIlW2YiDzhzX7ATFKojDlvjpBPcDF4QPdyiG5/iE7/BmfXd+hd3VKpCoG8fzxWw2+c+yTpAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"book-a-demo-Consultation\"\n        title=\"book-a-demo-Consultation\"\n        src=\"/static/fcc4c4b5dc38cc4528f99d09480f4eb2/e5715/book-a-demo-loginradius.png\"\n        srcset=\"/static/fcc4c4b5dc38cc4528f99d09480f4eb2/a6d36/book-a-demo-loginradius.png 650w,\n/static/fcc4c4b5dc38cc4528f99d09480f4eb2/e5715/book-a-demo-loginradius.png 768w,\n/static/fcc4c4b5dc38cc4528f99d09480f4eb2/63ff0/book-a-demo-loginradius.png 2887w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"June 09, 2021","updated_date":null,"description":"A good brainstorming tool should be specific, have a good concept behind it, and most importantly, it should help you gather better ideas. Bonus points if these qualities are in the same package. Read this blog to learn about the best brainstorming tools and techniques that you can use at work.","title":"Boost Creativity With The Best Brainstorming Tools And Techniques","tags":null,"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/291a6728f108eb16ee5b35e4b98601d4/3c6b6/best-brainstorming-tools-and-techniques.jpg","srcSet":"/static/291a6728f108eb16ee5b35e4b98601d4/f836f/best-brainstorming-tools-and-techniques.jpg 200w,\n/static/291a6728f108eb16ee5b35e4b98601d4/2244e/best-brainstorming-tools-and-techniques.jpg 400w,\n/static/291a6728f108eb16ee5b35e4b98601d4/3c6b6/best-brainstorming-tools-and-techniques.jpg 666w","sizes":"(max-width: 666px) 100vw, 666px"}}},"author":{"id":"Rashmi Mathur","github":null,"avatar":null}}}},{"node":{"excerpt":"With more and more enterprises inclining towards a secure and user-friendly mode of authorization, OAuth 2.0 is the need of the hour.  OAuth…","fields":{"slug":"/identity/oauth2-0-guide/"},"html":"<p>With more and more enterprises inclining towards a secure and user-friendly mode of authorization, OAuth 2.0 is the need of the hour. </p>\n<p>OAuth 2.0 (Open Authorization) is an industry-standard authorization protocol that allows a website or an application to access resources on behalf of a particular user. </p>\n<p>Some people may <a href=\"https://www.loginradius.com/blog/identity/2020/06/authentication-vs-authorization-infographic/#:~:text=In%20other%20words%2C%20authentication%20is,and%20privileges%20of%20a%20user.\">relate authorization with authentication</a> and believe it to be the same thing. But both of them are different and play a crucial role in providing a secure ecosystem. </p>\n<p>While authentication verifies the identity of an individual, authorization offers consented access along with restricted actions of what users can perform on resources and other crucial data. </p>\n<p>In a nutshell, OAuth 2.0 is an authorization protocol that is designed to control access within a web application or a mobile application. </p>\n<p>Let’s quickly learn more about this authorization protocol and why enterprises need to put their best foot forward in adopting industry-standard authorization. </p>\n<h2 id=\"why-is-now-the-best-time-to-implement-oauth-20--for-your-organization\" style=\"position:relative;\"><a href=\"#why-is-now-the-best-time-to-implement-oauth-20--for-your-organization\" aria-label=\"why is now the best time to implement oauth 20  for your organization permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why is NOW the Best time to Implement OAuth 2.0  for Your Organization?</h2>\n<p>Since many businesses have adopted remote working environments and most media and other industries are facing a huge increase in the number of subscriptions, OAuth 2.0 is undoubtedly the immediate necessity. </p>\n<p>Providing restricted access to certain resources is becoming quite challenging for enterprises handling a huge client base and has certainly created new challenges for the implementation teams. </p>\n<p>Moreover, ensuring the <a href=\"https://www.loginradius.com/blog/identity/2020/12/data-security-best-practices/\">highest level of security</a> for both the consumers and the organization is yet another big challenge as the number of security breaches increased amid the global pandemic. </p>\n<h2 id=\"why-does-your-business-need-oauth-20\" style=\"position:relative;\"><a href=\"#why-does-your-business-need-oauth-20\" aria-label=\"why does your business need oauth 20 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why Does Your Business Need OAuth 2.0?</h2>\n<p>Let’s understand with an example. </p>\n<p>Suppose you need to edit photos through an application. This application now requires access to your photos placed in Google Photos on your phone. </p>\n<p>So technically, you need to provide your Gmail credentials to access photos, isn’t it? But wait, that’s quite risky as it not only offers access to your photos but also to sensitive information in your other connected applications like email and drive. </p>\n<p>Here’s where OAuth 2.0 comes into play. Using OAuth 2.0 is the perfect solution in this scenario as no one would ever provide their login credentials to another application. </p>\n<p>The photo-editing application will first take authorization to access photos from Google, which would ensure that only access to photos is granted to the application and that too for a limited period of time once the user approves the same. </p>\n<p>The same thing goes for every business offering resources or data access to users. The best part about OAuth 2.0 is that everything is managed securely and there aren’t any chances of a data breach or unauthorized access. </p>\n<p>So, if you’re an enterprise that has a huge client base and needs to offer certain services and access to resources, OAuth2.0 is a must-have solution in place. </p>\n<p><strong>Also Read</strong>: <a href=\"https://www.loginradius.com/blog/engineering/oauth2/\">Getting Started with OAuth 2.0.</a> </p>\n<h2 id=\"what-are-the-principles-of-oauth-20\" style=\"position:relative;\"><a href=\"#what-are-the-principles-of-oauth-20\" aria-label=\"what are the principles of oauth 20 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What are the Principles of OAuth 2.0?</h2>\n<p>Since OAuth 2.0 is an authorization protocol, it is exclusively designed as a means to grant access to resources or data within an application or website. </p>\n<p>The basic working principle of OAuth 2.0 is based on the use of access tokens. This access token is nothing but a small piece of data representing the authorization access on behalf of the end-user. </p>\n<p>If a user has an access token, he/she can access the resources or data within that particular application for a particular period of time. Once the token expires, the access is revoked. </p>\n<p>The most common format for the token is JWT (JSON Web Token), and it contains the user data along with the expiration date for security reasons. </p>\n<h2 id=\"features-of-oauth-20\" style=\"position:relative;\"><a href=\"#features-of-oauth-20\" aria-label=\"features of oauth 20 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Features of OAuth 2.0</h2>\n<p>As an authorization protocol, OAuth 2.0 offers endless features and capabilities to enterprises as well as users. Some of them include: </p>\n<ul>\n<li>Simple and secure access to resources without the need to share the credentials</li>\n<li>Offers user agent flows to ensure client applications are running using a scripting language, including JavaScript.</li>\n<li>Accesses data tokens without the need of credentials and stores data in an online file system of a particular user</li>\n</ul>\n<h2 id=\"advantages-of-oauth-20\" style=\"position:relative;\"><a href=\"#advantages-of-oauth-20\" aria-label=\"advantages of oauth 20 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Advantages of OAuth 2.0</h2>\n<p>Numerous businesses are leveraging OAuth 2.0 through a dedicated CIAM (consumer identity and access management) solution like LoginRadius. Here are some advantages of relying on an authorization protocol like OAuth 2.0: </p>\n<ul>\n<li>Flexible and secure as it relies on Secure Sockets Layer (SSL), which ensures data is secure between web server and browsers </li>\n<li>OAuth 2.0 allows limited access to user’s data seeking access to resources. Offers limited access until the token expires</li>\n<li>Shares user data without any chance of personal data breach of users seeking an access</li>\n<li>Easy implementation and better authentication authorization through OAuth 2.0 </li>\n<li>It can be used to handle multiple requests and can cater to a number of users at a single time. </li>\n</ul>\n<h2 id=\"final-thoughts\" style=\"position:relative;\"><a href=\"#final-thoughts\" aria-label=\"final thoughts permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Final Thoughts</h2>\n<p>Ensuring the highest level of security and confidentiality is what every business needs in today’s era. OAuth 2.0 enables businesses to securely provide access to certain resources and sensitive data without a user’s login credentials. </p>\n<p>Businesses seeking the finest modes of authentication coupled with authorization can consider <a href=\"https://www.loginradius.com/\">LoginRadius CIAM</a> that enables a flawless experience coupled with robust security.</p>\n<p>The LoginRadius CIAM is designed to empower businesses by offering the finest user experience and maximum security through industry-standard protocols including OAuth 2.0.</p>\n<p><a href=\"https://www.loginradius.com/book-a-demo/\"><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 30.307692307692307%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAABdElEQVQY002RO0/CUBzFG6PtbZWHCAmRmBB5P8vDII9SSC0omog4oAEGjZMO6OKEuLjoJ2Fx0cSBwUQnXZxcHPwux38LJA7nNvfec8+5v1tOCCiwpbbhye2BxbYgBMtgIRVioDRRsARGXxZUzLlEHmehBaesQ4rrEMPViYf2DR9nDGKkChbVICVqsMt1WJI1sHCFwhUsUIFohJH49TxECvRUjhDW2mAbB5iP6hB8hUkhiRPN5KIZYJdrsEYrcCSpmQqMm6/m9ylUhSulY7N5ivROB3L9GOlGF3Ktbc4zuz341UPw/uIk0ESbBjoSGlYIx8BfzjSwVmyCEYEUUmCPa3Bnd+hwC75yC95S05SxbolU/iEbOCFCpDexEfIioTNCNd6Tp6IlMnNuGeeDe3z//OLx5RWj5zFGT2O8fXxh/P4Ja6w6vSEFCnTIlW2YiDzhzX7ATFKojDlvjpBPcDF4QPdyiG5/iE7/BmfXd+hd3VKpCoG8fzxWw2+c+yTpAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"book-free-demo-loginradius\"\n        title=\"book-free-demo-loginradius\"\n        src=\"/static/fcc4c4b5dc38cc4528f99d09480f4eb2/e5715/book-a-demo-loginradius.png\"\n        srcset=\"/static/fcc4c4b5dc38cc4528f99d09480f4eb2/a6d36/book-a-demo-loginradius.png 650w,\n/static/fcc4c4b5dc38cc4528f99d09480f4eb2/e5715/book-a-demo-loginradius.png 768w,\n/static/fcc4c4b5dc38cc4528f99d09480f4eb2/63ff0/book-a-demo-loginradius.png 2887w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"June 08, 2021","updated_date":null,"description":" OAuth 2.0 is an authorization protocol designed to control access within a web application or a mobile application. Here’s an interesting read showcasing the role of OAuth 2.0 for offering secure access to resources and why enterprises should get it in place.","title":"Working With Industry Authorization: A Beginner's Guide to OAuth 2.0","tags":["data security","authorization","cx"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7543859649122806,"src":"/static/a3f026374bca0b5c83d8c0139a19818d/6a52d/OAuth2.0-guide-cover.jpg","srcSet":"/static/a3f026374bca0b5c83d8c0139a19818d/f836f/OAuth2.0-guide-cover.jpg 200w,\n/static/a3f026374bca0b5c83d8c0139a19818d/6a52d/OAuth2.0-guide-cover.jpg 338w","sizes":"(max-width: 338px) 100vw, 338px"}}},"author":{"id":"Vishal Sharma","github":null,"avatar":null}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"<p>Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.</p>\n<p>We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the <a href=\"https://www.loginradius.com/\">LoginRadius website</a>—to be faster, more intuitive, and developer-first in every way.</p>\n<p>The goal? Having them spend less time searching and more time building.</p>\n<h2 id=\"whats-new-and-improved-on-the-loginradius-website\" style=\"position:relative;\"><a href=\"#whats-new-and-improved-on-the-loginradius-website\" aria-label=\"whats new and improved on the loginradius website permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What’s New and Improved on the LoginRadius Website?</h2>\n<p>LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.</p>\n<p>Here’s a closer look at what’s new and why it’s important:</p>\n<h3 id=\"a-developer-friendly-dark-theme\" style=\"position:relative;\"><a href=\"#a-developer-friendly-dark-theme\" aria-label=\"a developer friendly dark theme permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>A Developer-Friendly Dark Theme</h3>\n<p><img src=\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\" alt=\"This image shows how LoginRadius offers several authentication methods like traditional login, social login, passwordless login, passkeys and more in a dark mode.\">    </p>\n<p>Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.</p>\n<p>The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.</p>\n<p>So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.</p>\n<h3 id=\"clear-categorization-for-loginradius-capabilities\" style=\"position:relative;\"><a href=\"#clear-categorization-for-loginradius-capabilities\" aria-label=\"clear categorization for loginradius capabilities permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Clear Categorization for LoginRadius Capabilities</h3>\n<p><img src=\"/e5358b82be414940f3fb146013845933/capabilities.webp\" alt=\"This image shows a breakdown of all the LoginRadius CIAM capabilities, including authentication, security, UX, scalability and multi-brand management.\"></p>\n<p>We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:</p>\n<ul>\n<li>Authentication: Easily understand <a href=\"https://www.loginradius.com/blog/identity/authentication-option-for-your-product/\">how to choose the right login method</a>, from traditional passwords and OTPs to social login, federated SSO, and passkeys with few lines of code.</li>\n<li>Security: Implement no-code security features like bot detection, IP throttling, breached password alerts, DDoS protection, and adaptive MFA to safeguard user accounts.</li>\n<li>User Experience: Leverage AI builder, hosted pages, and drag-and-drop workflows to create smooth, branded sign-up and login experiences.</li>\n<li>High Performance &#x26; Scalability: Confidently scale with sub-100ms API response times, 100% uptime, 240K+ RPS, and 28+ global data center regions.</li>\n<li>Multi-Brand Management: Efficiently manage multiple identity apps, choosing isolated or shared data stores based on your brand’s unique needs.</li>\n</ul>\n<p>This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.</p>\n<h3 id=\"developer-first-navigation\" style=\"position:relative;\"><a href=\"#developer-first-navigation\" aria-label=\"developer first navigation permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Developer-First Navigation</h3>\n<p><img src=\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\" alt=\"This image shows the LoginRadius menu bar, highlighting the developer dropdown.\">   </p>\n<p>We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.</p>\n<p>The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.</p>\n<h3 id=\"quick-understanding-of-integration-benefits\" style=\"position:relative;\"><a href=\"#quick-understanding-of-integration-benefits\" aria-label=\"quick understanding of integration benefits permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Quick Understanding of Integration Benefits</h3>\n<p><img src=\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\" alt=\"This image shows a list of popular programming languages and frameworks offered by LoginRadius.\"></p>\n<p>Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.</p>\n<p>Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.</p>\n<h2 id=\"over-to-you-now\" style=\"position:relative;\"><a href=\"#over-to-you-now\" aria-label=\"over to you now permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Over to You Now!</h2>\n<p>Check out our <a href=\"https://www.loginradius.com/\">revamped LoginRadius website</a> and see how the improved experience makes it easier to build, scale, and secure your applications.</p>\n<p>Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},"pageContext":{"limit":6,"skip":456,"currentPage":77,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}