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

Solution:

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;
    });
  }
}
Copy code

add this to api.php

Route::get("/verify-email/{id}/{hash}", [
    VerifyEmailController::class,
    "__invoke",
  ])
    ->middleware(["auth:sanctum","signed", "throttle:6,1"])
    ->name("verification.verify");
Copy code

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
    );
  }
}
Copy code

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' })
      }
    }
Copy code

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.