User Authentication and Email Verification — Laravel

Photo by Pixabay from Pexels

Usually, when a user signs up to our apps, we need to verify their email so that we know that it is their real email, not a junk one. Fortunately, we can do this easily with Laravel, and of course, we can make some adjustments as we want. So in this article, I’ll show you how to create an email verification system with laravel/ui package then we can test it by sending a real email verification with Mailtrap. In the next article here, I’ll show you how we can create a custom Email with HTTP, Markdown, and Notification Mail.

Content Overview

• Mailtrap setup
• Project Setup
• Package Installation

Mailtrap Setup

In this article, for testing our email verification system, we’ll send a real email to the fake SMTP Server, and the good news is, it’s an effortless task using Mailtrap. First, register in the https://mailtrap.io to create a new account (It has a free version so don’t worry), and after the registration success, you can see the SMTP Setting for integrating your Mailtrap into our Laravel project.

Mailtrap is a fake SMTP server for development teams to test, view and share emails sent from the development and staging environments without spamming real customers — Mailtrap.io

Image 1. Mailtrap Settings

Don’t close the Mailtrap setting; we’ll use those settings in our next step. Then, let’s create a new project with Composer.

Project Setup

Next, let’s create a new project with composer.

composer create-project --prefer-dist laravel/laravel laravel-mail

Then, open the .env file in your project, and make sure the MAIL_USERNAME and MAIL_PASSWORD are the same with your Mailtrap setting.

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=383cf1xx
MAIL_PASSWORD=cfbf02xx
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=from@example.com
MAIL_FROM_NAME="${APP_NAME}"

Ok one more thing, don’t forget to configure your database name in .env file then make a migration.

php artisan migrate

Package Installation

For this project, we’ll use the Laravel package to automatically create register/login pages and some authentication controllers for us. So, let’s install the packages first.

composer require laravel/ui

Once the package is installed, then we need to install the front-end scaffolding using these commands:

php artisan ui vue --auth
npm install && npm run dev

Alright! So let’s start your local server and take a look at what we’ve been doing so far.

Image 2. Homepage

Image 3. Register Page

As you can see, our packages and front-end scaffolding automatically create the login & register pages for us, and it configures the basic user authentication setup too. That’s a very-very useful technique.

Until now, newly registered users won’t receive any email verification. So, let’s fix this. First, open the User model

app/User.php

Note that, we need to implement MustVerifyEmail in the user model.

Then, configure the route.

routes/web.php

Last, set up the HomeController

app/Http/Controllers/HomeController.php

Then it’s done. Let’s test it!

First, make sure the server is running and register a new user!

Image 4. Registration Form

After the registration success, you won’t see the home page because your email is not verified yet.

Image 5. Email not Verified

Fair enough, let’s open your Mailtrap inbox and you’ll see a new incoming email to let you verify your account.

Image 6. Verification Email

Just click the Verify Email Address button, and you will be redirected automatically to the ‘/home’ route. This home route is protected by middlewares to make sure that only a user with verified email can access this route.

One more thing, if you want to customize the verification email content, you must override the sendEmailVerificationNotification function in app\User.php.

public function sendEmailVerificationNotification()
{
    $this->notify(new CustomVerifyEmail());
}

In the next article, I’ll show you how to create a custom Email with HTTP, Markdown, and Notification so that you have the full power to make creative content in your email. So, see you there :)

Github:
https://github.com/Cerwyn/Email-Verification-Laravel-UI

Reference:
https://blog.mailtrap.io/laravel-email-verification/