Laravel 10 Inertia & Vue 3 Authentication with Email Verification Part 2
1 year ago
admin
Laravel
In the second part of this tutorial, we will add the login component we will add email verification for new users, and also we will check if the user email is verified before accessing the home page.
Add Login Component
Next, inside js/Pages/User let's add a new component "Login.vue".
<template>
<div class="container">
<div className="row my-5">
<div className="col-md-6 mx-auto">
<div v-if="failed" class="text-white bg-danger p-2 rounded my-2">{{ failed }}</div>
<div className="card">
<div className="card-header bg-white">
<h5 className="text-center mt-2">
Login
</h5>
</div>
<div className="card-body">
<form @submit.prevent="auth" className="mt-5">
<div className="mb-3">
<label htmlFor="email" className="form-label">Email*</label>
<input
type="text"
v-model="form.email"
className="form-control"
placeholder="Email*">
<div v-if="form.errors.email" class="text-white bg-danger p-2 rounded my-2">{{ form.errors.email }}</div>
</div>
<div className="mb-3">
<label htmlFor="password" className="form-label">Password*</label>
<input
type="password"
v-model="form.password"
className="form-control"
placeholder="Password*">
<div v-if="form.errors.password" class="text-white bg-danger p-2 rounded my-2">{{ form.errors.password }}</div>
</div>
<div className="mb-3">
<button
type="submit"
className="btn btn-primary">
Login
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useForm } from "@inertiajs/vue3";
const form = useForm({
email: '',
password: '',
});
const props = defineProps({
failed: {
type: String,
required: false
}
});
const auth = () => {
form.post(route('login'));
}
</script>
<style>
</style>
Add VerifyEmail Component
Next, inside js/Pages/User let's add a new component "VerifyEmail.vue".
<template>
<div class="container">
<div class="row my-3">
<div class="col-md-6 mx-auto">
<div v-if="$page.props.flash.message" :class="$page.props.flash.class">
{{ $page.props.flash.message }}
</div>
<div class="alert alert-primary">
Please verify your email to proceed check your email box for verification link.
</div>
<Link :href="route('verification.send')" method="post" as="button" class="btn btn-danger">resend verification link</Link>
</div>
</div>
</div>
</template>
<script setup>
import { Link } from '@inertiajs/vue3';
</script>
<style>
</style>
Get the currently logged in user & display flash messages
Next, to get the currently logged-in user and display flash messages update the file Middlware/HandleInertiaRequests.php.
<?php
namespace App\Http\Middleware;
use Illuminate\Http\Request;
use Inertia\Middleware;
class HandleInertiaRequests extends Middleware
{
/**
* The root template that's loaded on the first page visit.
*
* @see https://inertiajs.com/server-side-setup#root-template
* @var string
*/
protected $rootView = 'app';
/**
* Determines the current asset version.
*
* @see https://inertiajs.com/asset-versioning
* @param \Illuminate\Http\Request $request
* @return string|null
*/
public function version(Request $request): ?string
{
return parent::version($request);
}
/**
* Defines the props that are shared by default.
*
* @see https://inertiajs.com/shared-data
* @param \Illuminate\Http\Request $request
* @return array
*/
public function share(Request $request): array
{
return array_merge(parent::share($request), [
//
'flash' => [
'message' => fn () => $request->session()->get('message'),
'class' => fn () => $request->session()->get('class')
],
'user' => fn () => $request->user()
? [
'data' => $request->user()->only('id', 'name', 'email'),
]
: null,
]);
}
}
Display logged in user
Next, inside the MainLayout component, we display the menu.
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<Link class="navbar-brand" href="/">Laravel Vue CRUD App</Link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<Link class="nav-link" aria-current="page"
href="/"><i class="fas fa-home"></i> Home</Link>
</li>
</ul>
<ul v-if="!user" class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<Link class="nav-link" aria-current="page"
:href="route('login')"><i class="fas fa-sign-in"></i> Login</Link>
</li>
<li class="nav-item">
<Link class="nav-link" :href="route('register')"><i class="fas fa-user-plus"></i> Register</Link>
</li>
</ul>
<ul v-else class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<Link class="nav-link" aria-current="page"
href="#"><i class="fas fa-user"></i> {{ user.data.name }}</Link>
</li>
<li class="nav-item">
<Link class="nav-link border-0 bg-white" method="post" as="button" :href="route('logout')"><i class="fas fa-sign-out"></i> Logout</Link>
</li>
</ul>
</div>
</div>
</nav>
<slot></slot>
</template>
<script setup>
import { Link, usePage } from '@inertiajs/vue3';
import { computed } from 'vue';
const user = computed(() => usePage().props.user);
</script>
<style>
</style>
Add the home page
<template>
<div class="container">
<div className="row my-5">
<div className="col-md-6 mx-auto">
<div className="card">
<div className="card-header bg-white">
<h5 className="text-center mt-2">
Welcome
</h5>
</div>
<div className="card-body">
Your email is verified!
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
</script>
<style>
</style>