Tag: programming

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.

You can read more in detail about adding logout and signup to your react application in this React User Authentication Guide.