How to handle email verification in Laravel with Vue.js



Image not found!!

Handling email verification in Laravel with Vue.js involves a combination of server-side and client-side logic. Laravel provides built-in features for email verification, and Vue.js can be used to enhance the user experience on the client side. Below is a step-by-step guide on how you can achieve this:

1. Set up Laravel Email Verification

Laravel has built-in support for email verification. Ensure that your Laravel application has email verification enabled. You can do this by adding the MustVerifyEmail interface to your User model and adding the Verified middleware to the web middleware group in the App\Http\Kernel class.

php
// App\Models\User.php

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

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

// App\Http\Kernel.php

protected $middlewareGroups = [
    'web' => [
        // ...
        \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    ],
];

2. Configure Email

Configure the email settings in your .env file, such as MAIL_DRIVER, MAIL_HOST, and other related settings. Laravel will use these settings to send verification emails.

3. Create Vue Component

Create a Vue component to handle the frontend logic. You can use Laravel Mix to compile your Vue components.

bash
# Install Laravel Mix if not installed
npm install

# Create a new Vue component
mkdir resources/js/components/Auth
touch resources/js/components/Auth/EmailVerification.vue

In EmailVerification.vue, you can use the following basic structure:

html
<template>
  <div>
    <h1>Email Verification</h1>
    <p v-if="message">{{ message }}</p>
    <button @click="resendVerification">Resend Verification Email</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: null,
    };
  },
  methods: {
    resendVerification() {
      // Make an API request to Laravel backend to resend verification email
    },
  },
};
</script>

4. Create API Route

Create a route in Laravel that will handle the email verification logic. This route should be protected by the auth middleware.

php
// routes/web.php

use Illuminate\Http\Request;

Route::middleware(['auth'])->group(function () {
    Route::post('/email/resend', function (Request $request) {
        $request->user()->sendEmailVerificationNotification();

        return response()->json(['message' => 'Verification email sent']);
    });
});

5. Connect Vue Component to Laravel API

In your Vue component, use Axios or another HTTP client to make a request to the Laravel API route you just created.

javascript
// resources/js/components/Auth/EmailVerification.vue

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: null,
    };
  },
  methods: {
    async resendVerification() {
      try {
        const response = await axios.post('/email/resend');
        this.message = response.data.message;
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

6. Include Vue Component in Blade View

Include the Vue component in your Blade view.

php
// resources/views/auth/verify.blade.php

@extends('layouts.app')

@section('content')
    <email-verification></email-verification>
@endsection

7. Compile Assets

Compile your assets using Laravel Mix.

bash
npm run dev

8. Update Routes

Update your web.php routes file to include the view for email verification.

php
// routes/web.php

use Illuminate\Support\Facades\Route;

Route::get('/email/verify', function () {
    return view('auth.verify');
})->middleware(['auth'])->name('verification.notice');

9. Update Blade Views

In your Blade views, make sure to include the necessary links for email verification.

php
// resources/views/layouts/app.blade.php

@auth
    @if (Auth::user()->email_verified_at)
        <!-- User is verified -->
    @else
        <!-- User is not verified -->
        <p class="text-warning">You need to verify your email address. <a href="{{ route('verification.notice') }}">Resend verification email</a></p>
    @endif
@endauth

10. Test

Test the email verification process by registering a new user and checking your email for the verification link.

This is a basic setup, and you may need to customize it based on your application's specific requirements. Additionally, consider adding proper error handling, loading indicators, and improving the user interface for a better user experience.

Category List