Uno de los servicios básicos que podemos implementar fácilmente en nuestra aplicación SPA es la verificación del correo de los usuarios. Esta es una funcionalidad muy habitual en las aplicaciones con consiste en enviar un email al correo de cada usuario según se autentica. En ese correo hay un enlace para verificar que el usuario registrado posee el correo que ha usado para registrarse. Seguro que sabes a qué nos referimos porque habrás pasado por ese proceso en muchas ocasiones.

La verdad es que Laravel ya tiene todo el proceso realizado cuando instalamos un starter kit como Breeze, que nos incluye todo el proceso de registro completo, tanto la parte del backend como del frontend. Si hemos optado por realizar un API y apoyarnos en el package de Laravel Fortify también tenemos implementada toda la operativa de la parte del backend, aunque tenemos que realizar algunas alteraciones en el código base de la aplicación Laravel.

Damos por hecho que nuestra aplicación backend está pensada para implementar un API y que has usado Sanctum y Fortify para toda la parte del proceso de login y registro. Si no es así, tendrías que comenzar creando tu aplicación y configurando los packages necesarios, tal como se explicó en el Manual de desarrollo de API con Laravel Sanctum y Fortify.

Para integrar el proceso de verificación del email con tu aplicación frontend tendrás que seguir los siguientes pasos.

Creamos una variable de entorno FRONTEND_URL

Si no la has creado todavía, en el archivo de variables de entorno .env vamos a crear una nueva entrada llamada "FRONTEND_URL" a la que asignaremos la URL del frontend que se conectará con nuestro API backend.

FRONTEND_URL=http://localhost:8000

Esta URL la necesitamos conocer en el backend porque nos permitirá hacer las correspondientes redirecciones al frontend desde las rutas de verificación del email.

Activar la funcionalidad de verificación de emails

Debemos asegurarnos que la funcionalidad de verificación de los emails registrados está activada. Esto lo conseguimos en el archivo de configuración de Fortify, en config/fortify.php.

Allí debes localizar el array de features y descomentar la línea de "emailVerification".

'features' => [
        Features::registration(),
        Features::resetPasswords(),
        Features::emailVerification(),
        // …
]

Usar la variable de entorno de FRONTEND_URL en la configuración de Fortify

También en el archivo de configuración de Fortify config/fortify.php tenemos que alterar el valor de la variable 'home', usando la URL definida en la variable de entorno.

'home' => env('FRONTEND_URL'),

En el caso que, al verificar el email, quieras llevar los usuarios a otra ruta, no necesariamente la home de tu aplicación frontend, podrías dejar una configuración parecida a la siguiente:

'home' => env('FRONTEND_URL') . '/dashboard',

Asegurarnos que CORS está activo para la ruta de verificación del email

En la configuración de CORS tenemos que activar una ruta más para consultar desde el frontend. Básicamente es la ruta desde la que podemos pedir que nos reenvíen el email de verificación del usuario.

En config/cors.php debemos asegurarnos de que cors está activado para la ruta nueva que quizás no tengamos todavía. Se trata de la ruta /email/verification-notification.

El archivo de cors.php tendría una configuración de paths con un código similar a este:

'paths' => [
        'api/*', 
        'sanctum/csrf-cookie', 
        'login', 
        'register', 
        'logout',
        '/email/verification-notification',
],

Podría ser el caso que tuvieses un array de paths con el valor '*', con un código como el que sigue en la configuración de rutas:

'paths' => ['*'],

En este caso el asterisco actúa de comodín e incluye a todas las rutas de la aplicación. Quiere decir que todas las rutas tienen activado CORS, por lo que también lo estará la ruta /email/verification-notification.

Configurar el modelo de User

En el modelo de usuario que está en el fichero app/Models/User.php tenemos que hacer una mínima configuración para que se envíen los correos de verificación al registrar a los usuarios. Esta modificación consiste en implementar la interfaz MustVerifyEmail.

También debemos usar el trait Notifiable. El código relevante del modelo User sería el siguiente.

class User extends Authenticatable implements MustVerifyEmail
{
    use HasApiTokens, HasFactory, Notifiable;

Gracias a estos cambios, todos los usuarios que se registren recibirán automáticamente el email de verificación de su correo electrónico. Además, dispondremos en el backend de una ruta para solicitar de nuevo el email de verificación.

La ruta para verificar el email (la que te envía al pulsar el enlace de verificación del email) la genera Laravel en el backend gracias al package Fortify. Así que no necesitamos hacer nada en particular para recibir las verificaciones. Simplemente gracias a la configuración de Fortify podemos definir dónde se reenviará al usuario al verificar su cuenta.

Conclusión

Con estos pasos hemos conseguido activar todos los requerimientos del backend para poder verificar los emails de los usuarios. Por supuesto, esto solamente ha sido una parte de tu trabajo, ya que ahora en el frontend deberías programar todas las vistas de tu aplicación y las comprobaciones necesarias para saber si tus usuarios están o no verificados.

De todos modos, en alguno de los starter kit que vimos en el artículo anterior, al menos en el basado en Web Components y Lit, se incluyen todas las vistas necesarias para soportar la verificación del email. Además se muestra cómo realizar las comprobaciones necesarias para saber si un usuario tiene o no el email verificado y mostrar los correspondientes mensajes para verificación.