How to Create Login Page Using Vuetify & Inertia JS

The login page is very important in making a website application. This page is the facade of the application before users can view other features that are limited by the authentication system.

This article will discuss how to create a login page in Laravel using Inertia and Vuetify. Let’s immediately discuss how to create it.

Login Page Specifications

The login page that we will create has the following specifications:

• Has a width of 300 pixels with a position in the middle of the screen (screen) vertically or horizontally.
• It has two fields that are email and password. Each field has an icon to enhance its appearance.
• The password field has buttons to show or hide the password
• Displays an error in each field if the content sent to the server is invalid.
• Has two buttons. To the left is the Reset button and to the right is the Enter button.

Creating Vue Components

We start this discussion by creating a vue component with the name Login.vue in the resources/js/Pages directory. The code created is more or less like below:

<template>
   <v-app>
    <v-card width="300" class="mx-auto my-auto">
        <v-card-text>
            <v-text-field density='compact' label='Email' prepend-icon="mdi-email" v-model="form.email" :error-messages="form.errors.email"/>
            <v-text-field density='compact' label='Password' prepend-icon="mdi-lock" :type="showPass?'text':'password'" 
            :append-inner-icon="showPass?'mdi-eye-off':'mdi-eye'"
            @click:append-inner="showPass=!showPass"
            v-model="form.password"
            :error-messages="form.errors.password"
            />
        </v-card-text>
        <v-card-actions>
            <v-btn>Reset</v-btn>
            <v-spacer></v-spacer>
            <v-btn :disabled="form.processing" :loading="form.processing" @click="form.post('/login')" color="success" variant="flat">Masuk</v-btn>
        </v-card-actions>
    </v-card>
   </v-app>
</template>
<script setup>
import { useForm } from '@inertiajs/vue3';
import { ref } from 'vue';
const showPass= ref(false)
const form = useForm({
    email:'',
    password:''
})
</script>

Create a Controller

Next, we need to create a controller to handle requests sent from the Vue component above. Use the command php artisan make:controller NamaController to create a controller. Examples are as follows:

php artisan make:controller AuthController

The command above will create a controller file named AuthController.php in the directory app/Http/Controllers. Open the file then add the login function below:

public function login(Request $request)
    {
        $request->validate([
            'email' => 'required|email',
            'password' => 'required'
        ]);
        $credentials = $request->only(['email', 'password']);
        if (Auth::attempt($credentials)) {
            return redirect('/');
        }
        throw ValidationException::withMessages([
            'email' => 'credentials is not valid'
        ]);
    }

Pay attention to the $request->validate section which has an array of arguments. The explanation is as follows:

• email is the POST key sent from the vue component. While required|email indicates that the field must be filled in and the contents must be in a valid email format.
• password is the POST key sent from the vue component. While required indicates the field must be filled.

The variable $credentials is filled with data retrieved from the POST request. $request->only is useful for fetching data that is only needed. For example, if not only email and password are sent from the client, then in this way the other fields are automatically ignored.

The Auth::attempt($credentials) part included in the statement is used to perform authentication. If the email and password sent are valid, a login session will be created and redirected to the home page. On the other hand, if it is wrong then we display an error message using ValidationException.

Create a Route to Login

We need to create two routers to handle the login process. The first is a route with the get method to display the login page that we created using the vue component above. The code is as below.

Route::get('login', function () {
    return Inertia::render('Login');
});

Pay attention to the Inertia::render(‘Login’); part. Login is the name of the component we want to use which is located in the resources/js/Pages directory. Just write the file name without the .vue extension.

The second route uses the post method which is used to send data entered by the user when the Enter button is clicked. The code is as below:

Route::post('login', [AuthController::class, 'login']);

Route::post above is filled with two parameters namely url and action in the form of an array.

• login used to fill in url parameters. So that the resulting url becomes http://domain.com/login
• [AuthController::class, 'login'] The second parameter is used to fill in the action in the form of an array that has two elements. The first element of AuthController::class is the name of the controller. The second element, namely login, is the name of the function/method in the controller that will be used to handle when there is a POST request to the url http://domain.com/login.

The complete code in web.php is as below:

<?php

use App\Http\Controllers\AuthController;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('login', function () {
    return Inertia::render('Login');
});

Route::post('login', [AuthController::class, 'login']);

Login Page Creation Video

This video contains an explanation of creating a login form page using Vuetify. The output is only a page that displays the login form and cannot be activated yet.

Login Handle Creation Video

This video contains an explanation for handling the login form so that it can be used. This includes creating POST login routes, validating POST requests, checking credentials, etc.

In this video, it is also explained about adding users for trials through seeders.

The output of this video is the login page created in the previous video which can be used to log in users that have been created via seeders.