Customize Laravel 8 Email Verification URL With Your SPA URL
Find out how to customize your URL here. It can effect your user experience too!
Have you ever felt like it’s so unprofessional to have api.your-domain.com/verify-email?token=token as your email verification URL, and wanted to change it to use your SPA URL instead? Well, me too.
After tons of research at Stackoverflow, I finally got one that’s working for me. In this article, we’ll be looking on how to customize our email verification URL and turns api.your-domain.com/verify-email?token=token to your-domain.com/verify-email?url=verificationurl instead.
Prerequisites
Before we get started, I assume you have already installed:
- Laravel 8
- Laravel Fortify (optional, to handle the verification token. I won’t discuss about how to verify it manually, you can refer to this Laravel docs instead)
- Any frontend framework (vanilla JS also work 😁)
Backend Side
User Model
Since version 5.7, Laravel already provides us with MustVerifyEmail trait. Usually we’ll use this trait in User model. This is useful if we need to secure some of our page for verified user only.
When using this trait, we’ll have some new methods under the model we’ve added the MustVerifyEmail trait. It is:
- hasVerifiedEmail()
- markEmailAsVerified()
- sendEmailVerificationNotification()
To override the default link (and probably view), we’ll create a new sendEmailVerificationNotification() method to override existing one.
Inside that function, we’ll call notify() with our custom notification as our parameters. Don’t forget to create it first and we’ll walkthrough what’s inside of our EmailVerificationNotification() class.
Notification Class
Our notification class will be the work horse here since it’ll take care of the route generation and sending the email. This class will need to extends the default VerifyEmail class that’s available out of the box from Laravel.
You probably already familiar with a notification class, and since it’s basically empty (except for toMail() method), I won’t get too in depth either 😛.
Alright, let’s focus on toMail() method. At the beginning, we can generate our verification URL using verificationUrl() method. This method is available at VerifyEmail class that we extend earlier on.
Next, we only need to append the verification URL with our SPA URL. That’s it for the backend side. The new URL will looks like this (generated on my localhost):
The urlencode() is a must. Otherwise it won’t work in the frontend (I’ve tried it earlier).
Ps. You can go extra mile by splitting the $verificationUrl link to only get hash, id, expires, and signature. I won’t do that here since it’s already enough for me to only use the full URL.
Frontend Side
We’re almost finished with our work. This frontend side is probably the easiest to implement for me. The logic is:
- We get the url param from link that user entered.
- We send GET request to that URL.
- Done!
Easy right?
Alright, let’s do it. Here I’ll use NextJS with Axios. You can use whatever framework/library you want, even vanilla JS should work fine too.
It’s pretty straightforward here. We need to check if the request has url param, if yes then I call verify() with the url as its param.
Then inside the verify() method, we call that URL using Axios. Laravel (with Fortify) will return a 202 Accepted response which means our request is valid.
End
That’s it. You’ve implemented custom verification email URL successfully. It’s pretty straightforward in my opinion, we only need to customize a bit of code. Well, I hope this tutorial help you to solve the problem 😁.
I also hope Laravel will add similar tutorial to their docs on how to customize the email verification link.
Alright, that’s the end. Stay healthy 😎
