Vue 3 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, Vue 3 Laravel 8 AUTH User Login Working Example.

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

1. Vue 3 Laravel 8 User Login.
2. Vue3 add sweetalert2 popup for success and error messages which will come from laravel 8 backend.
3. Vue3 Bootstrap 5 working.

Very first please check the 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. Vue3 Laravel8 auth user registration

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 vuejs(Vue 3) 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.

Also guy’s in this I am installing bootstrap 5 for better looks and sweetalert2 popup for beautiful success messages:

npm install -g @vue/cli

vue create vuedemo

cd vuedemo

npm install bootstrap --save

npm install axios

npm install -S vue-sweetalert2

npm run serve //http://localhost:8080/

2. Finally guys we need to add below code into our src/App.vue file to get final output on web browser:

<template>
  <Header />

    <div class="container p-5">
      <h3 class="text-center mt-2 mb-5">therichpost.com</h3>
      <div class="col-md-12">
       
        <form v-on:submit.prevent="login_user">
          
         <div class="mb-3">
            <label for="exampleFormControlInput2" class="form-label">Enter Email</label>
           <input type="text" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Email" v-model="form.email">
          </div>

           <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" v-model="form.password">
          </div>
      
    
          <button type="submit" class="btn btn-primary mt-5">Submit</button>
    </form>
    </div>
    </div>
   <Footer />
</template>

<script>

//importing bootstrap 5 Modules
import "bootstrap/dist/css/bootstrap.min.css";
//import "bootstrap/dist/js/bootstrap.min.js";
import "./App.css";
import Header from './components/Header'
import Footer from './components/Footer'
import axios from 'axios'
import Swal from 'sweetalert2'
export default {
  
components: {
    Header,
    Footer
  },
  data(){
  return {
   
    form:{
      email: '',
      password: ''
      
    }
  }
},
  methods:{

    //user login function and api call
     login_user(){
    
      axios
      .post('http://127.0.0.1:8000/api/login',this.form)
      .then((resp) =>{
          console.log(resp["data"]["status"]);
          //this.loadlist();
          //reset form
         this.form.email = '';
         this.form.password = '';
         if(resp["data"]["status"] == "error")
         {
           Swal.fire({
            title: 'OPPS',
            text:   "error",
            icon: 'warning',
          
        });
         }
         else
         {
           Swal.fire({
            title: 'Hurry',
            text:   "You have been logged-in successfully",
            icon: 'success',
          
        });
         }
          
      })
      .catch((e)=>{
          console.log(e);
           Swal.fire({
          title: 'Hurry',
          text:   e,
          icon: 'warning',
          
        });
      })
    }
  }
  
}
</script>

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:

<?php
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 vue 3 Laravel 8 ecommerce site.

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

Jassa

Thanks