TheLazy.Dev
Portfolio GitHub

Blog

queue |email |tailwindcss |laravel

Building a TailwindCSS-Powered Laravel Application with Email Verification and Queued Jobs

haseebmirza

Haseeb Mirza

Posted on May 30, 2024

Building a TailwindCSS-Powered Laravel Application with Email Verification and Queued Jobs

Building a TailwindCSS-Powered Laravel Application with Email Verification and Queued Jobs

A Comprehensive Guide to Creating a Seamless User Registration System with Email Verification in Laravel

Introduction

In this article, we will explore how to build a Laravel application using TailwindCSS for styling. We'll focus on creating a custom user registration system that sends email verification links using Laravel's queue system. This guide will walk you through the entire process, from setting up your development environment to handling user email verification and queue jobs, ensuring a smooth and professional user experience.

Prerequisites

Before we begin, make sure you have the following installed:

  • PHP
  • Composer
  • Laravel
  • XAMPP or any local server environment
  • Node.js and npm

Step 1: Setting Up the Laravel Project

  1. Create a new Laravel project: ```

laravel new laravel-email-sending-with-queues
cd laravel-email-sending-with-queues

The full source code for this project is available on GitHub at the following link: [new laravel-email-sending-with-queues](https://github.com/haseebmirza/laravel-email-sending-with-queues)

2. **Configure environment settings in `.env`:**
Enter fullscreen mode Exit fullscreen mode

QUEUE_CONNECTION=database

### Step 2: Implementing User Registration
1. **Create the Registration Controller:**
Enter fullscreen mode Exit fullscreen mode

php artisan make:controller AuthController

2. **Add Registration Logic in `AuthController`:**
Enter fullscreen mode Exit fullscreen mode

public function register(Request $request)
{
$request->validate([
'name' => 'required|string|max:255',
'email' => 'required|string|email|max:255|unique:users',
'password' => 'required|string|min:8|confirmed',
]);

$user = User::create([
    'name' => $request->name,
    'email' => $request->email,
    'password' => Hash::make($request->password),
    'email_verified_at' => null,
    'verification_token' => Str::random(60),
    'token_expires_at' => Carbon::now()->addMinutes(5),
]);

// Dispatch verification email job
SendVerificationEmail::dispatch($user);

return redirect('/')->with('success', 'Registration successful! Please check your email to verify your account.');
Enter fullscreen mode Exit fullscreen mode

}


### Step 3: Sending Verification Email Using Queue

1. **Create Email Job:**
Enter fullscreen mode Exit fullscreen mode

php artisan make:job SendVerificationEmail

2. **Modify Job to Send Email:**
Enter fullscreen mode Exit fullscreen mode

public function handle()
{
Mail::to($this->user->email)->send(new VerifyEmail($this->user));
}

3. **Ensure Queue Worker is Running:**
Enter fullscreen mode Exit fullscreen mode

php artisan queue:work



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi5ng1r9ybl8im8eh1tc.png)
### Step 4: Creating and Sending Verification Email
1. **Create `VerifyEmail` Mailable:**
Enter fullscreen mode Exit fullscreen mode

php artisan make:mail VerifyEmail --markdown=emails.verify

2. **Modify `VerifyEmail` Mailable:**
Enter fullscreen mode Exit fullscreen mode

public function build()
{
return $this->markdown('emails.verify')->with([
'token' => $this->user->verification_token,
]);
}

### Step 5: Verification Email Template
1. **Create Email Template `emails/verify.blade.php`:**
Enter fullscreen mode Exit fullscreen mode

@component('mail::message')

Verify Your Email

Please click the button below to verify your email address.

@component('mail::button', ['url' => url('/verify-email/' . $token)])
Verify Email
@endcomponent

This verification link will expire in 5 minutes.

Thanks,

{{ config('app.name') }}
@endcomponent


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jgukiua2u5zydm2cas5.png)

Email in inbox
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8v70zzfxm1329yl8oqe.png)
### Conclusion
By following this guide, you have successfully created a Laravel application with a custom user registration system. The use of TailwindCSS provides a modern and responsive design, while the queue system ensures efficient email verification. This setup not only enhances the user experience but also improves the application's performance.

Feel free to customize the project further and share your experience in the comments below!

The full source code for this project is available on GitHub at the following link: https://github.com/haseebmirza/laravel-email-sending-with-queues

Happy coding!
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
haseebmirza
Haseeb Mirza

Posted on May 30, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Building a TailwindCSS-Powered Laravel Application with Email Verification and Queued Jobs
queue Building a TailwindCSS-Powered Laravel Application with Email Verification and Queued Jobs

May 30, 2024