Courses

Vue Inertia + Laravel 11: From Scratch

Working Login Form

Summary of this lesson:
- Creating a Vue login form component with email, password, and remember me inputs
- Implementing form handling with Inertia's useForm
- Setting up Laravel login route and LoginController
- Protecting routes with auth middleware

Now that we have learned how to work with forms, let's implement the same knowledge into the login form.

Front-end

So, let's add the HTML part of the form.

resources/js/Pages/Auth/Login.vue:

<script setup>
import GuestLayout from '../../Layouts/Guest.vue';
import { Head } from '@inertiajs/vue3';
</script>
 
<template>
    <Head title="Log in" />
    <GuestLayout>
        <p>Login form coming soon.</p> 
        <form @submit.prevent="loginForm.post(route('login.post'))"> 
            <div>
                <!-- Email -->
                <div>
                    <label for="email" class="block font-medium text-sm text-gray-700">
                        Email
                    </label>
                    <input v-model="loginForm.email" id="email" type="email" class="block mt-1 w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required autofocus autocomplete="username">
                    <p class="mt-2 text-sm text-red-600" v-show="loginForm.errors.email">
                        {{ loginForm.errors.email }}
                    </p>
                </div>
 
                <!-- Password -->
                <div class="mt-4">
                    <label for="password" class="block font-medium text-sm text-gray-700">
                        Password
                    </label>
                    <input v-model="loginForm.password" id="password" type="password" class="block mt-1 w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required autocomplete="current-password">
                </div>
 
                <!-- Remember me -->
                <div class="block mt-4">
                    <label class="flex items-center">
                        <input type="checkbox" name="remember" v-model="loginForm.remember" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
                        <span class="ml-2 text-sm text-gray-600">Remember me</span>
                    </label>
                </div>
 
                <!-- Buttons -->
                <div class="flex items-center justify-end mt-4">
                    <button class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150 ml-4">
                        Log in
                    </button>
                </div>
            </div>
        </form> 
    </GuestLayout>
</template>

The form itself is very similar to the post form. But, instead of calling form by form, it is loginForm this time. This is the template part of the Vue component.

Now, in the script part of the Vue component, we must define the loginForm.

<script setup>
import GuestLayout from '../../Layouts/Guest.vue';
import { Head } from '@inertiajs/vue3'; 
import { Head, useForm } from '@inertiajs/vue3'; 
 
const loginForm = useForm({ 
    email: '',
    password: '',
    remember: false
}) 
</script>
 
// ...

Now, we can see the form in the browser.

Back-end

For the back end, first, let's add the login.post route.

routes/web.php:

Route::view('/', 'dashboard')->name('dashboard');
 
Route::resource('posts', PostController::class);
Route::inertia('about', 'About')->name('about');
Route::inertia('login', 'Auth/Login')->name('login');
Route::post('login', [\App\Http\Controllers\Auth\LoginController::class, 'store'])->name('login.post');

Of course, we need LoginController.

php artisan make:controller Auth/LoginController

In the Controller we will use the LoginRequest from Laravel Breeze and will use the same logic in the store() method from Breeze.

app/Http/Controllers/Auth/LoginController.php:

use App\Http\Controllers\Controller;
use App\Http\Requests\Auth\LoginRequest;
 
class LoginController extends Controller
{
    public function store(LoginRequest $request)
    {
        $request->authenticate();
        $request->session()->regenerate();
 
        return redirect()->intended(route('posts.index'));
    }
}

Notice: we assume that the user already exists in the DB, you created a user manually before, with a registration form or manually via DB.

After trying to log in, we were redirected to the posts page. Now, we can protect routes using the auth Middleware.

routes/web.php:

Route::view('/', 'dashboard')->name('dashboard');
 
Route::middleware('auth')->group(function () { 
    Route::resource('posts', PostController::class);
    Route::inertia('about', 'About')->name('about');
}); 
Route::inertia('login', 'Auth/Login')->name('login');
Route::post('login', [\App\Http\Controllers\Auth\LoginController::class, 'store'])->name('login.post');

If you try entering these pages as a guest, you will be redirected to the login page.

As a homework, you can build the register functionality.

It's almost identical, and you can copy the back-end from Laravel Breeze or some other starter kit. This should be your practice, and I will also avoid repeating myself with another lesson about the same things in forms.

Now, let's work on the logout.

Previous: Edit Form with Passing Props

No comments yet…

avatar
You can use Markdown