Laravel Sanctum Breeze con Next JS
Acabo de instalar este repositorio https://github.com/laravel/breeze-next y, como se esperaba, todo funciona bien según la documentación. El inicio de sesión, cierre de sesión y registro funcionan correctamente.
Ahora, después de iniciar sesión, quiero proteger las rutas de la API, pero arroja errores con el código 401 cuando intento acceder a la ruta protegida incluso después de iniciar sesión.
Aquí está la configuración de AXIOS según lo indicado en el repositorio:
import Axios from 'axios'
const axios = Axios.create({
baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
headers: {
'X-Requested-With': 'XMLHttpRequest',
},
withCredentials: true,
})
export default axios
Acabo de agregar una llamada al servidor con Axios en “/api/test”:
export async function getStaticProps() {
const response = await axios.get('/api/test');
return {
props: {
customers: response.data
},
}
}
Esto es la API en Laravel:
Route::middleware(['auth:sanctum'])->get('/test', function () {
return response()->json([
'val' => 1,
'msg' => 'correctamente',
]);
});
Si elimino el middleware, funciona bien. Pero cuando agrego el middleware “auth sanctum”, siempre muestra un error 401.
“`
Error del servidor
Error: Solicitud fallida con código de estado 401
Este error ocurrió mientras se generaba la página. Cualquier registro de la consola se mostrará en la ventana de la terminal.
Así que, ¿puedo proporcionar autenticación en SPA con Sanctum?
davy.ai
En este escenario, el problema es que el middleware de Laravel Sanctum no permite el acceso a la ruta protegida incluso después de iniciar sesión correctamente. Puedes otorgar autenticación en SPA con Sanctum siguiendo algunos pasos:
Asegúrate de que la configuración de Axios sea correcta, incluyendo la URL base correcta y el indicador withCredentials establecido en true. El encabezado X-Requested-With no es necesario, pero puede ser útil para prevenir ataques CSRF.
Para proteger tus rutas de API, necesitas agregar el middleware de Sanctum a esas rutas. En el archivo routes/web.php de Laravel, puedes hacer esto agregando el middleware a la definición de la ruta, como ya está hecho en este escenario.
Si estás utilizando Laravel Sanctum para APIs, necesitarás iniciar manualmente una nueva sesión antes de hacer solicitudes autenticadas con Axios. Puedes hacer esto llamando a la ruta /sanctum/csrf-cookie antes de intentar autenticarte.
Una vez que la sesión está iniciada, puedes autenticarte utilizando el sistema de autenticación de tokens de la API de Sanctum. Por defecto, Laravel incluye un modelo de usuario con Sanctum ya configurado. Puedes utilizar este modelo para generar y autenticar tokens de API.
En tus llamadas de Axios, asegúrate de pasar el token autenticado en los encabezados de la solicitud. Puedes obtener el token de la respuesta de la API o llamando al método token del usuario autenticado con Auth::user()->createToken(‘access-token’)->plainTextToken.
Finalmente, utiliza el token para hacer solicitudes autenticadas a tus rutas de API protegidas. El middleware de Sanctum debería permitir el acceso a esas rutas con el token autenticado.
Si has seguido estos pasos y aún obtienes un error 401 después de intentar acceder a la ruta de API protegida, es posible que necesites verificar los registros de tu servidor para obtener mensajes de error más detallados. Dependiendo de la configuración de tu servidor, es posible que también necesites habilitar CORS para permitir solicitudes entre dominios.