login form in React with Laravel

In this article, I would like to show you how to make a simple login form in React. Login form in React with Laravel.

I will use Laravel for Rest API. Because We must need one server-side language for database transactions. I will use Material UI for Form designing. Learn more about Material UI.

React will use Axios or fetch for communicating with Laravel . Laravel uses REST API for sending and receiving request from REACT JS .

Login in ReactJS — Sing Up Form in React

Now We start with Server Side part ( Laravel Part )

Making REST API in Laravel is very easy. First, make a Database with the named react_laravel_signup.

I am using Laravel 8 so I didn’t face CORS Error If you’re using Laravel 5 or 6 You will face CORS Errors. So Always enable CORS in Laravel.

--
-- Database: `react_laravel_signup`

-- Table structure for table `users`
--
CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `name` varchar(255) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `users`
--

Now First make routes for REST API so I will make two URLs for REST API. ( app/routes/api.php ) . We always use api.php to make REST API Routes.

api.php

<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
use App\Http\Controllers\AuthController;

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/register',[UserController::class,'register']); // Singup URL 
Route::post('/reactlogin',[UserController::class,'login']); // lOGIN url

Now make a Controller named UserController . ( app/http/controllers/UserController.php )

UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Redirect,Response,File;
use Illuminate\Support\Facades\Hash;

class UserController extends Controller
{
    function register(Request $req)
    {
        $name = $req->input('name');
        $email = $req->input('email');
        $password = Hash::make($req->input('password'));
        DB::table('users')->insert([
            'name' =>   $name,
            'email' =>  $email ,
            'password'=> $password 
          ]);
    }
    function login(Request $req)
    {
        $email =  $req->input('email');
        $password = $req->input('password');

        $user = DB::table('users')->where('email',$email)->first();
        if(!Hash::check($password, $user->password))
        {
            echo "Not Matched";
        }
        else
        {
            //$user = DB::table('users')->where('email',$email)->first();
           echo $user->email;
        }
    }
}

I didn’t use model because I used Query Builder feature of Laravel so I didn’t require Model . If you are using Laravel Eloquent then you need Model file.

React Part Starts here

First install some packages here . To Install a package write npm install axios or yarn add axios

"@material-ui/core": "^4.11.4",
"axios": "^0.21.1",
 "react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",

I have made three Components in SRC Folder of React. Home.js, Login.js & Singup.js

Singup.js ( src/Singup.js))

import React from 'react'
import { Grid,Paper, Avatar, TextField, Button, Typography } from '@material-ui/core'
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import { Link, NavLink } from "react-router-dom";
import {useState} from 'react';
import axios from 'axios';

const Signup=()=>{

    const paperStyle={padding :20,height:'70vh',width:280, margin:"20px auto"}
    const avatarStyle={backgroundColor:'#3370bd'}
    const btnstyle={margin:'8px 0'}

    const[errors,setErrors] = useState('');
    const [user, setUser] = useState({
        name: "",
        email: "",
        password:""
      });
     
      const {name, email,password} = user;
      const onInputChange = e => {
        setUser({ ...user, [e.target.name]: e.target.value });
      };

   async function  signup()
       {
        let result = await axios.post("http://localhost:8000/api/register",user);
        setErrors('Registration Successful')
        setUser({name:"",email:"",password:""}) // To Clear all fields

        }  
    
    return(
        <Grid>
            <Paper elevation={10} style={paperStyle}>
                <Grid align='center'>
                     <Avatar style={avatarStyle}><LockOutlinedIcon/></Avatar>
                    <h2>Sign Up</h2>
                    <h3 style={{color:"green"}}>{errors}</h3>
                </Grid>
               
                <TextField label='Name' name="name" value={name} onChange={e => onInputChange(e)} placeholder='Enter Name' type='text' fullWidth required/>
                <TextField label='Email'  name="email" value={email}  onChange={e => onInputChange(e)} placeholder='Enter Email' type='text' fullWidth required/>
                <TextField label='Password'  name="password" value={password}  onChange={e => onInputChange(e)} placeholder='Enter password' type='text' fullWidth required/>
            
                <Button type='submit' onClick={signup} color='primary' variant="contained" style={btnstyle} fullWidth>Singup</Button>
             
                <Typography>Click Here for 
                   <NavLink to="/">
                       <span style={{marginLeft:"4px"}}>Login</span>
                  </NavLink>
                </Typography>
            </Paper>
        </Grid>
    )
}

export default Signup

Now Make Login Page ( src/Login.js)

Login.js

import React from 'react'
import { Grid,Paper, Avatar, TextField, Button, Typography,Link as Nv } from '@material-ui/core'
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import { Link, NavLink } from "react-router-dom";
import {useState} from 'react';
import axios from 'axios';
import { useHistory, useParams } from "react-router-dom";

const Login=()=>{

    const paperStyle={padding :20,height:'70vh',width:280, margin:"20px auto"}
    const avatarStyle={backgroundColor:'#3370bd'}
    const btnstyle={margin:'8px 0'}
    
    const [msg,setMsg] = useState('');

    const [username, setUsername] = useState("");
    const [pass, setPass] = useState("");

    const [user, setUser] = useState({
        email: "",
        password:""
      });

      let history = useHistory(); 

      const {email,password} = user;
      const onInputChange = e => {
        setUser({ ...user, [e.target.name]: e.target.value });
      };

    const signIn = () =>
    {

      const users = { username };  // To Store Email in Localstore and send to Home Page 

       if(user.email === '')
       {
         alert('Email Field is empty')
       }
       else if(user.password === '')
       {
         alert('Pass Field is empty')
       }

       axios.post("http://localhost:8000/api/reactlogin/",user)
       .then(response => {
        setMsg(response.data);
        localStorage.setItem("users",response.data);
        history.push("/Home");
      });
    }

   
    return(
        <Grid>
            <Paper elevation={10} style={paperStyle}>
                <Grid align='center'>
                  <Avatar style={avatarStyle}><LockOutlinedIcon/></Avatar>
                    <h2>Sign In</h2>
                    <h4 style={{color:"green"}}>{msg}</h4>
                </Grid>
                <TextField label='Email'  name="email" value={email}  onChange={e => onInputChange(e)} placeholder='Enter Email' type='text' fullWidth required/>
                <TextField label='Password'  name="password" value={password}  onChange={e => onInputChange(e)} placeholder='Enter password' type='text' fullWidth required/>
             
                <Button type='submit' onClick={signIn} color='primary' variant="contained" style={btnstyle} fullWidth>Sign in</Button>
             
                <Typography > Don't Have Account ?
                  <NavLink to="Signup">
                   <span style={{marginLeft:"4px"}}>Singup</span>
                  </NavLink>
                </Typography>
            </Paper>
        </Grid>
    )
}

export default Login

Now Make Home Page ( src/Home.js)

import React from 'react'
import { Grid,Paper, Avatar,Box,Link, TextField, Button, Typography,Link as Nv } from '@material-ui/core'
import { useHistory, useParams } from "react-router-dom";

const Home=()=>{

    const paperStyle={padding :20,height:'70vh',width:280, margin:"20px auto"}
    const avatarStyle={backgroundColor:'#3370bd'}
    const btnstyle={margin:'8px 0'}

    const {users} = useParams();  
    let history = useHistory(); 

    const usersss = localStorage.getItem('users');
     
    const logout = () => 
    {
        localStorage.removeItem("users")
        history.push("/");
    }

    return(
        <div className="">
           <Grid>
             <div style={{  float:"right",marginRight:"50px"}}>
                          
               <Button type='submit' onClick={logout} color='primary' justifyContent="flex-end" variant="contained" style={btnstyle} fullWidth>Logout</Button>
            
            </div>
          </Grid>            
            <h4 style={{textAlign:"left",marginLeft:"10px"}}>Welcome To Home : <span style={{color:"blue"}}>{usersss}</span></h4>
            <h2 style={{color:"green"}}>Welcome To Home Page </h2>
            <p>React (also known as React.js or ReactJS) is an open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by ...
            <p>React · Declarative. React makes it painless to create interactive UIs. · Component-Based. Build encapsulated components that manage their own state, then ...</p>
           
            <Grid container direction="row" justify="center" alignItems="center">
             <Grid item xs={4}>
                <Typography gutterBottom variant="subtitle1">
                  Standard license
                </Typography>
                <Typography variant="body2" gutterBottom>
                  Full resolution 1920x1080 • JPEG
                </Typography>
                <Typography variant="body2" color="textSecondary">
                  ID: 1030114
                </Typography>
              </Grid>
              <Grid item xs={4}>
                <Typography gutterBottom variant="subtitle1">
                  Standard license
                </Typography>
                <Typography variant="body2" gutterBottom>
                  Full resolution 1920x1080 • JPEG
                </Typography>
                <Typography variant="body2" color="textSecondary">
                  ID: 1030114
                </Typography>
              </Grid>
              <Grid item xs={4}>
                <Typography gutterBottom variant="subtitle1">
                  Standard license
                </Typography>
                <Typography variant="body2" gutterBottom>
                  Full resolution 1920x1080 • JPEG
                </Typography>
                <Typography variant="body2" color="textSecondary">
                  ID: 1030114
                </Typography>
              </Grid>
            </Grid>
         </p>
        </div>
    )
}

export default Home

Now Call all components in App.js file .

App.js

import './App.css';
import { BrowserRouter as Router, Route,Switch,withRouter} from "react-router-dom";
import Login from "./Login";
import Signup from "./Signup";
import Home from "./Home";

function App() {
  return (
    <Router>
    <div className="App">
      <Switch>
        <Route exact path="/Home" component={Home} />
        <Route exact path="/" component={Login} />
        <Route exact path="/Signup" component={Signup} />
      </Switch>
    </div>
  </Router>
  );
}

export default App;

I am using PORT 3000 for React and PORT 8000 For Laravel

Run React using npm start ….It will run on http://localhost:3000/

Subscribe to My Programming YouTube Channel Before Downloading the code :

Download the Source Code from Here : Login in React

Read More Articles

PHP CRUD Application using OOP and MYSQL

PHP MySQL Ajax Live Search

Live Search with React and NodeJS

CRUD Operation Using React & Nodejs

How to Load millions record in React

Building an Image Gallery with Laravel and React

Comments 6

Nafi

May 30, 2021 at 7:36 pm

Wonderful Content bhai 🎈🙏🙏.
Please don’t stop teaching us ❤️

- Improve Programing Logic
  
  June 11, 2021 at 6:57 am
  
  Thank You
  
Akshay

August 5, 2021 at 1:26 am

Nicely done. But it would be much better if you use protected API’s with tokens.

- Improve Programing Logic
  
  August 8, 2021 at 2:21 pm
  
  Well, Said but Freshers ( in API ) cant understand complex code dear…That’s Why i made it Simple
  
Nismy

September 19, 2021 at 5:26 pm

After the successful login, When I refresh the home page the 404 | Not Found page is displaying. why is that?

- Improve Programing Logic
  
  September 22, 2021 at 4:34 pm
  
  Please send me the screen short of the error …With (Please make sure You Network Tab is on ) I want to see Request by REACT to Laravel
  
  Mail me : dysengg252@gmail.com

login form in React with Laravel

Now We start with Server Side part ( Laravel Part )

React Part Starts here

Download the Source Code from Here : Login in React

Comments 6

Leave a Reply Cancel reply