{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/user-authentication-react-application/","result":{"data":{"markdownRemark":{"id":"95aac512-ecfd-54b7-8369-a0e09370d010","excerpt":"This guide uses LoginRadius API for authenticating React apps. It provides React developers with a more straightforward way to add user authentication to react…","html":"

This guide uses LoginRadius API for authenticating React apps. It provides React developers with a more straightforward way to add user authentication to react apps. To handle a lot of authentication implementation information, LoginRadius offers a high-level API. Using security best practices, now you can protect your response apps while writing less code.

\n

This article focuses on helping developers learn how to integrate user authentication in the React application. Practice the following security principles to improve authentication on React applications:

\n\n

In the React application, we can easily and quickly add authentication by using LoginRadius. If you already have a customized login/registration page ready, then I'll guide you to the next step of adding authentication in react apps.

\n

Configure LoginRadius for React Application

\n

A new application was created for you when you signed up for LoginRadius. From here, you get some essential information.

\n
    \n
  1. API Key How to get API Key?
    2. \n
  2. Sott Work with Sott
    3. \n
\n

Add following LoginRadius JS library into your application

\n
<script type="text/javascript" src="https://auth.lrcontent.com/v2/LoginRadiusV2.js"></script>
\n

Add Authentication when you have customized Login Page

\n

Add Login to your react application

\n

We will use an API framework to call LoginRadius APIs for authentication. Create a new file LoginPage.js, and add the following code.

\n
    import  React, { useState } from  "react";\n    const  lrconfig = {\n    apiKey:  "*************************", //LoginRadius API key\n    };\n    const  loginradius = {};\n    if (window.LoginRadiusV2) {\n      loginradius = new  window.LoginRadiusV2(lrconfig);\n      loginradius.api.init(lrconfig);\n    }\n    const  LoginButton = () => {\n      const  loginButtonHandler = () => {\n      loginradius.api.login({emailid:  emailValue,\n      password:  passwordValue},\n      (successResponse)=>{\n      //Here you will get the access Token of \n      \n      \n      console.log(successResponse);\n      },\n      (errors) => {\n      console.log(errors);\n      });\n      }\n      const [emailValue, updateEmailValue] = useState("");\n      const [passwordValue, updatePasswordValue] = useState("");\n      return (\n      <React.Fragment>\n      <input  type="text"  value={emailValue}  onChange={(e)=>{updateEmailValue(e.target.value)}}  placeholder={"email"}/>\n      <input  type="password"  value={passwordValue}  onChange={(e)=>{updatePasswordValue(e.target.value)}}  placeholder={"Password"}  />\n      <button  onClick={() =>  loginButtonHandler()}>Log In</button>\n      </React.Fragment>\n      );\n      };\n      export  default  LoginButton;
\n

In the above code, you will see the lrConfig object, which has apikey that you will get from the LoginRadius account. After calling loginradius.api.login, you will get the response in which you will get the access Token. Through this access token, you can get the user profile.

\n

Add Logout to your react application

\n

Create LogoutPage.js file and add following code:

\n
    import React, { useState } from "react";\n\n    const lrconfig = {\n      apiKey: "*************************", //LoginRadius API key\n    };\n\n    const loginradius = {};\n    if (window.LoginRadiusV2) {\n      loginradius = new window.LoginRadiusV2(lrconfig);\n      loginradius.api.init(lrconfig);\n    }\n\n    const LogoutButton = () => {\n      const token  = '************'; // Access Token that you got after login\n      const logoutButtonHandler = () => {\n        //Note: Call invalidate token api to invalidate the token.**\n        loginradius.api.invalidateToken(\n               token,\n               (successResponse)=>{\n           console.log(successResponse);\n           },\n               (errors) => {\n                 console.log(errors);\n               }\n             );\n       }\n      return (\n        <React.Fragment>\n       <button onClick={() => logoutButtonHandler()}>Logout</button>\n       </React.Fragment>\n       );\n    };\n    export default LogoutButton;
\n

In the above code, we have called invalidated token api, which expires your access token.

\n

Add Signup to your react application

\n

Create SignupPage.js file and add the following code:

\n
    import  React, { useState } from  "react";\n    const  lrconfig = {\n    apiKey:  "*************************", //LoginRadius API key\n    sott:  "***************************"  //Secure Token for signup functionality\n    };\n    const  loginradius = {};\n    if (window.LoginRadiusV2) {\n      loginradius = new  window.LoginRadiusV2(lrconfig);\n      loginradius.api.init(lrconfig);\n    }\n    const  SignupButton = () => {\n      const  signupButtonHandler = () => {\n      loginradius.api.registration({\n        email: [{ type: "Primary", value: emailValue }],\n              password: passwordValue\n            },\n      (successResponse)=>{\n      //Here you will get the response after registration\n      console.log(successResponse);\n      },\n      (errors) => {\n      console.log(errors);\n      });\n      }\n      const [emailValue, updateEmailValue] = useState("");\n      const [passwordValue, updatePasswordValue] = useState("");\n      return (\n      <React.Fragment>\n      <input  type="text"  value={emailValue}  onChange={(e)=>{updateEmailValue(e.target.value)}}  placeholder={"email"}/>\n      <input  type="password"  value={passwordValue}  onChange={(e)=>{updatePasswordValue(e.target.value)}}  placeholder={"Password"}  />\n      <button  onClick={() =>  signupButtonHandler()}>Log In</button>\n      </React.Fragment>\n      );\n      };\n      export  default  SignupButton;
\n

In the above code, You will get a success/error response after calling the registration api.

\n

Wrap up

\n

The most common authentication use case for a React application gets covered in this tutorial: quick login and logout. However, LoginRadius is an expandable and versatile platform that can help you accomplish much more. In this guide, We have used the LoginRadius API Framework. If you want to incorporate our hosted page into your application, follow this documentation.

\n

Let me know what you think of this tutorial in the comments below. Thanks for reading :)

\n","headings":[{"value":"Configure LoginRadius for React Application","depth":2},{"value":"Add following LoginRadius JS library into your application","depth":2},{"value":"Add Authentication when you have customized Login Page","depth":2},{"value":"Add Login to your react application","depth":3},{"value":"Add Logout to your react application","depth":3},{"value":"Add Signup to your react application","depth":3},{"value":"Wrap up","depth":2}],"fields":{"slug":"/engineering/user-authentication-react-application/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"This article focuses on helping developers learn how to integrate user authentication in React applications and determine the basic principles of authentication with React.","title":"A Guide To React User Authentication with LoginRadius","canonical":"https://www.loginradius.com/blog/engineering/guest-post/role-based-user-authentication-with-loginradius-and-reactjs/","date":"December 10, 2020","updated_date":null,"tags":["Authentication","LoginRadius","React"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/a877f5fa04ac6dd24b63bb101cc8302d/2ad7f/authentication-main.webp","srcSet":"/static/a877f5fa04ac6dd24b63bb101cc8302d/1c9b5/authentication-main.webp 200w,\n/static/a877f5fa04ac6dd24b63bb101cc8302d/f1752/authentication-main.webp 400w,\n/static/a877f5fa04ac6dd24b63bb101cc8302d/2ad7f/authentication-main.webp 800w,\n/static/a877f5fa04ac6dd24b63bb101cc8302d/e7405/authentication-main.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","bio":"She is a software enthusiast, an avid contributor, and a regular blog writer. She usually works with React, UI/UX, Javascript, Node.js, and DevOps.","avatar":null}}}},"pageContext":{"id":"95aac512-ecfd-54b7-8369-a0e09370d010","fields__slug":"/engineering/user-authentication-react-application/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}