Join us on the demo, while our product experts provide a detailed walkthrough of our enterprise platform.

A Guide To React User Authentication with LoginRadius

This article focuses on helping developers to learn how to integrate user authentication in React applications and also learn the basic principles of authentication with React.

Versha Gupta
Versha Gupta
December 10, 2020
6 min read

To authenticate react applications, this guide uses LoginRadius API, which gives react developers a more straightforward way to add user authentication to react applications. To handle a lot of authentication implementation information, LoginRadius offers a high-level API. Using security best practices, you can now protect your respond apps while writing less code.

This article focuses on helping developers learn how to integrate user authentication in the React application. To practice the following security principles, you can improve a starter React application:

  • Add user login and user login.
  • User information retrieval.
  • Attach a tab for sign-up.

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.

Configure LoginRadius for React Application

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

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

Add following LoginRadius JS library into your application

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

Add Authentication when you have customized Login Page

Add Login to your react application

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

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

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

Add Logout to your react application

Create LogoutPage.js file and add following code:

    import React, { useState } from "react";

    const lrconfig = {
      apiKey: "*************************", //LoginRadius API key
    };

    const loginradius = {};
    if (window.LoginRadiusV2) {
      loginradius = new window.LoginRadiusV2(lrconfig);
      loginradius.api.init(lrconfig);
    }

    const LogoutButton = () => {
      const token  = '************'; // Access Token that you got after login
      const logoutButtonHandler = () => {
        //Note: Call invalidate token api to invalidate the token.**
        loginradius.api.invalidateToken(
               token,
               (successResponse)=>{
           console.log(successResponse);
           },
               (errors) => {
                 console.log(errors);
               }
             );
       }
      return (
        <React.Fragment>
       <button onClick={() => logoutButtonHandler()}>Logout</button>
       </React.Fragment>
       );
    };
    export default LogoutButton;

In above code, We have called invalidate token api which expire your access token.

Add Signup to your react application

Create SignupPage.js file and add following code:

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

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

Wrap up

The most common authentication use case for a React application was 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 to your application, you can do so by following this documentation.

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



LoginRadius Docs

Implement Authentication in Minutes

click here

Most Popular Tags

EngineeringJavaScriptNodeJsReactAuthenticationCSSSecurityOAuthGoSocialLogin

Are your customers safe on your application?

According to Forbes, data breaches exposed 4.1 billion records in the first six months of 2019. If this gets you worried, we’ve got your back!

LoginRadius protects your customers’ identities. We provide world-class security for your customers during login, registration, password setup, and any other data touchpoints, and make sure that their data is safe. We do so through by offering open source SDKs, integrations with over 150 third party applications, pre-designed and customizable login interfaces, and best-in-class data security products such as MFA, RBA, and Advanced Password Policies. The platform is already loved by over 3,000 businesses with a monthly reach of 1.17 billion users worldwide.Secure Your Application Now

Versha Gupta

Versha Gupta

I am a software enthusiast and contributor interested in React JS, UI/UX, Tech Blog, Javascript, Node JS, DevOps.

View Profile

Try a Modern Authentication Solution

$0/ month

Free Sign Up
  • 7,000 Monthly Active Users
  • 1 Web or Mobile App
  • Email/Password Login
  • 3 Social Login Providers
  • User Data Storage
  • Transactional Email Template
  • Customizable Login Interfaces