Laravel 7: Verify email using API endpoint + single page application - php

Question

I have a NuxtJS/Vue SPA and I want to verify the user email with the Laravel API that's my server side.
I create a custom notification called VerifyEmail.php:
<?php
namespace App\Notifications;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Support\Carbon;
use Illuminate\Support\Facades\Lang;
use Illuminate\Notifications\Notification;
class VerifyEmail extends Notification {
public function via($notifiable) {
return ['mail'];
}
public function toMail($notifiable) {
$params = [
'id' => $notifiable->getKey(),
'hash' => sha1($notifiable->getEmailForVerification()),
'expiry' => Carbon::now()->addMinutes(60)->timestamp
];
$url = config('app.web_client_url') . '/verify-email?';
foreach ($params as $key => $param) {
$url .= "{$key}={$param}&";
}
$key = config('app.key');
$signature = hash_hmac('sha256', $url, $key);
$url .= "signature=$signature";
return (new MailMessage)
->subject(Lang::get('Verify Email Address'))
->line(Lang::get('Please click the button below to verify your email address.'))
->action(Lang::get('Verify Email Address'), $url)
->line(Lang::get('If you did not create an account, no further action is required.'));
}
}
In my registration controller when a user registers I use:
...
$user->save();
$user->notify(new VerifyEmail());
return response()->json([
'message' => $user
], 201);
and the email gets sent. The URL in the email is something like: https://localhost:7000/verify-email?id=37&hash=4c1691e6db623b85d90cee62f80d6f9085648c92&expiry=1595596017&signature=d6c6374b203b1da66d11818728921a4160e30ebf43c5a8be544220c8eca97bb3 (localhost:7000 is the address of my NuxtJS application).
Upon going to that page, I make the following request in the mounted lifecycle method:
this.signature = this.$route.query.signature
this.expiry = this.$route.query.expiry
this.hash = this.$route.query.hash
this.id = this.$route.query.id
this.$axios.$get(`api/email/verify/${this.id}?hash=${this.hash}&expiry=${this.expiry}&signature=${this.signature}`)
.then(response => {
this.successMessage = response
}).catch(error => {
this.errorMessage = error
})
This request hits the endpoint on my server and the following method runs:
public function verify($user_id, Request $request) {
if (!$request->hasValidSignature()) { // Check always fails and we get a 401
return response()->json(["msg" => "Invalid URL provided."], 401);
}
$user = User::findOrFail($user_id);
if (!$user->hasVerifiedEmail()) {
$user->markEmailAsVerified();
}
return response()->json(["msg" => "Email verified."], 200);
}
The route for laravel endpoint:
Route::get('email/verify/{id}', 'Api\EmailVerificationController#verify')->name('verification.verify');
I can see that the parameters are received in the verify method request object parameter (e.g. setting a breakpoint and checking):
The check for a valid signature always fails and results in a 401 being sent back to the client. What's wrong with the URL/signature that I'm generating?

Answer 1

Here what I did to solve the problem. Go to AuthServiceProvider
/**
* Register any authentication / authorization services.
*
* #return void
*/
public function boot()
{
$this->registerPolicies();
//
VerifyEmail::createUrlUsing(function ($notifiable) {
$params = [
"expires" => Carbon::now()
->addMinutes(60)
->getTimestamp(),
"id" => $notifiable->getKey(),
"hash" => sha1($notifiable->getEmailForVerification()),
];
ksort($params);
// then create API url for verification. my API have `/api` prefix,
// so i don't want to show that url to users
$url = \URL::route("verification.verify", $params, true);
// get APP_KEY from config and create signature
$key = config("app.key");
$signature = hash_hmac("sha256", $url, $key);
// generate url for yous SPA page to send it to user
return env("APP_FRONT") .
"/auth/verify-email/" .
$params["id"] .
"/" .
$params["hash"] .
"?expires=" .
$params["expires"] .
"&signature=" .
$signature;
});
}
}
add this to api.php
Route::get("/verify-email/{id}/{hash}", [
VerifyEmailController::class,
"__invoke",
])
->middleware(["auth:sanctum","signed", "throttle:6,1"])
->name("verification.verify");
add this to VerifyEmailController.php
/**
* Mark the authenticated user's email address as verified.
*
* #param \Illuminate\Foundation\Auth\EmailVerificationRequest $request
* #return \Illuminate\Http\RedirectResponse
*/
public function __invoke(EmailVerificationRequest $request)
{
if ($request->user()->hasVerifiedEmail()) {
return response()->json(
[
"message" => "Your'r email already verified.",
],
Response::HTTP_BAD_REQUEST
);
}
if ($request->user()->markEmailAsVerified()) {
event(new Verified($request->user()));
}
return response()->json(
[
"message" => "Verification complete thank you.",
],
Response::HTTP_OK
);
}
}
Front end
async verfyEmail() {
try {
const params = new URLSearchParams(this.$route.query)
let res = await this.$axios.get(
'verify-email/' +
this.$route.params.id +
'/' +
this.$route.params.hash,
{ params }
)
this.$router.push({ name: 'platform-dashboard' })
} catch (error) {
console.log(error.response)
this.$router.push({ name: 'platform-dashboard' })
}
}