In this article, I am going to Login Registration App Using Larave 7 and frontend we are using React

Registration and Login is a core functionality of any application. If you are creating an application that will have certain access for certain users. Then definitely you will have to create the login and sign-up procedure before diving into the application. So, you can say that the Login and sign-up is the initial step for any application. So, today, in this post, I will be creating a React Login and Registration app using the Laravel 7 API. Yes, we will be using the back-end as the Laravel 7 that will be managed using the RESTful APIs. In our last tutorial of React, we had seen how to integrate the APIs in React application. That was the basic demonstration through a CRUD application. But, in this React login form and sign-up tutorial, we will be doing some advanced procedures. So, let’s start without wasting more time.

Firstly, I will start with the APIs part that will be created using Laravel 7 with MySQL database.

Content

• Prerequisites
• Create_a_New_Project_in_Laravel_7_For_React_Login_and_Registration_API
•  Create and Configure Database
• Create Model and Migration For Users
• Migrate Users Table Schema
• Add Fillable Data in User Model
• Create a Controller in Laravel 7
• Create Routes
• Run Application To Test API
• Create React Login App
• Create the React Registration App
• Install Bootstrap and Reactstrap in Reactjs Registration App
• Install Axios Library in React Login App
• Install React Router Dom
• Create Component in Reactjs Registration App
• Import Components and Router in App.js
• Create Signup component
• Add CSS for Sign Up Component
• Create a SignIn Component
• Create Home Component
• Conclusion

Prerequisites

For creating a Laravel 7 project, I assume that your system configuration is ready with the mentioned as below.

• PHP >= 7.2.5
• MySQL > 5
• Apache/Nginx Server
• Composer
• Postman

Now, let’s start by creating the Laravel project for the React Login and Registration API.

Create a New Project in Laravel 7 For React Login and Registration API

For creating a new project in Laravel, we will use the composer dependency manager. Hence, open the command prompt and hit the below command.

composer create-project --prefer-dist laravel/laravel login-api

It will take a couple of minutes to create and setup the new project in your system. So, please wait for the completion.

Create and Configure Database

I am using MySQL command line, so will be creating a new database there.

CREATE DATABASE laravel7_login_api

After creating the database, we will configure the database credentials inside the project. Laravel contains the global environment file for these types of configurations. Inside the root of your project, you will find the .env file. Now, open the file and replace the database details with yours.

DB_CONNECTION=mysql 

DB_HOST=127.0.0.1

 DB_PORT=3306 

DB_DATABASE=laravel7_login_api 

DB_USERNAME=your database username 

DB_PASSWORD=your database password

Now, your project is ready to sync with the MySQL database. So, in the next step, we will create the Model and Migration file.

We are going to implement the React login and sign up using the Laravel RESTful API. Hence, we will be working on the User module for this project. Therefore, we will require to create a model and migration for the user.

Create Model and Migration For Users

Laravel project comes with a default Model and migration for the Users. So, at the moment we can use this model and migration for the Users. Here, we will be doing the same, but we will make changes in the migration file. So, let’s do it by adding the schema for the user’s table.

create_users_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
   /**
    * Run the migrations.
    *
    * @return void
    */
   public function up()
   {
       Schema::create('users', function (Blueprint $table) {
           $table->id();
           $table->string("first_name")->nullable();
           $table->string("last_name")->nullable();
           $table->string("full_name")->nullable();
           $table->string("email")->unique();
           $table->string("password");
           $table->string("phone")->nullable();
           $table->timestamps();
       });
   }

   /**
    * Reverse the migrations.
    *
    * @return void
    */
   public function down()
   {
       Schema::dropIfExists('users');
   }
}

Add the above schema for the Users. Here, I am going to create a React login and sign-up functionality with some basic attributes of the Users. You can add more fields by adding the schema in the above migration file.

Migrate Users Table Schema

Now, we will migrate the users table so that the defined schema will be generated in the database.

migrate-tables

php artisan migrate

The above command will migrate all the schema inside the database.

Add Fillable Data in User Model

Inside the User model, we will have to add the fillable data. The fillable data will define the database table fields which will gonna managed through the model.

User.php

<?php

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
   use Notifiable;

   /**
    * The attributes that are mass assignable.
    *
    * @var array
    */
   protected $fillable = [
       'first_name', 'last_name', 'full_name', 'email', 'password', 'phone'
   ];

   /**
    * The attributes that should be hidden for arrays.
    *
    * @var array
    */
   protected $hidden = [
       'password', 'remember_token',
   ];

   /**
    * The attributes that should be cast to native types.
    *
    * @var array
    */
   protected $casts = [
       'email_verified_at' => 'datetime',
   ];
}

Create a Controller in Laravel 7

For implementing the React login and signup functionality using the API, we will have to create a controller. Here, I will be creating a controller named UserController using the artisan command.

create-controller

php artisan make:controller UserController

The above command will create a controller inside the app/Http/Controllers folder.

After creating the controller, we will create the functionality for the React login page.

UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use Illuminate\Support\Facades\Validator;

class UserController extends Controller
{

   private $status_code    =        200;

   public function userSignUp(Request $request) {
       $validator              =        Validator::make($request->all(), [
           "name"              =>          "required",
           "email"             =>          "required|email",
           "password"          =>          "required",
           "phone"             =>          "required"
       ]);

       if($validator->fails()) {
           return response()->json(["status" => "failed", "message" => "validation_error", "errors" => $validator->errors()]);
       }

       $name                   =       $request->name;
       $name                   =       explode(" ", $name);
       $first_name             =       $name[0];
       $last_name              =       "";

       if(isset($name[1])) {
           $last_name          =       $name[1];
       }

       $userDataArray          =       array(
           "first_name"         =>          $first_name,
           "last_name"          =>          $last_name,
           "full_name"          =>          $request->name,
           "email"              =>          $request->email,
           "password"           =>          md5($request->password),
           "phone"              =>          $request->phone
       );

       $user_status            =           User::where("email", $request->email)->first();

       if(!is_null($user_status)) {
          return response()->json(["status" => "failed", "success" => false, "message" => "Whoops! email already registered"]);
       }

       $user                   =           User::create($userDataArray);

       if(!is_null($user)) {
           return response()->json(["status" => $this->status_code, "success" => true, "message" => "Registration completed successfully", "data" => $user]);
       }

       else {
           return response()->json(["status" => "failed", "success" => false, "message" => "failed to register"]);
       }
   }


   // ------------ [ User Login ] -------------------
   public function userLogin(Request $request) {

       $validator          =       Validator::make($request->all(),
           [
               "email"             =>          "required|email",
               "password"          =>          "required"
           ]
       );

       if($validator->fails()) {
           return response()->json(["status" => "failed", "validation_error" => $validator->errors()]);
       }


       // check if entered email exists in db
       $email_status       =       User::where("email", $request->email)->first();


       // if email exists then we will check password for the same email

       if(!is_null($email_status)) {
           $password_status    =   User::where("email", $request->email)->where("password", md5($request->password))->first();

           // if password is correct
           if(!is_null($password_status)) {
               $user           =       $this->userDetail($request->email);

               return response()->json(["status" => $this->status_code, "success" => true, "message" => "You have logged in successfully", "data" => $user]);
           }

           else {
               return response()->json(["status" => "failed", "success" => false, "message" => "Unable to login. Incorrect password."]);
           }
       }

       else {
           return response()->json(["status" => "failed", "success" => false, "message" => "Unable to login. Email doesn't exist."]);
       }
   }

   // ------------------ [ User Detail ] ---------------------
   public function userDetail($email) {
       $user               =       array();
       if($email != "") {
           $user           =       User::where("email", $email)->first();
           return $user;
       }
   }
}

Create Routes

After creating the functionalities of login and sign up we will create the routes. Here, we are creating the API, hence we will have to put the routes inside the api.php file.

api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
// use App\Models\User;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
   return $request->user();
});
Route ::post('/user-signup',[UserController::class,'userSignUp']);
Route ::post('/user-login',[UserController::class,'userLogin']);

Run Application To Test API

After creating the routes, let’s serve the project. Here, the default port of the application is 8000.

So, for the user sign up the endpoint will be –

user-signup

http://localhost:8000/api/user-signup 

Request Type : POST

So, for testing the API, I will be using Postman. In the postman, put the form fields in Body->form-data.

User Sign Up API

After hitting the API, you will get the response as below.

User Sign Up API Response

In the user sign-up, I have used the form validation. Hence, if you keep empty the fields or the same email, it will return the validation errors.

User Sign Up Form Validation Errors

Similarly, run the user login API. For the user login, the endpoint will be-

User Login API

If the email and password are correct, it will return the success response with status 200. Here, the login API has been executed.

Database

User Login Success API

If the validation fails, it will return the validation errors as shown below.

User Login Validation Errors

So, API is ready to implement the React login sign-up functionality. Hence, move to the front-end part React login page.

Note** All Postman images are deleted please follow the instruction same you will get the message

Now we will Create React Login App

For creating a new React application you will require the Node.js installed in your system.

Let’s Create a Registration Application in Reactjs.

Create the React Registration App
Open the terminal or command prompt and hit the below command to create a registration app

npx create-react-app registration-app

It will take a few minutes to create the react registration app. Then, go to registration-app by using the below command

cd registration-app

Now, run the app using the command

npm start

Now, the app will be running on the default port localhost:3000.

Install Bootstrap and Reactstrap in Reactjs Registration App

For the UI part, I will be using Bootstrap. This will make it easy for creating layouts with the predefined classes. Hence, for installing the Bootstrap, simply hit the below command in the terminal or command prompt.

npm install bootstrap reactstrap

The above command will add the Bootstrap CSS and JS file globally inside the Reactjs Registration application.

After completing the installation, let’s import the Bootstrap CSS in our application. Basically, we will be including the globally that’s why we will import it in the src/index.js file of our application.

import 'bootstrap/dist/css/bootstrap.min.css';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
 <React.StrictMode>
   <App />
 </React.StrictMode>,
 document.getElementById('root')
);
serviceWorker.unregister();

For API call we will be using the Axios library for handling the HTTP requests.

install axios  with npm

npm install --save axios

Install React Router Dom
For Routing, install React Router DOM by the following command.

install react-router-dom

npm install --save react-router-dom

Create Component in Reactjs Registration App
Create a folder named components inside that create the files. see below picture.

The folder structure in React Login app

Now all the setup has been done let’s start to write our code.

Import Components and Router in App.js

In App.js file import the Signup, Sign in, and Home file. We will also import the router for routing. This App.js file acts as a container to switch between SignUp.js, SignIn.js, and Home.js components respectively.

App.js

import React, { Component } from "react";
import "./App.css";
import Signup from "./components/signUp/Signup";
import Signin from "./components/SignIn/Signin";
import Home from "./components/Home/Home";
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";

export default class App extends Component {
 render() {
   let navLink = (
     <div className="Tab">
       <NavLink to="/sign-in" activeClassName="activeLink" className="signIn">
         Sign In
       </NavLink>
       <NavLink exact to="/" activeClassName="activeLink" className="signUp">
         Sign Up
       </NavLink>
     </div>
   );
   const login = localStorage.getItem("isLoggedIn");

   return (
     <div className="App">
       {login ? (
         <Router>
           <Route exact path="/" component={Signup}></Route>
           <Route path="/sign-in" component={Signin}></Route>
           <Route path="/home" component={Home}></Route>
         </Router>
       ) : (
         <Router>
           {navLink}
           <Route exact path="/" component={Signup}></Route>
           <Route path="/sign-in" component={Signin}></Route>
           <Route path="/home" component={Home}></Route>
         </Router>
       )}
     </div>
   );
 }
}

//App.css file
.App {
 width:40%;
 margin :5% 0 0 30%;
}

Create Signup component

We will work on the user sign-up and login processes. Hence, firstly, we will require creating a component for implementing the functionality of User Sign Up. Therefore, create a component and name it Signup.js. Now, add the below snippet there.

Signup.js

import React, { Component } from "react";
import { Button, Form, FormGroup, Label, Input } from "reactstrap";
import axios from "axios";
import "./signup.css";
import { Link } from "react-router-dom";

export default class Signup extends Component {
 userData;
 constructor(props) {
   super(props);
   this.state = {
     signupData: {
       name: "",
       email: "",
       phone: "",
       password: "",
       isLoading: "",
     },
     msg: "",
   };
 }

 onChangehandler = (e, key) => {
   const { signupData } = this.state;
   signupData[e.target.name] = e.target.value;
   this.setState({ signupData });
 };
 onSubmitHandler = (e) => {
   e.preventDefault();
   this.setState({ isLoading: true });
   axios
     .post("http://localhost:8000/api/user-signup", this.state.signupData)
     .then((response) => {
       this.setState({ isLoading: false });
       if (response.data.status === 200) {
         this.setState({
           msg: response.data.message,
           signupData: {
             name: "",
             email: "",
             phone: "",
             password: "",
           },
         });
         setTimeout(() => {
           this.setState({ msg: "" });
         }, 2000);
       }

       if (response.data.status === "failed") {
         this.setState({ msg: response.data.message });
         setTimeout(() => {
           this.setState({ msg: "" });
         }, 10000);
       }
     });
 };
 render() {
   const isLoading = this.state.isLoading;
   return (
     <div>
       <Form className="containers shadow">
         <FormGroup>
           <Label for="name">Name</Label>
           <Input
             type="name"
             name="name"
             placeholder="Enter name"
             value={this.state.signupData.name}
             onChange={this.onChangehandler}
           />
         </FormGroup>
         <FormGroup>
           <Label for="email">Email id</Label>
           <Input
             type="email"
             name="email"
             placeholder="Enter email"
             value={this.state.signupData.email}
             onChange={this.onChangehandler}
           />
         </FormGroup>
         <FormGroup>
           <Label for="phone">Phone Number</Label>
           <Input
             type="phone"
             name="phone"
             placeholder="Enter phone number"
             value={this.state.signupData.phone}
             onChange={this.onChangehandler}
           />
         </FormGroup>
         <FormGroup>
           <Label for="password">Password</Label>
           <Input
             type="password"
             name="password"
             placeholder="Enter password"
             value={this.state.signupData.password}
             onChange={this.onChangehandler}
           />
         </FormGroup>
         <p className="text-white">{this.state.msg}</p>
         <Button
           className="text-center mb-4"
           color="success"
           onClick={this.onSubmitHandler}
         >
           Sign Up
           {isLoading ? (
             <span
               className="spinner-border spinner-border-sm ml-5"
               role="status"
               aria-hidden="true"
             ></span>
           ) : (
             <span></span>
           )}
         </Button>
         <Link to="/sign-in" className="text-white ml-5">I'm already member</Link>
       </Form>
     </div>
   );
 }
}

Add CSS for Sign Up Component
For styling, I have added some basic CSS here. Actually, I am not giving much focus to the design part. So, add the CSS in the same component that is signup.css that will be accessible only for this component.

Signup.css

.containers {

background-color: rgb(95, 78, 192);

padding: 20px 40px;

color: #fff;

font-weight: 600;

box-shadow: 7px -8px 11px -5px rgba(#195190FF);

}

.Tab{

display: flex;

justify-content: space-between;

}

.signUp, .signIn{

background-color: rgb(172, 172, 30);

width:50%;

font-size: 22px;

color: #fff;

padding: 10px;

text-align: center;

}

.signIn:hover, .signUp:hover {

text-decoration: none;

color: #fff;

}

.activeLink{

color: #fff;

background-color: #195190FF;

}

Here, we are taking Name, Email id, Phone no, and password as inputs from the user. Then we will be storing it into their relevant defined state variables. After that, we will pass these details of the user to the backend through API on the click of the Signup button. That will be executed by the onSubmitHandler function.

Now submitting the user data to the backend. When data will be submitted successfully, it will return the response status code 200 from the API. That we have tested above in the Laravel 7 API part. So, on the basis of the API response will show the message of success and failure to the user. After that, we will clear the states. For the message, I have set the timeout() function to display the message till a specified time

If the response of the status is failed then we will show the failure message to the user.

Create a SignIn Component
Secondly, we will create a SignIn component. On this screen, users have to enter the email address and password for Sign-in into their account. After a successful login, the user will redirect to the Home component with a welcome message. But, if the login is invalid, then it will show the error message that will return from the API response.

So, add the below code in Signin.js.

Signin.js

import React, { Component } from "react";
import { Button, Form, FormGroup, Label, Input } from "reactstrap";
import axios from "axios";
import { Redirect } from "react-router-dom";

export default class Signin extends Component {
 constructor(props) {
   super(props);
   this.state = {
     email: "",
     password: "",
     msg: "",
     isLoading: false,
     redirect: false,
     errMsgEmail: "",
     errMsgPwd: "",
     errMsg: "",
   };
 }
 onChangehandler = (e) => {
   let name = e.target.name;
   let value = e.target.value;
   let data = {};
   data[name] = value;
   this.setState(data);
 };

 onSignInHandler = () => {
   this.setState({ isLoading: true });
   axios
     .post("http://localhost:8000/api/user-login", {
       email: this.state.email,
       password: this.state.password,
     })
     .then((response) => {
       this.setState({ isLoading: false });
       if (response.data.status === 200) {
           localStorage.setItem("isLoggedIn", true);
           localStorage.setItem("userData", JSON.stringify(response.data.data));
         this.setState({
           msg: response.data.message,
           redirect: true,
         });
        
       }
       if (
         response.data.status === "failed" &&
         response.data.success === undefined
       ) {
         this.setState({
           errMsgEmail: response.data.validation_error.email,
           errMsgPwd: response.data.validation_error.password,
         });
         setTimeout(() => {
           this.setState({ errMsgEmail: "", errMsgPwd: "" });
         }, 2000);
       } else if (
         response.data.status === "failed" &&
         response.data.success === false
       ) {
         this.setState({
           errMsg: response.data.message,
         });
         setTimeout(() => {
           this.setState({ errMsg: "" });
         }, 2000);
       }
     })
     .catch((error) => {
       console.log(error);
     });
 };

 render() {
   if (this.state.redirect) {
     return <Redirect to="/home" />;
   }
   const login = localStorage.getItem("isLoggedIn");
   if (login) {
     return <Redirect to="/home" />;
   }
   const isLoading = this.state.isLoading;

   
   return (
     <div>
       <Form className="containers">
         <FormGroup>
           <Label for="email">Email id</Label>
           <Input
             type="email"
             name="email"
             placeholder="Enter email"
             value={this.state.email}
             onChange={this.onChangehandler}
           />
           <span className="text-danger">{this.state.msg}</span>
           <span className="text-danger">{this.state.errMsgEmail}</span>
         </FormGroup>
         <FormGroup>
           <Label for="password">Password</Label>
           <Input
             type="password"
             name="password"
             placeholder="Enter password"
             value={this.state.password}
             onChange={this.onChangehandler}
           />
           <span className="text-danger">{this.state.errMsgPwd}</span>
         </FormGroup>
         <p className="text-danger">{this.state.errMsg}</p>
         <Button
           className="text-center mb-4"
           color="success"
           onClick={this.onSignInHandler}
         >
           Sign In
           {isLoading ? (
             <span
               className="spinner-border spinner-border-sm ml-5"
               role="status"
               aria-hidden="true"
             ></span>
           ) : (
             <span></span>
           )}
         </Button>
       </Form>
     </div>
   );
 }
}

Here, the form is storing email and password in relevant state variables which will change on each keystroke in onChangehandler. We will send these details to the login API. This event will be triggered after clicking on the Sign-in button. This will be executed in the onSignInHandler function.

After the successful login, the API will return the status 200. So, on the basis of the success response, we will be maintaining the login session using the local storage. Here, I will set the item as isLoggedIn user to true.

Email Validation Error Message

In another case, if the response status is failed then will show the error message to the user. Also, the error response will be coming from the API response.

Email doesn’t exist validation
Now, we will create a final component for the redirection after the successful login.

Home.js

import React, { Component } from "react";
import { Button } from "reactstrap";
import { Redirect } from "react-router-dom";

export default class Home extends Component {
 state = {
   navigate: false,
 };

 onLogoutHandler = () => {
   localStorage.clear();
   this.setState({
     navigate: true,
   });
 };
 render() {
   const user = JSON.parse(localStorage.getItem("userData"));
   const { navigate } = this.state;
   if (navigate) {
     return <Redirect to="/" push={true} />;
   }
   return (
     <div className="container  border">
       <h3> HomePage</h3>
       <div className="row">
         <div className="col-xl-9 col-sm-12 col-md-9 text-dark">
           <h5> Welcome, {user.first_name} </h5> You have Logged in
           successfully.
         </div>
         <div className="col-xl-3 col-sm-12 col-md-3">
           <Button
             className="btn btn-primary text-right"
             onClick={this.onLogoutHandler}
           >
             Logout
           </Button>
         </div>
       </div>
     </div>
   );
 }
}

Once it is done, save and launch the application to see the result.

When the user enters the valid email id and password it will be redirected to the Home component.

After the successful login, I have redirected to the home component. In the home component, while the user is logged in the Sign In and Sign Up tabs will be disabled. This is managed by the local storage value (isLoggedIn). So, while isLoggedIn exist with true in local storage the user remains logged in.

When you will click on the Logout button, it will clear the local storage value. Also, you will be redirected to the Sign In page.

Download Full code

Frontend  https://github.com/PM369/react-frontend.git

Backend https://github.com/PM369/react-backend.git

Thanks for reading…