Monday, May 27, 2024
LaravelLaravel 8Reactjs

Reactjs Laravel 8 AUTH User Login Working Example

Reactjs Laravel 8 AUTH User Login Working Example

Hello guy’s welcome back to my blog. Today in this blog post, I am going to tell you, Reactjs Laravel 8 AUTH User Login Working Example.

Guy’s in this post we will do below things:

  1. Reactjs Laravel 8 user login functionality.
  2. Reactjs add sweetalert2 popup for success and error messages which will come from laravel 8 backend.
  3. React js Bootstrap 5 working.

Very first please check the working video:

User Login Working Video

Guy’s for setup laravel 8 auth user login and register backend process please check below links and after it process with this post:

  1. Laravel8 create user login register pages tutorial.
  2. Laravel8 create database settings to save user data in database.
  3. Reactjs Laravel8 auth user registration

Reactjs Laravel 8 AUTH User Login Working Example
Reactjs Laravel 8 AUTH User Login Working Example
Wrong user details validation popup
Wrong user details validation popup

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh reactjs setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

npx create-react-app reactlaravel

cd reactlaravel

npm start // run the project

2. Now you need to run below commands to get axios, bootstrap and sweetalert module to make reactjs app looks good:

npm install sweetalert2-react

npm install bootstrap --save

npm install axios --save

npm start

3. Finally friends we need to add below code into our src/App.js file to get final output on web browser:

import React from 'react';
import './App.css';

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

//Include Sweetalert
import Swal from 'sweetalert2'

//axios for api request
import axios from 'axios';

class App extends React.Component {
      this.addFormData = this.addFormData.bind(this);
  //Form Submission
      const fd = new FormData();
      fd.append('email', this.refs.myEmail.value);
      fd.append('password', this.refs.password.value);
      //call api'', fd
      //Success alert
      if(res["data"]["status"] === "error")
          title: 'OPPS',
          text:   "Error,
          type: 'warning',
        title: 'WOW',
        text:   "You have been logged-in successfully",
        type: 'success',

  render() {
    return (
      <div className="maincontainer">
        <div className="container p-5">
        <h1 className="text-center mb-5">Jassa therichpost</h1>
        <form ref={(el) => this.myFormRef = el}>
        <div class="mb-3">
          <label for="exampleFormControlInput2" class="form-label">Enter Email</label>
          <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Email" ref="myEmail" />
        <div class="mb-3">
          <label for="exampleFormControlInput3" class="form-label">Enter Password</label>
          <input type="password" name="password" class="form-control" id="exampleInputPass1" aria-describedby="passHelp" placeholder="Enter Password" ref="password" />
        <button type="submit" className="btn btn-primary" onClick={this.addFormData}>Submit</button>



export default App;

Laravel 8 api and controller functions:

1. Now we need to create new folder ‘API’ inside app/Http/Controllers folder and after that, we need to create AuthController.php file inside app/Http/Controllers/API folder and below code into it:

namespace App\Http\Controllers\API;
use Illuminate\Http\Request; 
use App\Http\Controllers\Controller; 
use Illuminate\Support\Facades\Auth; 
use App\Models\User; 
use Validator;
use Illuminate\Support\Str;
class AuthController extends Controller 
   private $apiToken;
   public function __construct()
    $this->apiToken = uniqid(base64_encode(Str::random(40)));
   * @return \Illuminate\Http\Response 

  public function login(Request $request){ 
    //User check
    if(Auth::attempt(['email' => $request->email, 'password' => $request->password])){ 
      $user = Auth::user(); 
    //Setting login response 
    $success['token'] = $this->apiToken;
    $success['name'] =  $user->name;
      return response()->json([
        'status' => 'success',
        'data' => $success
    } else { 
      return response()->json([
        'status' => 'error',
        'data' => 'Unauthorized Access'

2. Now we need to add below code inside routes/api.php:

Route::post('login', [App\Http\Controllers\API\AuthController::class, 'login'])->name('login');

Now guy’s we are done. In next post we will do Reactjs Laravel 8 ecommerce site.

Guy’s if you have any kind of query then please feel free and comment below.



the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.