How can I implement Laravel's Email Verification on a Vue SPA with Vue Router?
So far I have tried to handle email verification by altering the VerificationController verify and resend methods. I then created a new notification and added API routes for the Verification.
When the verification link is generated and sent to user's email, the verification url is something like:
When the link is clicked, it opens up a page but it does nothing on the backend as the @verify api route is not hit.
Any suggestions?
VerificationController.php
<?php
namespace App\Http\Controllers\Auth;
use App\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\VerifiesEmails;
use Illuminate\Validation\ValidationException;
class VerificationController extends Controller
{
/*
|--------------------------------------------------------------------------
| Email Verification Controller
|--------------------------------------------------------------------------
|
| This controller is responsible for handling email verification for any
| user that recently registered with the application. Emails may also
| be re-sent if the user didn't receive the original email message.
|
*/
use VerifiesEmails;
/**
* Where to redirect users after verification.
*
* @var string
*/
protected $redirectTo = '/home';
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('auth:api');
$this->middleware('signed')->only('verify');
$this->middleware('throttle:600,1')->only('verify', 'resend');
}
/**
* Show the email verification notice.
*
*/
public function show()
{
//
}
/**
* Mark the authenticated user's email address as verified.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function verify(Request $request)
{
$userID = $request[‘id’];
$user = User::findOrFail($userID);
$user->email_verified_at = date("Y-m-d g:i:s");
$user->save();
return response()->json('Email verified!');
}
/**
* Resend the email verification notification.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function resend(Request $request)
{
if ($request->user()->hasVerifiedEmail()) {
return response()->json('The email is already verified.', 422);
}
$request->user()->sendEmailVerificationNotification();
return response()->json('We have e-mailed your verification link!');
}
}
VerifyEmail.php
<?php
namespace App\Notifications;
use Illuminate\Notifications\Notification;
use Illuminate\Support\Facades\URL;
use Carbon\Carbon;
use Illuminate\Auth\Notifications\VerifyEmail as VerifyEmailBase;
class VerifyEmail extends VerifyEmailBase
{
/**
* Get the verification URL for the given notifiable.
*
* @param mixed $notifiable
* @return string
*/
protected function verificationUrl($notifiable)
{
return URL::temporarySignedRoute(
‘verification.verify’, Carbon::now()->addMinutes(60), [‘id’ => $notifiable->getKey()]
);
}
}
Api.php
Route::get('email/verify/{id}', 'Auth\VerificationController@verify')->name('verification.verify');
Route::get('email/resend', 'Auth\VerificationController@resend')->name('verification.resend');
