DEV Community

Cover image for Verifying emails in laravel 10 using laravel ui
Chidiebere Chukwudi
Chidiebere Chukwudi

Posted on • Originally published at jovialcore.tech

Verifying emails in laravel 10 using laravel ui

Laravel makes building web applications simple and pretty straight forward especially we give credits to it's out-of-the-box functionalities like Authentication Scalffolding.

In this tutorial, we will be creating our authentication files using laravel ui package.

Install laravel

create-project --prefer-dist laravel/laravel app

From your terminal, CD into app.

Next, go to your .env file and make the following changes.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=mydatabase
DB_USERNAME=root
DB_PASSWORD=

Adjust those variables where necessary so they reflect your database configuration.

Generate Authentication files.

Like I mentioned earlier, we'll be generating authentication files using laravel ui package. Install laravel ui :

composer require laravel/ui

Scaffold Auth files (In my case, I will be using booststrap)

php artisan ui bootstrap --auth

When it's all set, run the commmand php artisan migrate. So we are migrating to our database users table. It is by default in a fresh laravel installation.

Start up your application to see what we have done so far in action:

php artisan serve

Email Configuration

In this example, I will be using gmail SMTP emailing service.
hence you can use your gmail mail account to send mail on behalf of our application. To do this, first, you will need :

  • Your email account username (e.g yourname@gmail.com) and
  • App password -- it is the app password we are going to be using as password. Worthy to note is that, to get an app password, you must enable two factor authentication on your gmail account.Follow these intructions to get your app password. How to generate app password

Following that guide, when you click on "2 factor tab", your app password card (like in the image below) should be at the bottom the page. Remember to fresh page if the "App passwords" section doesn't come up immediately.

generte app password

Subsequently, you will be prompted to select a device:

google app pas

Copy your app password (just like in the screenshot below) and fill them in their respective .env variables :

google app password

MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=465
MAIL_USERNAME=yourusername@gmail.com
MAIL_PASSWORD= yourapppassword
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=codebere@gmail.com
MAIL_FROM_NAME="${APP_NAME}" 

Model Setup.

To proceed, in your Model/User.php lets add the MustVerifyEmail class by implementing Illuminate\Contracts\Auth\MustVerifyEmail;

use Illuminate\Contracts\Auth\MustVerifyEmail;
// other classes
class User extends Authenticatable implements MustVerifyEmail

User model class

Routing

The previous steps we have followed has automatically created the neccessary authentication files we may be needing. All we have to do now is prepare a proper routing and that will suffix.

Verify Email View Routing

Go to your routes/web.php. Lets first add the routes that redirect authenticated but unverified users to a view file. Notice that we attach an Auth middleware and our route name is verification.notice.

Route::get('/email/verify', function () {

    return view('auth.verify');
})->middleware('auth')->name('verification.notice');

You are not to change the route name as our Auth setup uses the the verified middleware included with Laravel to automatically redirect to that route name if a user has not verified their email address.

views\auth\verify.blade.php:

View blade file

Email Verification Handler

Next route we will be defining will be in charge of verifying the email when the user clicks on the link sent to their inbox. Still in your routes/web.php,

// remember to import EmailVerificationRequest class

use Illuminate\Foundation\Auth\EmailVerificationRequest;

Route::get('/email/verify/{id}/{hash}', function (EmailVerificationRequest $r) {
    $r->fulfill();

    return redirect('/home');
})->middleware(['auth', 'signed'])->name('verification.verify');

In the code above, laravel will use EmailVerificationRequest to validate the request id and hash parameters, then call the fufill() method that marks the authenticated user as verified and dispatches a verified event.

Email Example:

email display

What if the user deletes the mail we sent or they can't find it ? We want to give them opportunity to request for another verification mail. Here:

use Illuminate\Http\Request;

Route::post('/email/verification-notification', function (Request $r) {

    $r->user()->sendEmailVerificationNotification();

    return back()->with('resent', 'Verification link sent ');
})->middleware(['auth', 'throttle:6,1'])->name('verification.send');

Using this route via a post request, Laravel sends an email notification once again. You can find the responsible blade file in views\auth\verify.blade.php

Image description

That should be all. If you find any challenge following this guide please do let me know in the comment section

My Twitter
Linkedin

Top comments (0)