Tutorial Inertia.js Authentication #5 : Membuat Proses Login

• Langkah 1 - Membuat Controller Login
• Langkah 2 - Menambahkan Route Login
  • Langkah 3 - Membuat Halaman View Login
• Langkah 4 - Uji Coba Proses Login

Halo teman-teman semuanya, di artikel sebelumnya kita telah berhasil belajar bagaimana cara membuat proses register di Inertia.js. Di artikel kali ini kita akan belajar bersama-sama bagaimana cara membuat proses login menggunakan Inertia.js dengan data yang sudah kita inputkan saat proses register.

Langkah 1 - Membuat Controller Login

Pertama, kita akan membuat controller-nya terlebih dahulu. Dimana di dalam controller ini kita akan membuat beberapa method, seperti index yang digunakan untuk render halaman view/form. Kemudian store untuk proses login-nya dan destroy untuk proses logout.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.

php artisan make:controller Auth/LoginController

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file controller baru dengan nama LoginController.php yang berada di dalam folder app/Http/Controllers/Auth.

Silahkan buka file tersebut dan ubah kode-nya menjadi seperti berikut ini :

<?php

namespace App\Http\Controllers\Auth;

use Inertia\Inertia;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;

class LoginController extends Controller
{    
    /**
     * index
     *
     * @return void
     */
    public function index()
    {
        return Inertia::render('Auth/Login');
    }
    
    /**
     * store
     *
     * @param  mixed $request
     * @return void
     */
    public function store(Request $request)
    {
        /**
         * validate request
         */
        $request->validate([
            'email'     => 'required|email',
            'password'  => 'required'
        ]);

        //get email and password from request
        $credentials = $request->only('email', 'password');

        //attempt to login
        if (Auth::attempt($credentials)) {

            //regenerate session
            $request->session()->regenerate();

            //redirect route dashboard
            return redirect('/dashboard');
        }

        //if login fails
        return back()->withErrors([
            'email' => 'The provided credentials do not match our records.',
        ]);
    }

    /**
     * destroy
     *
     * @return void
     */
    public function destroy()
    {
        auth()->logout();

        return redirect('/login');
    }
}

Dari penambahan kode di atas. Pertama kita import Inertia.

use Inertia\Inertia;

Kemudian kita import Facades Auth dari Laravel. Ini akan kita gunakan untuk proses attempt atau login.

use Illuminate\Support\Facades\Auth;

Dan di dalam class LoginController, kita menambahkan 3 method baru. Yaitu :

1. function index
2. function store
3. function destroy

• Function Index

  Method ini akan kita gunakan untuk melakukan render halaman view/form menggunakan Inertia.js.

  return Inertia::render('Auth/Login');
  

• Function Store

  Method ini akan kita gunakan untuk proses authentication. Dimana di dalam method ini, pertama kita lakukan validasi terhadap data yang dikirimkan melalui request.

  $request->validate([
      'email'     => 'required|email',
      'password'  => 'required'
  ]);
  

  Jika data yang dikirimkan sudah sesuai, maka kita buat variable 1 lagi yang bernama $credentials yang isinya adalah request email dan password.

  //get email and password from request
  $credentials = $request->only('email', 'password');
  

  Kemudian, untuk melakukan proses authentication, kita menggunakan Facades Auth dengan method attempt.

  if (Auth::attempt($credentials)) {
  
  	//...
  
  }
  

  Jika proses authentication berhasil, maka kita akan lakukan regenerate session.

  //regenerate session
  $request->session()->regenerate();
  

  Setelah itu, kita redirect ke dalam URL /dashboard.

  return redirect('/dashboard');
  

  Tapi, jika proses authentication gagal dilakukan, maka akan melakukan redirect ke halaman form lagi dengan memberikan message error login failed.

  return back()->withErrors([
     'email' => 'The provided credentials do not match our records.',
  ]);
  

• Function Destroy

  Method ini kita gunakan untuk proses logout. Dimana di dalamnya kita memanggil helper auth dan memanggil method logout.

  auth()->logout();
  

  Jika proses logout berhasil, maka kita akan redirect ke URL /login.

Langkah 2 - Menambahkan Route Login

Setelah berhasil membuat controller, selanjutnya kita membuat route untuk login. Silahkan buat file routes/web.php, kemudian ubah kode-nya menjadi seperti berikut ini :

<?php

use Illuminate\Support\Facades\Route;

//route index register
Route::get('/register', [\App\Http\Controllers\Auth\RegisterController::class, 'index']);

//route store register
Route::post('/register', [\App\Http\Controllers\Auth\RegisterController::class, 'store']);

//route index login
Route::get('/login', [\App\Http\Controllers\Auth\LoginController::class, 'index']);

//route store login
Route::post('/login', [\App\Http\Controllers\Auth\LoginController::class, 'store']);

//route logout
Route::post('/logout', [\App\Http\Controllers\Auth\LoginController::class, 'destroy'])->middleware('auth');

Dari perubahan kode di atas. Kita menambahkan 3 route baru. yaitu /login dengan methot GET, yang mana kita gunakan untuk menampilkan halaman view/form login.

Dan /login dengan method POST untuk melakukan proses login. Kemudian /logout dengan method POST untuk proses logout.

Langkah 3 - Membuat Halaman View Login

Kita lanjutkan membuat halaman untuk menampilkan form login di Inertia.js. Silahkan buat file baru dengan nama Login.vue di dalam folder resources/js/Pages/Auth. Kemudian masukkan kode berikut ini di dalamnya.

<script setup>

//import layout App
import Layout from '../../Layouts/App.vue';

// get props "errors" dari controller
defineProps({
    errors: Object
});

//import reactivity API dari vue
import { reactive } from 'vue';

//import inertia router
import { router } from '@inertiajs/vue3';

//define state
const form = reactive({
    email: '',
    password: '',
});

//method storeLogin
const storeLogin = () => {

    //send data ke server
    router.post('/login', form);

};
</script>

<template>
    <Layout>
        <div class="row justify-content-center">
            <div class="col-md-4">
                <div class="card border-0 rounded-3 shadow-sm">
                    <div class="card-body">
                        <h5>LOGIN</h5>
                        <hr>
                        <form @submit.prevent="storeLogin">

                            <div class="mb-3">
                                <label class="form-label">Email Address</label>
                                <input type="email" class="form-control" v-model="form.email"
                                    placeholder="Email Address">
                            </div>
                            <div v-if="errors.email" class="alert alert-danger">
                                {{ errors.email }}
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Password</label>
                                <input type="password" class="form-control" v-model="form.password"
                                    placeholder="Password">
                            </div>
                            <div v-if="errors.password" class="alert alert-danger">
                                {{ errors.password }}
                            </div>

                            <button type="submit" class="btn btn-primary w-100">LOGIN</button>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </Layout>
</template>

Dari penambahan kode di atas. pertama kita import Layout App yang sudah pernah kita buat sebelumnya.

//import layout App
import Layout from '../../Layouts/App.vue';

Selanjutnya, untuk handle error validasi dari controller, kita melakukan definisi sebuah props dengan nama errors dan mempunyai jenis Object.

// get props "errors" dari controller
defineProps({
    errors: Object
})

Kemudian, kita import hook reactive dari Vue.

//import reactivity API dari vue
import { reactive } from 'vue';

Dan kita import juga router dari Inertia.js.

//import inertia router
import { router } from '@inertiajs/vue3';

Di dalam composition API. Pertama kita buat state dulu dengan nama form, yang mana isinya adalah object dengan key email dan password. State tersebut yang kita gunakan untuk mendapatkan data yang diinputkan di dalam form.

//define state
const form = reactive({
    email: '',
    password: '',
});

kemudian kita buat method baru dengan nama storeLogin. Method tersebut akan dijalankan, ketika kita melakukan submit di dalam form.

<form @submit.prevent="storeLogin">

	//...
	
</form

//method storeLogin
const storeLogin = () => {

	//...
	
}

Di dalam method storeLogin, kita melakukan HTTP request ke dalam server dengan method POST ke endpoint /login. Dan kita mengirimkan 2 data yaitu email dan password yang kita dapatkan dari input form.

//send data ke server
router.post('/login', form);

Langkah 4 - Uji Coba Proses Login

Sekarang, kita akan lakukan uji coba proses login. Silahkan buka halaman loginnya di http://localhost:8000/login, jika berhasil maka akan menampilkan halaman seperti berikut ini :

Sekarang, silahkan klik LOGIN tanpa mengisi data apapun, maka kita akan mendpatkan response error yang dikirimkan dari controller melalui props.

Sekarang, silahkan masukkan email dan password yang belum ada di dalam table users, maka kita juga akan mendapatkan response login failed yang dikirimkan oleh controller.

Dan terakhir. Silahkan masukkan email dan password yang ada di dalam table users. Jika berhasil maka akan menampilkan halaman seperti berikut ini :

Di atas, sebenarnya kita sudah berhasil melakukan proses login, error 404 muncul karena kita belum membuat halaman dashboard atau /dashboard.

Jika kita reload halaman login, maka kita sudah berhasil menampilkan menu DASHBOARD dan LOGOUT. Itu yang berarti kita sudah berhasil melakukan proses login.

Sampai disini pembahasan bagaimana cara membuat proses login atau authentication menggunakan Inertia.js. Di artikel selanjutnya kita akan belajar bagaimana cara menampilkan halaman dashboard dan menampilkan user yang sedang login.

Terima Kasih

• Membangun Aplikasi Kasir (Point of Sales) dengan Laravel, Inertia.js dan Vue.js
• Membangun Aplikasi Ujian Online (CBT) Dengan Laravel, Inertia.js & Vue.js
• Membangun Website Toko Online Dengan Laravel, Inertia.js & React.js