En el artículo anterior ya explicamos qué es Laravel Sanctum y vimos que las versiones modernas de Laravel ya lo incorporan de serie, por lo que podemos empezar a usar esta capa de autenticación para API nada más iniciar un proyecto Laravel.

En este artículo vamos a ver cómo configurar Sanctum. Dentro de las opciones de trabajo en este artículo vamos a cubrir la "Autenticación para SPA", que está basada en sesiones.

Solo ten en cuenta que para usar la autenticación basada en sesiones el sitio web frontend debe compartir el dominio con el sitio web donde tienes desplegado el servicio web o API. Es decir, el frontend tiene que compartir dominio con el backend, o bien ser un subdominio del backend. Por ejemplo, podrías tener el backend en desarrolloweb.com y el frontend en app.desarrolloweb.com. O tener desplegados ambos proyectos en el mismo dominio desarrolloweb.com. Siendo que en modo de desarrollo es perfectamente posible trabajar con localhost en tu frontend, en cualquier puerto.

Configurar el dominio o dominios donde vamos a autenticar mediante sesiones

Comenzaremos configurando nuestra aplicación para informar desde qué dominios o subdominios vamos a poder realizar autenticación basada en sesiones. Para comenzar abriremos el archivo config/sanctum.php y veremos que se hace uso de una variable de entorno llamada SANCTUM_STATEFUL_DOMAINS. En ella vamos a indicar dónde está el servidor frontend desde el que vamos a usar el API Backend.

Suponiendo que nuestro frontend está en http://localhost:8000, entonces editamos el archivo .env y colocamos la siguiente línea.

SANCTUM_STATEFUL_DOMAINS=localhost:8000

Para permitir la autenticación desde más de un dominio a la vez (por ejemplo podría ser example.com y otro.example.com), debes ajustar la configuración de SANCTUM_STATEFUL_DOMAINS en tu archivo .env para incluir ambos dominios separados por una coma. Podría ser algo como esto:

SANCTUM_STATEFUL_DOMAINS=example.com,otro.example.com

Activar el middleware de Sanctum

En el archivo de los middlewares: app/Http/Kernel.php tenemos que activar el middleware de Sanctum para las autenticaciones basadas en sesiones (stateful).

Para ello encontraremos una declaración como esta:

'api' => [
    // \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    \Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

Simplemente tenemos que descomentar la línea del Sanctum Middleware, por lo que pasaremos a dejar este código:

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    \Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

Activar Cors

Ahora viene la configuración que más dolores de cabeza nos puede dar. Consiste en activar "cors" para nuestro servicio web, de modo que se pueda acceder a él desde otros dominios. Esto es importante porque nuestro backend estará en un servidor distinto y en principio las solicitudes http no funcionarían si no están activadas las correspondientes cabeceras del HTTP para permitir el Intercambio de Recursos de Origen Cruzado (CORS).

Para permitir Cors tenemos que llevar en consideración:

• Que el dominio desde donde queremos acceder a nuestra aplicación esté dentro de los permitidos.
• Que las rutas de la aplicación tengan activado cors.

La parte de activar el dominio ya la hemos hecho en un paso anterior gracias a la variable de entorno SANCTUM_STATEFUL_DOMAINS. Ahora tenemos que configurar en el backend también el archivo config/cors.php.

En el archivo de configuración cors vamos a encontrar una línea como esta;

'paths' => ['api/*', 'sanctum/csrf-cookie'],

Esa línea tiene que cubrir todas las rutas del proyecto donde vamos a activar cors. Una opción podría ser dejarlo con un simple asterisco:

'paths' => ['*'],

Pero también podemos especificar todas las rutas, como por ejemplo:

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

También en el archivo de configuración de Cors, config/cors.php, tenemos que realizar otro cambio. Se basa en la configuración supports_credentials, que tenemos que poner a true.

'supports_credentials' => true,

Permitir cookies de sesión en el dominio adecuado

En el archivo de configuración config/session.php tenemos otro valor que probablemente necesitemos cambiar. Se trata del "Session Cookie Domain", al que tendremos que asignar el valor del dominio o subdominio donde se permitirá hacer uso de cookies de sesión.

Verás que se usa una variable de configuración llamada SESSION_DOMAIN. En ella puedes colocar el dominio o subdominio desde donde quieres hacer uso de cookies de sesión.

Para ello podemos poner en nuestro .env el siguiente valor de configuración.

SESSION_DOMAIN=localhost

Con estos pasos hemos conseguido configurar el package Laravel Sanctum para el uso basado en cookies de sesión. A partir de aquí podemos seguir con nuestro siguiente paso, que será instalar el paquete Laravel Fortify que nos ofrece el código necesario para implementar las rutas del API donde se realizará el proceso de autenticación. Eso lo veremos en el próximo artículo del manual.