{"componentChunkName":"component---src-templates-tag-js","path":"/tags/login-radius-cli/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":3,"edges":[{"node":{"fields":{"slug":"/engineering/introducing-loginradius-cli/"},"html":"<p>Hi Everyone 👋 !!! Today we are announcing the beta release of <a href=\"https://github.com/LoginRadius/lr-cli#readme\">LoginRadius CLI</a>. I am very much excited about it.</p>\n<h2 id=\"why-loginradius-cli\" style=\"position:relative;\"><a href=\"#why-loginradius-cli\" aria-label=\"why loginradius cli 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 LoginRadius CLI?</h2>\n<p>Developer Experience plays a crucial role for us. We always think about the ways we can minimize the juggling between a quickstart tutorial, dashboard, and terminal.\nThe LoginRadius CLI will simplify your flow by just using some simple commands to <strong>register, login, add site, add social, etc.</strong>, and enables you to get the job done in very little time without leaving the terminal. </p>\n<h2 id=\"how-can-you-use-loginradius-cli\" style=\"position:relative;\"><a href=\"#how-can-you-use-loginradius-cli\" aria-label=\"how can you use loginradius cli 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 can you use LoginRadius CLI</h2>\n<p>Check out a few examples of how LoginRadius CLI can help manage your <a href=\"https://dashboard.loginradius.com/\">Loginradius Dashboard</a>.</p>\n<h3 id=\"loginregister-to-your-loginradius-dashboard\" style=\"position:relative;\"><a href=\"#loginregister-to-your-loginradius-dashboard\" aria-label=\"loginregister to your loginradius dashboard 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>Login/Register to your LoginRadius Dashboard</h3>\n<p><img src=\"/d8796faf29a7fcd7fb474a256d23fe61/login.webp\" alt=\"alt_text\" title=\"Login Command\"></p>\n<p>This command will help you to log in to the CLI. Once you logged in to the CLI, you can configure all your LoginRadius Applications through CLI. </p>\n<h3 id=\"manage-your-app-credentials\" style=\"position:relative;\"><a href=\"#manage-your-app-credentials\" aria-label=\"manage your app credentials 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>Manage your App Credentials</h3>\n<p><img src=\"/085d2ce8c5c543876f123070b14b2609/api-cred.webp\" alt=\"alt_text\" title=\"API Credentials Commands\"></p>\n<p>Get your API Credentials in a single command. You can also reset your secret and generate sott using the LoginRadius CLI.</p>\n<h3 id=\"domain-whitelisting\" style=\"position:relative;\"><a href=\"#domain-whitelisting\" aria-label=\"domain whitelisting 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>Domain Whitelisting</h3>\n<p><img src=\"/fe8b9b3e8bc44a3e2e845a4b9ef12bb5/domain.webp\" alt=\"alt_text\" title=\"Domain Commands\"></p>\n<p>Manage your white-listed domain for your application with simple commands.</p>\n<h3 id=\"theme-management\" style=\"position:relative;\"><a href=\"#theme-management\" aria-label=\"theme management 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>Theme Management</h3>\n<p><img src=\"/2d953adec515093540994aa20fad8423/theme.webp\" alt=\"alt_text\" title=\"Theme Management Commands\"></p>\n<p>You can update the LoginRadius IDX Page theme from the predefined themes available through LoginRadius CLI. </p>\n<blockquote>\n<p>You can check out the <a href=\"\">Theme Customization</a> section in the LoginRadius Dashboard for all the available customization options.</p>\n</blockquote>\n<h3 id=\"add-social-logins\" style=\"position:relative;\"><a href=\"#add-social-logins\" aria-label=\"add social logins 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>Add Social Logins</h3>\n<p><img src=\"/51377a663b53eba8c5e5803701dd41cb/social.webp\" alt=\"alt_text\" title=\"Social Commands\"></p>\n<p>With the help of LoginRadius CLI, you can add social logins to your LoginRadius IDX Page.</p>\n<h3 id=\"learn-more-about-the-loginradius--cli\" style=\"position:relative;\"><a href=\"#learn-more-about-the-loginradius--cli\" aria-label=\"learn more about the loginradius  cli 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>Learn More about the LoginRadius  CLI</h3>\n<p>Run <code>lr --help</code> to get the list of all available commands. Also you can checkout the <a href=\"https://www.loginradius.com/open-source/cli/manual\">manual for all the commands supported</a>.</p>\n<h2 id=\"try-loginradius-cli\" style=\"position:relative;\"><a href=\"#try-loginradius-cli\" aria-label=\"try loginradius cli 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>Try LoginRadius CLI</h2>\n<p>The LoginRadius CLI is available for Windows, macOS, and Linux. <a href=\"https://github.com/LoginRadius/lr-cli/tree/main#readme\">Check out the installation on our README</a>.</p>\n<h2 id=\"help-us-to-improve\" style=\"position:relative;\"><a href=\"#help-us-to-improve\" aria-label=\"help us to 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>Help us to improve</h2>\n<p>We hope you’ll love the LoginRadius CLI. And we’re even more excited about the future as we explore what it looks like to build a truly delightful experience with LoginRadius on the command line. </p>\n<p>We can’t wait to hear about your experience with LoginRadius CLI, and we’d love your feedback. Please create an issue in our <a href=\"https://github.com/LoginRadius/lr-cli/issues\">open source repository</a> or discuss what more commands you feel should be there on our <a href=\"https://community.loginradius.com/\">community page</a>.</p>\n<p><a href=\"https://www.loginradius.com/open-source/cli\">Checkout for more details</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":"July 02, 2021","updated_date":null,"title":"Introducing LoginRadius CLI","tags":["Authentication","DevTools","CLI","LoginRadius CLI"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c6be7e8c6ad8c169f91db6ca132b0667/a3e81/cli.webp","srcSet":"/static/c6be7e8c6ad8c169f91db6ca132b0667/61e93/cli.webp 200w,\n/static/c6be7e8c6ad8c169f91db6ca132b0667/1f5c5/cli.webp 400w,\n/static/c6be7e8c6ad8c169f91db6ca132b0667/a3e81/cli.webp 512w","sizes":"(max-width: 512px) 100vw, 512px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/implement-authentication-in-react-using-loginradius-cli/"},"html":"<p>Hey Everyone !!! This blog will walk you through the steps necessary to quickly implement authentication mechanisms for your React application by leveraging <a href=\"https://accounts.loginradius.com/auth.aspx?return_url=https://dashboard.loginradius.com/login\">LoginRadius</a> and the <a href=\"https://github.com/LoginRadius/lr-cli\">LoginRadius CLI</a> with the help of examples. </p>\n<p>Using the LoginRadius CLI, you can perform basic actions of your LoginRadius Dashboard through the command line. The actions include login, register, logout, social configuration, domain whitelisting, site management, etc. Once the actions are performed, changes will be reflected in your application. </p>\n<h2 id=\"configuring-loginradius\" style=\"position:relative;\"><a href=\"#configuring-loginradius\" aria-label=\"configuring loginradius 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>Configuring LoginRadius</h2>\n<p>Please follow the steps below to install the LoginRadius CLI on your system. Once completed, use the CLI to finish registration on the LoginRadius portal and create your application. </p>\n<h3 id=\"loginradius-cli-setup\" style=\"position:relative;\"><a href=\"#loginradius-cli-setup\" aria-label=\"loginradius cli setup 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>LoginRadius CLI Setup</h3>\n<h4 id=\"mac-or-linux\" style=\"position:relative;\"><a href=\"#mac-or-linux\" aria-label=\"mac or linux 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>Mac or Linux</h4>\n<ul>\n<li>\n<p>Install the tap using:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"sh\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">$ brew tap loginradius/tap</span></span></code></pre>\n</li>\n<li>\n<p>Then, you can install LR CLI via:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"sh\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">$ brew install lr</span></span></code></pre>\n</li>\n</ul>\n<h4 id=\"other-platforms\" style=\"position:relative;\"><a href=\"#other-platforms\" aria-label=\"other platforms 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>Other Platforms</h4>\n<ul>\n<li>Packaged binaries are available on the <a href=\"https://github.com/loginradius/lr-cli/releases/latest\">release page</a>.</li>\n</ul>\n<p>Once you have the CLI installed, the following command can be used to complete the registration process via the LoginRadius portal. </p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"sh\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">$ lr register</span></span></code></pre>\n<p>This command will open the Portal in the browser, where you can register yourself and create the app.</p>\n<p><img src=\"/119e3f41091d06d2b2301d95dc06b382/register_page.webp\" alt=\"alt_text\" title=\"Register Page\"></p>\n<p>If you already have a LoginRadius account, use the command below to directly login :</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"sh\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">$ lr login</span></span></code></pre>\n<p>Once you successfully register or login, the below message will be visible in a new tab on the browser. Close the tab and return to the CLI. </p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">You are Successfully Authenticated, Kindly Close this browser window and go back to CLI.</span></code></pre>\n<p>If your account has multiple sites (for Developer/Developer Pro Plans), an option will be given to choose the site that you wish to login with. You can choose a site according to your preference.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"sh\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">$ lr login</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  Successfully Authenticated, Fetching Your Site(s)...</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">? Current Site is: &lt;value&gt;, Want to Switch? Yes</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">? Select the site from the list: &lt;value&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  Site has been updated.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  Successfully Logged In</span></span></code></pre>\n<h3 id=\"fetching-application-api-credentials\" style=\"position:relative;\"><a href=\"#fetching-application-api-credentials\" aria-label=\"fetching application api credentials 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>Fetching Application API Credentials</h3>\n<p>Once the <strong>login/register</strong> process has been completed, run the <code>lr get config</code> command to fetch your <strong>API Key/Secret</strong> as shown below. </p>\n<p><img src=\"/1a8c94b3bd987a915f5ff3028990c71a/api_creds.webp\" alt=\"alt_text\" title=\"API Credentials\"> </p>\n<h3 id=\"configuring-callback-urls\" style=\"position:relative;\"><a href=\"#configuring-callback-urls\" aria-label=\"configuring callback urls 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>Configuring Callback URLs</h3>\n<p>Here, a callback URL refers to a URL in your application that LoginRadius would redirect a user to after they have been authenticated.  These URLs must be added to your Application Configuration. If not set, users will be unable to login into the application and receive an error. </p>\n<p><img src=\"/1cd075884ac194bc961bae1dc970019b/whitelist_error.webp\" alt=\"alt_text\"> </p>\n<p>For security reasons, LoginRadius only processes API calls that are received from the whitelisted domains. To get the list of whitelisted domains, run <code>lr get domain</code> command from the CLI. Similarly, to add a domain, use the <code>lr add domain</code> command.</p>\n<blockquote>\n<p>For the purposes of this tutorial, make sure that you set <code>http://localhost</code> as a whitelisted domain. </p>\n</blockquote>\n<p><img src=\"/77bade1e10f3d1c8e9bc4c612329556d/domain.webp\" alt=\"alt_text\" title=\"Add Domain\"> </p>\n<h2 id=\"setup-react-js-application\" style=\"position:relative;\"><a href=\"#setup-react-js-application\" aria-label=\"setup react js application 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>Setup React JS application</h2>\n<p>This tutorial uses a <a href=\"https://github.com/LoginRadius/engineering-blog-samples/tree/master/React/react_auth_demo\">demo app</a> based on the Create React App (CRA) boilerplate. For instructions on how to create a React App, refer to the following <a href=\"https://reactjs.org/docs/create-a-new-react-app.html\">docs</a>.</p>\n<p>The React Demo Application mentioned here will display the User Profile data if the login process is completed successfully.</p>\n<p>After setting up the boilerplate:</p>\n<ul>\n<li>\n<p>From the project root, install <code>react-router-dom</code>.</p>\n<p><code>npm install react-router-dom</code></p>\n</li>\n<li>Create <code>src/config.js</code> and add the application details in the code as shown below.</li>\n</ul>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">config</span><span class=\"mtk1\"> = {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">APP_NAME:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;&lt;&lt;App Name&gt;&gt;&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">API_KEY:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;&lt;&lt;API Key&gt;&gt;&#39;</span><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 class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk15\">default</span><span class=\"mtk1\"> </span><span class=\"mtk12\">config</span><span class=\"mtk1\">;</span></span></code></pre>\n<blockquote>\n<p>This tutorial uses LoginRadius Auth Page(IDX) for authentication, where Registration and Login functionality is already implemented. For example, you can navigate your Register buttons to <code>https://&#x3C;LoginRadius APP Name>.hub.loginradius.com/auth.aspx?action=register&#x26;return_url=&#x3C;Return URL></code>. </p>\n</blockquote>\n<h2 id=\"add-code-to-your-application\" style=\"position:relative;\"><a href=\"#add-code-to-your-application\" aria-label=\"add code to your application 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>Add Code to your Application</h2>\n<ul>\n<li>For this demo, we will start by populating the <code>App.js</code> file as shown below. Notice that the <code>/login</code> route has been added to the App component in which the <code>Login</code> and <code>Logout</code> components are rendered. They will be used to get the user profile data and handle user logout, respectively. The <code>/</code> route will load the <code>LandingPage</code> component. If you already have an existing React application, you can specify the route for these components as per your requirements. </li>\n</ul>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"7\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">BrowserRouter</span><span class=\"mtk1\"> </span><span class=\"mtk15\">as</span><span class=\"mtk1\"> </span><span class=\"mtk12\">Router</span><span class=\"mtk1\">, </span><span class=\"mtk12\">Route</span><span class=\"mtk1\">, </span><span class=\"mtk12\">Switch</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;react-router-dom&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;./App.css&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">LandingPage</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;./components/LandingPage&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">Login</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;./components/Login&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">Logout</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;./components/Logout&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><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=\"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\">Router</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=\"mtk10\">Switch</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">Route</span><span class=\"mtk1\"> </span><span class=\"mtk12\">exact</span><span class=\"mtk1\"> </span><span class=\"mtk12\">path</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;/&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">LandingPage</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=\"mtk10\">Route</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">Route</span><span class=\"mtk1\"> </span><span class=\"mtk12\">path</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;/login&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\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">style</span><span class=\"mtk1\">=</span><span class=\"mtk4\">{</span><span class=\"mtk1\">{ </span><span class=\"mtk12\">display:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;flex&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">padding:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;1em&quot;</span><span class=\"mtk1\"> }</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=\"mtk10\">Login</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=\"mtk10\">Logout</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\">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\">Route</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk10\">Switch</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\">Router</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=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk15\">default</span><span class=\"mtk1\"> </span><span class=\"mtk12\">App</span><span class=\"mtk1\">;</span></span></code></pre>\n<h3 id=\"add-landing-page\" style=\"position:relative;\"><a href=\"#add-landing-page\" aria-label=\"add landing page 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>Add Landing Page</h3>\n<p>In your <code>components</code> folder under the <code>src</code> folder, create a <code>src/components/LandingPage.js</code> file and add the following code to navigate your Register/Login buttons to the following URL's as shown below.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"8\"><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=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;react&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">config</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;../config.js&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk11\">LandingPage</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=\"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\">h1</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> React Demo App </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">h1</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">a</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">href</span><span class=\"mtk1\">=</span><span class=\"mtk4\">{</span><span class=\"mtk8\">`https://</span><span class=\"mtk4\">${</span><span class=\"mtk12\">config</span><span class=\"mtk1\">.</span><span class=\"mtk12\">APP_NAME</span><span class=\"mtk4\">}</span><span class=\"mtk8\">.hub.loginradius.com/auth.aspx?action=register&return_url=</span><span class=\"mtk4\">${</span><span class=\"mtk12\">window</span><span class=\"mtk1\">.</span><span class=\"mtk12\">location</span><span class=\"mtk1\">.</span><span class=\"mtk12\">origin</span><span class=\"mtk4\">}</span><span class=\"mtk8\">/login`</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=\"mtk17\">&lt;</span><span class=\"mtk4\">button</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Register</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\">a</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">a</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">href</span><span class=\"mtk1\">=</span><span class=\"mtk4\">{</span><span class=\"mtk8\">`https://</span><span class=\"mtk4\">${</span><span class=\"mtk12\">config</span><span class=\"mtk1\">.</span><span class=\"mtk12\">APP_NAME</span><span class=\"mtk4\">}</span><span class=\"mtk8\">.hub.loginradius.com/auth.aspx?action=login&return_url=</span><span class=\"mtk4\">${</span><span class=\"mtk12\">window</span><span class=\"mtk1\">.</span><span class=\"mtk12\">location</span><span class=\"mtk1\">.</span><span class=\"mtk12\">origin</span><span class=\"mtk4\">}</span><span class=\"mtk8\">/login`</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=\"mtk17\">&lt;</span><span class=\"mtk4\">button</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Login</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\">a</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=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk15\">default</span><span class=\"mtk1\"> </span><span class=\"mtk12\">LandingPage</span><span class=\"mtk1\">;</span></span></code></pre>\n<p>By doing this, we are redirecting our application to the <strong>LoginRadius Auth Page</strong> and are passing the <code>return_url</code> as the current origin. After successful login, the <strong>Login</strong> component fetches the user profile data as shown in the following step. However, <code>return_url</code> can also be your website, backend server, etc., where you can handle the access token to perform different actions. </p>\n<h3 id=\"add-login-component\" style=\"position:relative;\"><a href=\"#add-login-component\" aria-label=\"add login 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>Add Login Component</h3>\n<p>In your <code>components</code> folder, create a <code>src/components/Login.js</code> file and add the following code to retrieve <strong>User Profile Data</strong>. </p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"9\"><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=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;react&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">withRouter</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;react-router-dom&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">config</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;../config&quot;</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\">Login</span><span class=\"mtk1\"> </span><span class=\"mtk4\">extends</span><span class=\"mtk1\"> </span><span class=\"mtk10\">React</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\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk12\">props</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">super</span><span class=\"mtk1\">(</span><span class=\"mtk12\">props</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=\"mtk12\">state</span><span class=\"mtk1\"> = {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk12\">userProfileResponse:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">null</span><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=\"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\">token</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">URLSearchParams</span><span class=\"mtk1\">(</span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">props</span><span class=\"mtk1\">.</span><span class=\"mtk12\">location</span><span class=\"mtk1\">.</span><span class=\"mtk12\">search</span><span class=\"mtk1\">).</span><span class=\"mtk11\">get</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;token&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">token</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk11\">fetch</span><span class=\"mtk1\">(</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk8\">&quot;`https://api.loginradius.com/identity/v2/auth/account?apikey=&quot;</span><span class=\"mtk1\"> +</span><span class=\"mtk8\">`</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">          config.API_KEY,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">        {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">          method: &quot;GET&quot;,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">          headers: {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">            Authorization: &quot;Bearer &quot; + token,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">          },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">        }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">      )</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">        .then((res) =&gt; res.json())</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">        .then((res) =&gt; {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">          this.setState({ userProfileResponse: res });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">        })</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">        .catch((e) =&gt; {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">          console.log(e);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">        });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">    } else {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">      window.location.assign(</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk8\">        `</span><span class=\"mtk12\">https</span><span class=\"mtk1\">:</span><span class=\"mtk3\">//${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=login&return_url=${window.location.origin}/login`</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=\"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\">userProfileResponse</span><span class=\"mtk1\"> } = </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">state</span><span class=\"mtk1\">;</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\">span</span><span class=\"mtk1\"> </span><span class=\"mtk12\">style</span><span class=\"mtk1\">=</span><span class=\"mtk4\">{</span><span class=\"mtk1\">{ </span><span class=\"mtk12\">whiteSpace:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;pre-wrap&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">textAlign:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;left&quot;</span><span class=\"mtk1\"> }</span><span class=\"mtk4\">}</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk4\">{</span><span class=\"mtk10\">JSON</span><span class=\"mtk1\">.</span><span class=\"mtk11\">stringify</span><span class=\"mtk1\">(</span><span class=\"mtk12\">userProfileResponse</span><span class=\"mtk1\">, </span><span class=\"mtk4\">null</span><span class=\"mtk1\">, </span><span class=\"mtk7\">4</span><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=\"mtk4\">span</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>\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=\"mtk11\">withRouter</span><span class=\"mtk1\">(</span><span class=\"mtk12\">Login</span><span class=\"mtk1\">);</span></span></code></pre>\n<p>The Login component will call the LoginRadius API to fetch the user data by making use of the <code>token</code> obtained upon logging in via the <strong>LoginRadius Auth Page</strong>. </p>\n<h3 id=\"add-logout-component\" style=\"position:relative;\"><a href=\"#add-logout-component\" aria-label=\"add logout 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>Add Logout component</h3>\n<p>In your <code>components</code> folder, create a <code>src/components/Logout.js</code> file and add the code as shown below.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"10\"><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=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;react&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">config</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;../config.js&quot;</span><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\">Logout</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=\"mtk12\">localStorage</span><span class=\"mtk1\">.</span><span class=\"mtk11\">removeItem</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;token&quot;</span><span class=\"mtk1\">);</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=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;container&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\">a</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">href</span><span class=\"mtk1\">=</span><span class=\"mtk4\">{</span><span class=\"mtk8\">`https://</span><span class=\"mtk4\">${</span><span class=\"mtk12\">config</span><span class=\"mtk1\">.</span><span class=\"mtk12\">APP_NAME</span><span class=\"mtk4\">}</span><span class=\"mtk8\">.hub.loginradius.com/auth.aspx?action=logout&return_url=http://localhost:3000/`</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=\"mtk17\">&lt;</span><span class=\"mtk4\">button</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Logout</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\">a</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=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk15\">default</span><span class=\"mtk1\"> </span><span class=\"mtk12\">Logout</span><span class=\"mtk1\">;</span></span></code></pre>\n<p>This component contains logout functionality. Here, <code>action=logout</code> is passed to the <strong>LoginRadius Auth Page</strong>, which will log the user out and return them to the Landing Page specified in the <code>return_url</code>. </p>\n<blockquote>\n<p>Full code of the demo can be found on <a href=\"https://github.com/LoginRadius/engineering-blog-samples/tree/master/React/react_auth_demo\">github</a>.</p>\n</blockquote>\n<h3 id=\"testing-the-application\" style=\"position:relative;\"><a href=\"#testing-the-application\" aria-label=\"testing the application 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>Testing the application</h3>\n<p>Run the React Application from the command line using <code>npm start</code>. You will be able to see the output on <code>localhost:3000</code>. You can also directly open the IDX page on <code>https://&#x3C;LoginRadius APP Name>.hub.loginradius.com/auth.aspx?action=register&#x26;return_url=http://localhost:3000/login</code>.</p>\n<p>Congratulations! You have set up a React Application configured with LoginRadius using LoginRadius CLI. Continue reading to check out some cool and advanced features of the LoginRadius CLI that will help you manipulate and configure the LoginRadius Auth Page for your application through the CLI. </p>\n<h2 id=\"advanced-loginradius-cli-features\" style=\"position:relative;\"><a href=\"#advanced-loginradius-cli-features\" aria-label=\"advanced loginradius cli features 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>Advanced LoginRadius CLI features</h2>\n<p>This section explains the use of the LoginRadius CLI in enabling users to quickly and efficiently make changes to the <strong>LoginRadius Auth Page</strong> configured for their application. </p>\n<h3 id=\"adding-social-login-methods\" style=\"position:relative;\"><a href=\"#adding-social-login-methods\" aria-label=\"adding social login methods 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>Adding Social Login Methods</h3>\n<p>We can add social login methods like Google, Facebook, etc., to the LoginRadius Auth Page using the CLI. Use the <code>lr add social</code> command to add a Login method and the <code>lr get social</code> command to view the current active social login methods. Check the image below for a visual representation. </p>\n<p><img src=\"/33c1cd02ddd6c0cfffc0d4ea7bd167b7/lr_social.webp\" alt=\"alt_text\" title=\"Facebook Login Added\"> </p>\n<p>After adding the new login method (in this example, it is Facebook), navigate to the LoginRadius Auth Page by using the <code>lr demo</code> command.</p>\n<p><img src=\"/01382dba0fe635159e5dc07d2c28af0c/add_login.webp\" alt=\"alt_text\" title=\"Facebook Login Added on IDX\"> </p>\n<h3 id=\"updating-the-theme\" style=\"position:relative;\"><a href=\"#updating-the-theme\" aria-label=\"updating the 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>Updating the theme</h3>\n<p>We can update the <strong>theme</strong> of the LoginRadius Auth Page using the <code>lr set theme</code> command. You can use the <code>lr get theme</code> command to get a list of all available themes and the currently active theme. See the image below for visual representation. </p>\n<p><img src=\"/eb0df5310f4213dc2f46867c64100195/lr_theme.webp\" alt=\"alt_text\" title=\"Theme changed to Tokyo\"> </p>\n<p>After changing the theme, navigate to the LoginRadius Auth Page using <code>lr demo</code> command to view the changes. </p>\n<p><img src=\"/ef28df4a85c275940c138015e68b3d62/set_theme.webp\" alt=\"alt_text\" title=\"New Theme Tokyo\"> </p>\n<h3 id=\"adding-to-the-registration-schema\" style=\"position:relative;\"><a href=\"#adding-to-the-registration-schema\" aria-label=\"adding to the registration schema 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>Adding to the Registration schema</h3>\n<blockquote>\n<p>This functionality is only available for paid <strong>Developer Plans and above</strong> (not available for LoginRadius Free plan). </p>\n</blockquote>\n<p>We can update the Registration Page schema using the <code>lr add schema</code> command. Use the <code>lr get schema</code> command with <code>--active</code> or <code>--all</code> flags to get the current Registration fields or view all available fields with their schemas. You can also configure addtional features by choosing the <code>setup advance configuration</code> option.<br>\nSee the image below for a visual representation of the command flow. </p>\n<p><img src=\"/8db5ab656c1bee4912c56377eb70120d/lr_schema.webp\" alt=\"alt_text\" title=\"Get and Add to Reg. Schema\"> </p>\n<p>In the below image 2 fields have been added to the registration schema, <code>Confirm Password</code> and <code>Gender</code>. To view the changes, navigate to the LoginRadius Auth Page using <code>lr demo</code>command.</p>\n<p><img src=\"/8506126354fc37c1623eb126210fa740/add_schema.webp\" alt=\"alt_text\" title=\"Added Fields\"> </p>\n<blockquote>\n<p>Instead of using the <code>lr demo</code> command, you can also view the <strong>LoginRadius Auth Page</strong> by visiting locahost:3000 and following the same workflow as explained earlier.</p>\n</blockquote>\n<p>The entire description for these commands can be found in the <a href=\"https://www.loginradius.com/open-source/cli/manual\">LoginRadius CLI Manual</a>.</p>\n<h2 id=\"contributing-to-loginradius-cli\" style=\"position:relative;\"><a href=\"#contributing-to-loginradius-cli\" aria-label=\"contributing to loginradius cli 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>Contributing to LoginRadius CLI</h2>\n<p>The <a href=\"https://github.com/LoginRadius/lr-cli/\">LoginRadius CLI</a> is open-sourced under <a href=\"https://github.com/LoginRadius\">LoginRadius Organization</a>. You are welcome to contribute to it, suggest improvements, or report bugs by following the contributing guidelines. You can also checkout our <a href=\"https://www.loginradius.com/open-source/\">open source page</a> if you wish to contribute to other opensource projects by LoginRadius.</p>\n<h2 id=\"your-take\" style=\"position:relative;\"><a href=\"#your-take\" aria-label=\"your take 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>Your Take</h2>\n<p>Using the LoginRadius CLI, you can easily setup authentication for your React applications. You can also perform certain LoginRadius functionalities and processes efficiently through the CLI, which saves a bunch of time. LoginRadius will handle all the authentication-related mechanisms so that you can solely concentrate on your application development.</p>\n<p>I hope you enjoyed this tutorial and found it to be useful. You can provide feedback or suggestions in the comment section below. </p>\n<p>Cheers!!!</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 .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk17 { color: #808080; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n</style>","frontmatter":{"date":"May 12, 2021","updated_date":null,"title":"Implement Authentication in React Applications using LoginRadius CLI ","tags":["Authentication","React","CLI","LoginRadius CLI"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/588aa544e688ead4b827e6e3fee882fb/58556/cover.webp","srcSet":"/static/588aa544e688ead4b827e6e3fee882fb/61e93/cover.webp 200w,\n/static/588aa544e688ead4b827e6e3fee882fb/1f5c5/cover.webp 400w,\n/static/588aa544e688ead4b827e6e3fee882fb/58556/cover.webp 800w,\n/static/588aa544e688ead4b827e6e3fee882fb/99238/cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Akash Patil","github":"Akash-Patil","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/implementing-authentication-in-angular-2-plus-with-loginradius-cli/"},"html":"<p>Hello Guys!!!, today we will be implemented the authentication in the Angular 2+ application within 5 mins using <a href=\"https://accounts.loginradius.com/auth.aspx?return_url=https://dashboard.loginradius.com/login\">LoginRadius</a>.</p>\n<h2 id=\"configuring-loginradius\" style=\"position:relative;\"><a href=\"#configuring-loginradius\" aria-label=\"configuring loginradius 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>Configuring LoginRadius</h2>\n<p>To implement authentication in the angular app first let's start with registering in the Loginradius and creating the application using <a href=\"https://github.com/LoginRadius/lr-cli\">LoginRadius CLI</a>.</p>\n<h3 id=\"why-loginradius-cli\" style=\"position:relative;\"><a href=\"#why-loginradius-cli\" aria-label=\"why loginradius cli 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 LoginRadius CLI</h3>\n<p>Developer Experience plays a crucial role for us. We always think about the ways we can minimize the juggling between a quickstart tutorial, dashboard, and terminal. The LoginRadius CLI will simplify your flow by just using some simple commands to register, create an application, log in, etc., and enables you to get the job done in very little time without leaving the terminal.</p>\n<h3 id=\"loginradius-cli-setup\" style=\"position:relative;\"><a href=\"#loginradius-cli-setup\" aria-label=\"loginradius cli setup 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>LoginRadius CLI Setup</h3>\n<h4 id=\"mac-or-linux\" style=\"position:relative;\"><a href=\"#mac-or-linux\" aria-label=\"mac or linux 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>Mac or Linux</h4>\n<ul>\n<li>\n<p>Install the tap via:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"sh\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">$ brew tap loginradius/tap</span></span></code></pre>\n</li>\n<li>\n<p>Then, you can install LR CLI via:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"sh\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">$ brew install lr</span></span></code></pre>\n</li>\n</ul>\n<h4 id=\"other-platforms\" style=\"position:relative;\"><a href=\"#other-platforms\" aria-label=\"other platforms 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>Other Platforms</h4>\n<ul>\n<li>Download packaged binaries from the <a href=\"https://github.com/loginradius/lr-cli/releases/latest\">release page</a>.</li>\n</ul>\n<p>After installing the CLI, you can register into the LoginRadius via the below command.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"sh\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">$ lr register</span></span></code></pre>\n<p>This command will open the Loginradius in the browser to register yourself and create the app.</p>\n<p><img src=\"/37cdcc5824bb57f91c8c2fade59d1f51/resgister_page.webp\" alt=\"Register Page\" title=\"Register Page\"></p>\n<p>Once you successfully register you will be able to see the below message on the browser, you can close the tab and come back to the CLI.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">You are Successfully Authenticated, Kindly Close this browser window and go back to CLI.</span></code></pre>\n<h3 id=\"get-your-application-api-credentials\" style=\"position:relative;\"><a href=\"#get-your-application-api-credentials\" aria-label=\"get your application api credentials 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>Get Your Application API Credentials</h3>\n<p>Once you <strong>login/register</strong> using the CLI, You can now run the <code>lr get config</code> command to get your API credentials. </p>\n<p><img src=\"/d3410e50f20ce8f06c3c02321e688a48/lr_get_config.webp\" alt=\"LoginRadius CLI Get Config\" title=\"LoginRadius CLI Get Config\"></p>\n<h3 id=\"configuring-callback-urls\" style=\"position:relative;\"><a href=\"#configuring-callback-urls\" aria-label=\"configuring callback urls 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>Configuring Callback URLs</h3>\n<p>A callback URL is a URL in your application where LoginRadius redirects the user after they have authenticated. The callback URL for your app must be added to your Application Configuration. If this field is not set, users will be unable to log in to the application and get an error.</p>\n<p><img src=\"/f9f75ff5103737aafbf5eb363227bc21/whitelist_domain_error.webp\" alt=\"Whitelist domain error\" title=\"Whitelist domain error\"></p>\n<p>To get the list of whitelisted domains, you can run <code>lr get domain</code> command from the cmd prompt. And to add a domain in the list using <code>lr add domain</code> command. </p>\n<blockquote>\n<p>If you are following this tutorial, you should set the  <code>http://localhost</code> as a whitelisted domain. Check the below image for how to add the domain using LoginRadius CLI.</p>\n</blockquote>\n<p><img src=\"/8c6712c9e99ae1b12d8fe6def47b4733/lr_add_domain.webp\" alt=\"LoginRadius CLI Add Domain\" title=\"LoginRadius CLI Add Domain\"></p>\n<h3 id=\"setup-angular-application\" style=\"position:relative;\"><a href=\"#setup-angular-application\" aria-label=\"setup angular application 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>Setup Angular application</h3>\n<p>You can implement the LoginRadius authentication in your existing Angular application, or you can start from scratch by following <a href=\"https://angular.io/guide/setup-local\">this tutorial</a>.</p>\n<blockquote>\n<p>You need to enable the routing for this tutorial if you are not aware of how to enable routing in the angular application, kindly follow <a href=\"https://angular.io/guide/router\">this tutorial</a></p>\n</blockquote>\n<ul>\n<li>\n<p>Create <code>src/app/config.ts</code> and add the below application configuration</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"ts\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">config</span><span class=\"mtk1\"> = {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">APP_NAME:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;&lt;&lt;Your App Name&gt;&gt;&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">API_KEY:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;&lt;&lt;Your API Key&gt;&gt;&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></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\">config</span><span class=\"mtk1\">;</span></span></code></pre>\n</li>\n</ul>\n<h3 id=\"add-login-to-your-application\" style=\"position:relative;\"><a href=\"#add-login-to-your-application\" aria-label=\"add login to your application 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>Add Login to Your Application</h3>\n<p>If you have already created the login component, add the following code in the <code>.ts</code> file else, generate the login component using ng CLI <code>ng generate component login</code>. Which will create a component inside the <code>app</code> folder. Add the following code to the <code>login.component.ts</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"ts\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Component</span><span class=\"mtk1\">, </span><span class=\"mtk12\">OnInit</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/core&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">ActivatedRoute</span><span class=\"mtk1\">, </span><span class=\"mtk12\">Router</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/router&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">config</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;../config&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">@</span><span class=\"mtk11\">Component</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">selector:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;app-login&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">templateUrl:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./login.component.html&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">styleUrls:</span><span class=\"mtk1\"> [</span><span class=\"mtk8\">&#39;./login.component.scss&#39;</span><span class=\"mtk1\">],</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">})</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">LoginComponent</span><span class=\"mtk1\"> </span><span class=\"mtk4\">implements</span><span class=\"mtk1\"> </span><span class=\"mtk10\">OnInit</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk4\">private</span><span class=\"mtk1\"> </span><span class=\"mtk12\">route</span><span class=\"mtk1\">: </span><span class=\"mtk10\">ActivatedRoute</span><span class=\"mtk1\">, </span><span class=\"mtk4\">private</span><span class=\"mtk1\"> </span><span class=\"mtk12\">router</span><span class=\"mtk1\">: </span><span class=\"mtk10\">Router</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=\"mtk12\">route</span><span class=\"mtk1\">.</span><span class=\"mtk12\">queryParams</span><span class=\"mtk1\">.</span><span class=\"mtk11\">subscribe</span><span class=\"mtk1\">((</span><span class=\"mtk12\">params</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\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">params</span><span class=\"mtk1\">.</span><span class=\"mtk12\">token</span><span class=\"mtk1\"> || </span><span class=\"mtk12\">localStorage</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getItem</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;token&#39;</span><span class=\"mtk1\">)) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">localStorage</span><span class=\"mtk1\">.</span><span class=\"mtk11\">setItem</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;token&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk12\">params</span><span class=\"mtk1\">.</span><span class=\"mtk12\">token</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=\"mtk12\">router</span><span class=\"mtk1\">.</span><span class=\"mtk11\">navigate</span><span class=\"mtk1\">([</span><span class=\"mtk8\">&#39;/profile&#39;</span><span class=\"mtk1\">]);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      } </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">window</span><span class=\"mtk1\">.</span><span class=\"mtk12\">location</span><span class=\"mtk1\">.</span><span class=\"mtk12\">href</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">`https://</span><span class=\"mtk4\">${</span><span class=\"mtk12\">config</span><span class=\"mtk1\">.</span><span class=\"mtk12\">APP_NAME</span><span class=\"mtk4\">}</span><span class=\"mtk8\">.hub.loginradius.com/auth.aspx?return_url=</span><span class=\"mtk4\">${</span><span class=\"mtk12\">window</span><span class=\"mtk1\">.</span><span class=\"mtk12\">location</span><span class=\"mtk1\">.</span><span class=\"mtk12\">origin</span><span class=\"mtk4\">}</span><span class=\"mtk8\">/login`</span><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 class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">ngOnInit</span><span class=\"mtk1\">(): </span><span class=\"mtk10\">void</span><span class=\"mtk1\"> {}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>Here we are redirecting the application to the <strong>LoginRadius Auth Page</strong> where we are passing the <code>return_url</code> as the current origin, so after successful login, the <strong>LoginRadius Auth Page</strong> will redirect to the angular application with <code>token</code> as a query param. Later we will use <code>token</code> for all the user-related actions.</p>\n<h3 id=\"add-profile-page\" style=\"position:relative;\"><a href=\"#add-profile-page\" aria-label=\"add profile page 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>Add Profile Page</h3>\n<p>As you have seen in the above code on successful login, we redirect to <code>/profile</code> page. So let us create a <strong>profile</strong> component using <code>ng</code> CLI <code>ng generate component profile</code>.\nAnd let's modify the <code>profile.component.ts</code> file in the <code>app/profile</code> folder generated by ng CLI.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"ts\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Component</span><span class=\"mtk1\">, </span><span class=\"mtk12\">OnInit</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/core&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Router</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/router&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">config</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;../config&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">ProfileService</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;../profile.service&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Profile</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./profile&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">@</span><span class=\"mtk11\">Component</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">selector:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;app-profile&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">templateUrl:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./profile.component.html&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">styleUrls:</span><span class=\"mtk1\"> [</span><span class=\"mtk8\">&#39;./profile.component.scss&#39;</span><span class=\"mtk1\">],</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">})</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">ProfileComponent</span><span class=\"mtk1\"> </span><span class=\"mtk4\">implements</span><span class=\"mtk1\"> </span><span class=\"mtk10\">OnInit</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">profile</span><span class=\"mtk1\">: </span><span class=\"mtk10\">Profile</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">loginRadius</span><span class=\"mtk1\">: </span><span class=\"mtk10\">any</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk4\">private</span><span class=\"mtk1\"> </span><span class=\"mtk12\">configService</span><span class=\"mtk1\">: </span><span class=\"mtk10\">ProfileService</span><span class=\"mtk1\">, </span><span class=\"mtk4\">private</span><span class=\"mtk1\"> </span><span class=\"mtk12\">router</span><span class=\"mtk1\">: </span><span class=\"mtk10\">Router</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\">token</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">localStorage</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getItem</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;token&#39;</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\">ngOnInit</span><span class=\"mtk1\">(): </span><span class=\"mtk10\">void</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=\"mtk12\">configService</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getProfile</span><span class=\"mtk1\">().</span><span class=\"mtk11\">subscribe</span><span class=\"mtk1\">(</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      (</span><span class=\"mtk12\">data</span><span class=\"mtk1\">: </span><span class=\"mtk10\">Profile</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=\"mtk12\">profile</span><span class=\"mtk1\"> = { ...</span><span class=\"mtk12\">data</span><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 class=\"mtk12\">err</span><span class=\"mtk1\">: </span><span class=\"mtk10\">any</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\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">err</span><span class=\"mtk1\">.</span><span class=\"mtk12\">status</span><span class=\"mtk1\"> === </span><span class=\"mtk7\">403</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">          </span><span class=\"mtk12\">localStorage</span><span class=\"mtk1\">.</span><span class=\"mtk11\">removeItem</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;token&#39;</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=\"mtk12\">router</span><span class=\"mtk1\">.</span><span class=\"mtk11\">navigate</span><span class=\"mtk1\">([</span><span class=\"mtk8\">&#39;login&#39;</span><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 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\">logout</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">localStorage</span><span class=\"mtk1\">.</span><span class=\"mtk11\">removeItem</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;token&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">window</span><span class=\"mtk1\">.</span><span class=\"mtk12\">location</span><span class=\"mtk1\">.</span><span class=\"mtk12\">href</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">`https://</span><span class=\"mtk4\">${</span><span class=\"mtk12\">config</span><span class=\"mtk1\">.</span><span class=\"mtk12\">APP_NAME</span><span class=\"mtk4\">}</span><span class=\"mtk8\">.hub.loginradius.com/auth.aspx?action=logout`</span><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>Similary add the below code to <code>profile.component.html</code> file.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"7\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;container&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\">h1</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Hello </span><span class=\"mtk4\">{</span><span class=\"mtk1\">{ profile?.Email</span><span class=\"mtk12\">[</span><span class=\"mtk7\">0</span><span class=\"mtk12\">]?.Value }}&lt;/h1&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">  &lt;button (click)=&quot;logout()&quot;&gt;LogOut&lt;/button&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">&lt;/div&gt;</span></span></code></pre>\n<p>The profile component will call the LoginRadius API to fetch the profile details and store them in the <code>profile</code> variable. Using that <code>profile</code>, we are displaying the email in the HTML.\nIt also has the <code>logout()</code> function where we pass the <code>action=logout</code> in the <strong>LoginRadius Auth Page</strong>, which will help us log out the user.</p>\n<p>In the profile component, you can see the two things are used.</p>\n<ul>\n<li>ProfileService - This is the service to fetch the user profile using the token.</li>\n<li>Profile - The model which will be used to store the profile information.</li>\n</ul>\n<p>You can generate the service in the angular using <code>ng</code> CLI by using this command <code>ng generate service profile</code> which will create <code>profile.service.ts</code> with required configuration. Add the below code in the <code>profile.service.ts</code> file.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"ts\" data-index=\"8\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">HttpClient</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/common/http&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Injectable</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/core&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">config</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./config&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Profile</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./profile/profile&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">@</span><span class=\"mtk11\">Injectable</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">providedIn:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;root&#39;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">})</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">ProfileService</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk4\">private</span><span class=\"mtk1\"> </span><span class=\"mtk12\">http</span><span class=\"mtk1\">: </span><span class=\"mtk10\">HttpClient</span><span class=\"mtk1\">) {}</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">getProfile</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">// now returns an Observable of Config</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">http</span><span class=\"mtk1\">.</span><span class=\"mtk11\">get</span><span class=\"mtk1\">&lt;</span><span class=\"mtk10\">Profile</span><span class=\"mtk1\">&gt;(</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk8\">`https://api.loginradius.com/identity/v2/auth/account?access_token=</span><span class=\"mtk4\">${</span><span class=\"mtk12\">localStorage</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getItem</span><span class=\"mtk1\">(</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk8\">&#39;token&#39;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      )</span><span class=\"mtk4\">}</span><span class=\"mtk8\">&apikey=</span><span class=\"mtk4\">${</span><span class=\"mtk12\">config</span><span class=\"mtk1\">.</span><span class=\"mtk12\">API_KEY</span><span class=\"mtk4\">}</span><span class=\"mtk8\">`</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>We will use the HTTP module to call the Rest API so let's add the <code>HttpClientModule</code> in the  <code>app.module.ts</code> file.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"ts\" data-index=\"9\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">HttpClientModule</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/common/http&#39;</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\">NgModule</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">imports:</span><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 class=\"mtk12\">HttpClientModule</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 class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">AppModule</span><span class=\"mtk1\"> { }</span></span></code></pre>\n<p>Now let's create a <code>Profile</code> model which will be used for storing the user profile. </p>\n<ul>\n<li>\n<p>Add <code>src/app/profile/profile.ts</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"ts\" data-index=\"10\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">interface</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Profile</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">Email</span><span class=\"mtk1\">: {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">Type</span><span class=\"mtk1\">: </span><span class=\"mtk10\">string</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">Value</span><span class=\"mtk1\">: </span><span class=\"mtk10\">string</span><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</li>\n</ul>\n<h3 id=\"add-routes-for-login-and-profile\" style=\"position:relative;\"><a href=\"#add-routes-for-login-and-profile\" aria-label=\"add routes for login and profile 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>Add Routes for Login and profile.</h3>\n<p>Lets modify the <code>app-routing.module.ts</code> and add the below Routes in it.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"ts\" data-index=\"11\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">NgModule</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/core&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">RouterModule</span><span class=\"mtk1\">, </span><span class=\"mtk12\">Routes</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/router&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">AppComponent</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./app.component&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">LoginComponent</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./login/login.component&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">ProfileComponent</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./profile/profile.component&#39;</span><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=\"mtk12\">routes</span><span class=\"mtk1\">: </span><span class=\"mtk10\">Routes</span><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 class=\"mtk12\">path:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;login&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">component:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">LoginComponent</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  },</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  { </span><span class=\"mtk12\">path:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;profile&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">component:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ProfileComponent</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=\"mtk1\">@</span><span class=\"mtk11\">NgModule</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">imports:</span><span class=\"mtk1\"> [</span><span class=\"mtk12\">RouterModule</span><span class=\"mtk1\">.</span><span class=\"mtk11\">forRoot</span><span class=\"mtk1\">(</span><span class=\"mtk12\">routes</span><span class=\"mtk1\">)],</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">exports:</span><span class=\"mtk1\"> [</span><span class=\"mtk12\">RouterModule</span><span class=\"mtk1\">]</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">})</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">AppRoutingModule</span><span class=\"mtk1\"> { }</span></span></code></pre>\n<p>Finally, to gather all, we need to modify the <code>app.component.ts</code> and add the routing logic.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"ts\" data-index=\"12\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Component</span><span class=\"mtk1\">, </span><span class=\"mtk12\">OnInit</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/core&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">Router</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;@angular/router&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">@</span><span class=\"mtk11\">Component</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">selector:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;app-root&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">templateUrl:</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;./app.component.html&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk12\">styleUrls:</span><span class=\"mtk1\"> [</span><span class=\"mtk8\">&#39;./app.component.scss&#39;</span><span class=\"mtk1\">],</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">})</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">AppComponent</span><span class=\"mtk1\"> </span><span class=\"mtk4\">implements</span><span class=\"mtk1\"> </span><span class=\"mtk10\">OnInit</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk4\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk4\">private</span><span class=\"mtk1\"> </span><span class=\"mtk12\">router</span><span class=\"mtk1\">: </span><span class=\"mtk10\">Router</span><span class=\"mtk1\">) {}</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk11\">ngOnInit</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">window</span><span class=\"mtk1\">.</span><span class=\"mtk12\">location</span><span class=\"mtk1\">.</span><span class=\"mtk12\">pathname</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&quot;/&quot;</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">localStorage</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getItem</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;token&#39;</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=\"mtk12\">router</span><span class=\"mtk1\">.</span><span class=\"mtk11\">navigate</span><span class=\"mtk1\">([</span><span class=\"mtk8\">&#39;/profile&#39;</span><span class=\"mtk1\">]);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      } </span><span class=\"mtk15\">else</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=\"mtk12\">router</span><span class=\"mtk1\">.</span><span class=\"mtk11\">navigate</span><span class=\"mtk1\">([</span><span class=\"mtk8\">&#39;/login&#39;</span><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 class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>And add the <code>router-outlet</code> to the <code>app.component.html</code> file.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"13\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">router-outlet</span><span class=\"mtk17\">&gt;&lt;/</span><span class=\"mtk10\">router-outlet</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<blockquote>\n<p>You can find the full code in <a href=\"https://github.com/LoginRadius/engineering-blog-samples/tree/master/Angular/angular-authentication-demo\">github</a></p>\n</blockquote>\n<h3 id=\"testing-the-application\" style=\"position:relative;\"><a href=\"#testing-the-application\" aria-label=\"testing the application 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>Testing the application</h3>\n<p>Run <code>ng serve</code> to start the local server, and you will be able to see the output on locahost:4200.</p>\n<h3 id=\"adding-login-methods\" style=\"position:relative;\"><a href=\"#adding-login-methods\" aria-label=\"adding login methods 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>Adding Login Methods</h3>\n<p>You can configure the LoginRadius Auth Page by adding social login methods like Facebook, Google, etc. To add the login method, you can use the command <code>lr get social</code> and <code>lr add social</code> command. Check the below image on how to add the social configuration.</p>\n<p><img src=\"/07ed5e9bb4e11fa431d8e172d06d57ce/lr_add_social.webp\" alt=\"Added Facebook as an loginmethod\" title=\"Added Facebook as an loginmethod\"></p>\n<p>After adding, visit the LoginRadius Auth Page either by visiting <code>locahost:4200</code> and log out. Or using the command <code>lr demo</code>. You will find the new login method added.</p>\n<p><img src=\"/f78ef7d5b6b675a68aac18672e76dcb3/add_login_method.webp\" alt=\"Added Facebook as an loginmethod\" title=\"Added Facebook as an loginmethod\"></p>\n<h3 id=\"customizing-theme-for-loginradius-auth-page\" style=\"position:relative;\"><a href=\"#customizing-theme-for-loginradius-auth-page\" aria-label=\"customizing theme for loginradius auth page 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>Customizing theme for LoginRadius Auth Page</h3>\n<p>LoginRadius Dashboard Support three pre-defined themes for you. You can check out the <a href=\"https://dashboard.loginradius.com/auth-page\">Theme Customization</a> section in the LoginRadius Dashboard for all the customization options available. </p>\n<p><img src=\"/8a9fa8d4498973cd686232e6301c63ef/theme_custom.webp\" alt=\"Theme Customization\" title=\"Theme Customization\"></p>\n<p>You can also get/set your current theme using LoginRadius CLI by using the commands like <code>lr get theme</code> and <code>lr set theme</code>.</p>\n<p><img src=\"/a3ee49491699a792be9c07fed45f9298/theme_cli.webp\" alt=\"Theme Customization CLI\" title=\"Theme Customization CLI\"></p>\n<h3 id=\"addingupdating-registeration-schema-for-loginradius-auth-page\" style=\"position:relative;\"><a href=\"#addingupdating-registeration-schema-for-loginradius-auth-page\" aria-label=\"addingupdating registeration schema for loginradius auth page 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>Adding/Updating Registeration Schema for LoginRadius Auth Page</h3>\n<p>LoginRadius Auth Page supports 3 predefined fields for LoginRadius Auth Page i.e Email, Password, Confirm Password. With the help of LoginRadius CLI, you can manage the registration schema for your LoginRadius Auth Page. </p>\n<p>Check out the below commands to add the new registration field in your LoginRadius Application. After adding the new schema field you can always check your LoginRadius Auth Page by running <code>lr demo</code> command from the terminal.</p>\n<p><img src=\"/0777e0d80fdc4c9a72f3bf9485b11342/registration_schema.webp\" alt=\"Registration Schema LoginRadius CLI\" title=\"Registration Schema LoginRadius CLI\"></p>\n<h3 id=\"loginradius-site-management\" style=\"position:relative;\"><a href=\"#loginradius-site-management\" aria-label=\"loginradius site management 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>LoginRadius Site Management</h3>\n<p>LoginRadius Dashboard provides a feature where you can create and manage multiple applications for your multiple products. </p>\n<p>With the help of LoginRadius CLI you can manage your sites via terminal using commands like <code>lr get site</code>, <code>lr set site</code>, <code>lr add site</code>, <code>lr delete site</code>.</p>\n<p><img src=\"/d40f1c23533d5feb70ccc66c2c364631/site_management.webp\" alt=\"Site Management in LoginRadius CLI\" title=\"Site Management in LoginRadius CLI\"></p>\n<h3 id=\"contributing-to-loginradius-cli\" style=\"position:relative;\"><a href=\"#contributing-to-loginradius-cli\" aria-label=\"contributing to loginradius cli 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>Contributing to LoginRadius CLI</h3>\n<p>The <a href=\"https://github.com/LoginRadius/lr-cli/\">LoginRadius CLI</a> is opensourced in the <a href=\"https://github.com/LoginRadius\">LoginRadius Organization</a>  and you can contribute to it if you find any bugs or improvement by following the contributing guidelines. You can also checkout our <a href=\"https://www.loginradius.com/open-source/\">open source page</a> if you wish to contribute more in LoginRadius.</p>\n<h3 id=\"your-take\" style=\"position:relative;\"><a href=\"#your-take\" aria-label=\"your take 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>Your Take</h3>\n<p>With the help of LoginRadius CLI, you can setup the authentication for your Angular application in just 5 minutes. LoginRadius will take care of all the authentication-related stuff for your application so that you can focus on your application development.</p>\n<p>I hope you like this tutorial. Kindly provide feedback suggestions in the comment section below.</p>\n<p>Cheers!!!</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 .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk17 { color: #808080; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n</style>","frontmatter":{"date":"April 14, 2021","updated_date":null,"title":"Implement Authentication in Angular 2+ application using LoginRadius CLI in 5 mins","tags":["Authentication","Angular","CLI","LoginRadius CLI"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ab2ba564a1fcea45551f36b77f132cde/58556/angulat_demo_auth.webp","srcSet":"/static/ab2ba564a1fcea45551f36b77f132cde/61e93/angulat_demo_auth.webp 200w,\n/static/ab2ba564a1fcea45551f36b77f132cde/1f5c5/angulat_demo_auth.webp 400w,\n/static/ab2ba564a1fcea45551f36b77f132cde/58556/angulat_demo_auth.webp 800w,\n/static/ab2ba564a1fcea45551f36b77f132cde/99238/angulat_demo_auth.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}}]}},"pageContext":{"tag":"LoginRadius CLI"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}