Verifying emails in laravel 10 using laravel ui
Tags: laravel, php
Published: 2023-06-05 12:26:25

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this tutorial, we will be creating our authentication files using <code>laravel ui</code> package.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Install laravel</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>create-project --prefer-dist laravel/laravel app</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>From your terminal, CD into <code>app</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, go to your <code>.env</code> file and make the following changes.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=mydatabase
DB_USERNAME=root
DB_PASSWORD=</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Adjust those variables where necessary so they reflect your database configuration.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Generate Authentication files.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Like I mentioned earlier, we'll be generating authentication files using laravel ui package. Install laravel ui :</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>composer require laravel/ui</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Scaffold Auth files (In my case, I will be using booststrap)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>php artisan ui bootstrap --auth</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When it's all set, run the commmand <code>php artisan migrate</code>. So we are migrating to our database users table. It is by default in a fresh laravel installation.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Start up your application to see what we have done so far in action:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>php artisan serve</code></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Email Configuration</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this example, I will be using gmail SMTP emailing service.<br />hence you can use your gmail mail account to send mail on behalf of our application. To do this, first, you will need :</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Your email account username (e.g yourname@gmail.com) and</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>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.<br />Follow these intructions to get your app password. <a href="https://support.google.com/mail/answer/185833?hl=en">How to generate app password</a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6hunmu42178utkroyi5.png" alt="generte app password" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Subsequently, you will be prompted to select a device:</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64dgrkvuti66i4kptjp0.png" alt="google app pas" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Copy your app password (just like in the screenshot below) and fill them in their respective .env variables :</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy7ij8lplpudmvoegpwk.jpeg" alt="google app password" /></figure>
<!-- /wp:image -->

<!-- wp:code -->
<pre class="wp-block-code"><code>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}" </code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Model Setup.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To proceed, in your <code>Model/User.php</code> lets add the <code>MustVerifyEmail</code> class by implementing <code>Illuminate\Contracts\Auth\MustVerifyEmail;</code></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>use Illuminate\Contracts\Auth\MustVerifyEmail;
// other classes
class User extends Authenticatable implements MustVerifyEmail</code></pre>
<!-- /wp:code -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2l4tx4mivf8sfwdkjwz.png" alt="User model class" /></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Routing</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Verify Email View Routing</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Go to your <code>routes/web.php</code>. 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 <code>verification.notice</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>Route::get('/email/verify', function () {

    return view('auth.verify');
})-&gt;middleware('auth')-&gt;name('verification.notice');</code></pre>
<!-- /wp:code -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph --></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p><code>views\auth\verify.blade.php</code>:</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4crkzn765cmcd0jhvi45.png" alt="View blade file" /></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Email Verification Handler</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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 <code>routes/web.php</code>,</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>// remember to import EmailVerificationRequest class

use Illuminate\Foundation\Auth\EmailVerificationRequest;

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

    return redirect('/home');
})-&gt;middleware(['auth', 'signed'])-&gt;name('verification.verify');</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In the code above, laravel will use EmailVerificationRequest to validate the request <code>id</code> and <code>hash</code> parameters, then call the <code>fufill()</code> method that marks the authenticated user as verified and dispatches a verified event.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Email Example:</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ragslj2j6cvyl4uqxa68.png" alt="email display" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>use Illuminate\Http\Request;

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

    $r-&gt;user()-&gt;sendEmailVerificationNotification();

    return back()-&gt;with('resent', 'Verification link sent ');
})-&gt;middleware(['auth', 'throttle:6,1'])-&gt;name('verification.send');</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Using this route via a post request, Laravel sends an email notification once again. You can find the responsible blade file in <code>views\auth\verify.blade.php</code></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a59trczm02cj8514zdmv.png" alt="Image description" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>That should be all. If you find any challenge following this guide please do let me know in the comment section</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://twitter.com/jovial_core">My Twitter</a><br /><a href="https://www.linkedin.com/in/chidiebere-chukwudi-49a982182/">Linkedin</a></p>
<!-- /wp:paragraph -->