Configurar Laravel Sanctum para la autenticación SPA y por API Tokens

Laravel Sanctum es un paquete para la autenticación de aplicaciones de página única (SPAs) y aplicaciones móviles que podemos usar para proteger la Rest Api mediante autenticación requerida; Laravel Sanctum y APIs simples basadas en tokens; recuerda que no es tan directa como agregar una sesión, y esto se debe a que una Rest Api se recomienda que sea sin estado y es aquí donde entra Laravel Sanctum al juego. Permite que cada usuario de su aplicación genere múltiples tokens de API para su cuenta. Laravel Sanctum proporciona un sistema de autenticación liviano para SPAs y API simples

Laravel sanctum es una maravilla para cuando queremos proteger una Rest Api creada con Laravel ya sea mediante tokens o un hibrido entre sección y cookies; antes de mostrarte como puedes hacer la implementación más tradicional, vamos a entrar un poco en la materia e introducir que es Sanctum.

Usando Laravel Santum nos aseguramos de que solo los usuarios autenticados puedan acceder a las rutas que lo requieran.

La idea detrás de Sanctum es la de proteger las API de las aplicaciones Laravel mediante autenticación y tokens de acceso. Al hacerlo, se garantiza que solo se permitan solicitudes autenticadas y autorizadas, lo que a su vez asegura la integridad de la aplicación y los datos involucrados. Espero que esto te haya ayudado a entender un poco más sobre la teoría detrás de Laravel Sanctum.

Laravel Sanctum nos ofrece dos esquemas para trabajar.

¿Qué es Laravel Sanctum?

Laravel Sanctum es un paquete de autenticación para Laravel  que proporciona un método simple y seguro para autenticar aplicaciones de página única (SPAs) mediante los usuarios y proteger su API mediante tokens de API. Sanctum permite generar y administrar tokens de API, que se emiten mediante un recurso rest que implementamos y que es pasado al cliente para que este, cuando quiera acceder a recursos protegidos, deba de emplear dicho token de acceso y poder conectarse al recurso y consumir la respuesta de la API. 

Estos tokens son estupendos ya que los puedes usar para autenticar solicitudes de API y también para restringir el acceso a rutas, ya que, con el mismo, desde Laravel sabes de que usuario se trata que intenta consumir un recurso determinado y realizar alguna traza o limitante.

1 Autenticación vía SPA

Esto es útil cuando tenemos una página SPA y quieres agregar autenticación par proteger una Rest Api y acceder al usuario; esta opción se basa en un esquema entre autenticación por sesión y cookies qué tenemos que configurar; vale decir, que es la más sencilla de las dos:

A nivel del kernel, tenemos que habilitar el servicio de cookies y sesión para Sanctum:

//App/Http/Kernel
 
//***
class Kernel extends HttpKernel
{
    //***
 
        'api' => [      \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

Especificar el dominio que vas a emplear para la autenticación basado en las cookies en el archivo de config/sanctum.php:

  'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1,laraprimerospasos.test',
        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
    ))),

Si estás empleando Mac o Linux con Sail, no hace falta modificar este archivo ya que, el localhost se encuentra presente; también, puedes colocar la URL de tu dominio en producción.

En el archivo de config/cors.php tienes que habilitar el supports_credentials en true.

Para poder emplear axios (que lo haremos más adelante, debes de buscar el archivo resources/js/bootstrap.js y colocar:

axios.defaults.withCredentials = true;

Esto es para habilitar el uso de las cookies con las credenciales del usuario, y poder usarlo de manera transparente con axios.

Finalmente, ya con esto, podemos emplear el middleware para la autenticación de las rutas; de manera ejemplificada, protegeremos un conjunto de rutas:

Route::group(['middleware' => 'auth:sanctum'], function () {
    Route::resource('category', CategoryController::class)->except(["create", "edit"]);
    Route::resource('post', PostController::class)->except(["create", "edit"]);
});

Por lo demás lo único que tienes que hacer es iniciar sesión y ya estamos listos; puedes usar este esquema con axios.

2 En base a API Tokens

El siguiente esquema es más manual y a la final es una autenticación en base a tokens; para ello, ahora al momento de autenticarnos, generamos el tokens de autenticación:

Antes de comenzar, vamos a deshabilitar el esquema anterior de Sanctum para la autenticación vía SPA:

'api' => [           //\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
***
],

Generar tokens de acceso

Laravel Sanctum nos provee un sencillo mecanismo con el cual agregar autenticación a Rest Api, mediante Token de autenticación o por tokens de autenticación, en esta primera entrada, veremos cómo usar el mecanismo del token de autenticación que sería el esquema más tradicional.

Cabe mencionar que, no es necesario instalar Sanctum ya que, desde hace mucho tiempo, Sanctum forma parte de un proyecto en Laravel.

En nuestro controlador rest, para manejar el usuario, en el caso de nuestro curso en Laravel, sería el siguiente:

app\Http\Controllers\Api\UserController.php

Crearemos una función de login, usando la función de attempt con la cual, podemos comprobar credenciales de usuario que son provistas en la petición:

    $credentials = [
        'email' => $request->email,
        'password' => $request->password
    ];

Una vez comprobada las credenciales, creamos el token y devolvemos la respuesta:

Auth::user()->createToken('myapptoken')->plainTextToken;

Finalmente, el código completo:

public function login(Request $request)
{
    $credentials = [
        'email' => $request->email,
        'password' => $request->password
    ];
    if (Auth::attempt($credentials)) {
        $token = Auth::user()->createToken('myapptoken')->plainTextToken;
     session()->put('token', $token);
        return response()->json($token);
    }
    return response()->json("Usuario y/o contraseña inválido", 422);
}

Lo más importante es notar que, aunque sanctum provee de todos los mecanismos para generar el token, ya depende del usuario implementar la lógica necesaria para generar el token.

Para crear los tokens para nuestros usuarios, vamos a crear una función de login que permite generar estos tokens (esta función también podrías emplear en la autenticación vía SPA pero sin generar el token):

$ php artisan make:controller Api/UserController

En el cual, definiremos el siguiente contenido:

<?php
 
namespace App\Http\Controllers\Api;
 
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
 
class UserController extends Controller
{
    public function login(Request $request)
    {
        $credentials = [
            'email' => $request->email,
            'password' => $request->password
        ];
 
        if(Auth::attempt($credentials)){
            $token = Auth::user()->createToken('myapptoken')->plainTextToken;
 
            return response()->json($token);
        }
        return response()->json("Usuario y/o contraseña inválido");
    }
}

Importante notar que Sanctum ya viene instalado en los proyectos modernos de Laravel.

Más ejemplos con Sanctum

Por aquí te dejo otros ejemplos con autenticación en Laravel sanctum y protección de rutas.

En el caso de que el proyecto ya no disponga de Sanctum, debes instalar Laravel Sanctum usando Composer:

composer require laravel/sanctum

Luego, publicarás los archivos de configuración y migraciones de Sanctum:

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

A continuación, ya podemos proteger nuestras rutas, para ello, usamos un middleware de autenticación en tu archivo de rutas. Por ejemplo:

routes/api.php

Route::middleware('auth:sanctum')->group(function () {
   Route::get('/post', function () {
       return view('dashboard');
   });
});

En este ejemplo, la ruta "/post" solo será accesible si el usuario está autenticado mediante el middleware de Sanctum.

Después de eso, puedes generar un token de API para un usuario autenticado. Por ejemplo:

$token = $user->createToken('token-name')->plainTextToken;

Este código generará un token de API para el usuario dado con el nombre "token-name". Luego, puedes usar el token para autenticar solicitudes de API; aquí tienes otro ejemplo de login con sanctum:

routes/api.php

use App\\Models\\User;
use Illuminate\\Http\\Request;
use Illuminate\\Support\\Facades\\Hash;

Route::post('/login', function (Request $request) {
    $user = User::where('email', $request->email)->first();

    if (! $user || ! Hash::check($request->password, $user->password)) {
        throw ValidationException::withMessages([
            'email' => ['The provided credentials are incorrect.'],
        ]);
    }

    $token = $user->createToken($request->device_name)->plainTextToken;

    return ['token' => $token];
});

Eso es solo un ejemplo básico de cómo puedes utilizar Laravel Sanctum en tu proyecto Laravel. Espero que te haya sido útil. Si tienes más preguntas, no dudes en hacerlas.