Categories

Saturday, October 23, 2021
therichposts@gmail.com
LaravelLaravel 8Vue3VueJs

Vue 3 Laravel 8 AUTH User Login Working Example

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:

User Login Working Video
Vue 3 Laravel 8 AUTH User Login Working Example
Vue 3 Laravel 8 AUTH User Login Working Example

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, 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.