Implementing Email Verification in Laravel 11 with Jetstream and Inertia/Vue

This outlines the steps to implement email verification in a Laravel 11 application using Jetstream with Inertia + Vue. This will ensure new users verify their email addresses before accessing routes that you protect with the verified middleware.

Prerequisites

• Laravel 11 application
• Jetstream installed with Inertia.js stack
• Basic understanding of Laravel and Vue.js

Step 1: Configure User Model

Ensure your User model implements the MustVerifyEmail interface. Update your app/Models/User.php:

use Illuminate\Contracts\Auth\MustVerifyEmail;

class User extends Authenticatable implements MustVerifyEmail
{
    // ...
}

Step 2: Update Fortify Configuration

In config/fortify.php, enable email verification:

'features' => [
    Features::registration(),
    Features::resetPasswords(),
    Features::emailVerification(),
    // ... other features
],

Step 3: Configure Routes

Add the following routes to your routes/web.php file:

use Illuminate\Foundation\Auth\EmailVerificationRequest;
use Illuminate\Http\Request;

Route::get('/email/verify', function () {
    return inertia('Auth/VerifyEmail');
})->middleware('auth')->name('verification.notice');

Route::get('/email/verify/{id}/{hash}', function (EmailVerificationRequest $request) {
    $request->fulfill();
    return redirect('/dashboard');
})->middleware(['auth', 'signed'])->name('verification.verify');

Route::post('/email/verification-notification', function (Request $request) {
    $request->user()->sendEmailVerificationNotification();
    return back()->with('message', 'Verification link sent!');
})->middleware(['auth', 'throttle:6,1'])->name('verification.send');

// Protect routes that require verified email
Route::middleware(['auth', 'verified'])->group(function () {
    Route::get('/dashboard', function () {
        return inertia('Dashboard');
    })->name('dashboard');
    // Add other protected routes here
});

Step 4: Create VerifyEmail Vue Component

Create or update resources/js/Pages/Auth/VerifyEmail.vue:

<template>
  <div>
    <h1>Verify Your Email Address</h1>
    <p>Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.</p>
    <form @submit.prevent="submit">
      <button type="submit">Resend Verification Email</button>
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    submit() {
      this.$inertia.post(route('verification.send'));
    }
  }
}
</script>

Step 5: Clear Caches

Run the following commands to ensure all changes are reflected:

php artisan route:clear
php artisan config:clear
composer dump-autoload

Step 6: Configure Email Settings

Ensure your .env file has the correct mail settings. For testing, you can use Mailtrap or a similar service:

MAIL_MAILER=smtp
MAIL_HOST=sandbox.smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=your_mailtrap_username
MAIL_PASSWORD=your_mailtrap_password
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

What I'm building

Delegate tasks. Get software.

Give Vroni a GitHub issue, bug report, spec, or rough idea. It reads the repo, plans the change, writes code, runs checks, and works toward a review-ready pull request.

Take a look at vroni.com