Saltearse al contenido

Autenticación

La autenticación y la autorización son dos procesos de seguridad que manejan el acceso a tu sitio web o aplicación. La autenticación verifica la identidad de un visitante, mientras que la autorización otorga acceso a áreas y recursos protegidos.

La autenticación te permite personalizar áreas de tu sitio para personas que han iniciado sesión y proporciona la mayor protección para la información personal o privada. Las bibliotecas de autenticación (por ejemplo, Lucia Auth, Auth.js, Clerk) proporcionan utilidades para múltiples métodos de autenticación, como el inicio de sesión con correo electrónico y los proveedores de OAuth.

Consulta como agregar autenticación con Supabase o agregar autenticación con Firebase en nuestras guías dedicadas para estos servicios de backend.

Lucia es un framework agnóstico, una biblioteca de autenticación basada en sesiones con un gran soporte para Astro.

Instala Lucia usando el gestor de paquetes de tu elección.

Ventana de terminal
npm install lucia

Usa la guía “Getting started in Astro” de Lucia para inicializar Lucia con un adaptador y configurar una base de datos para almacenar usuarios y sesiones.

Auth.js es una solución de framework agnóstico para autenticación. Un adaptador de framework de la comunidad auth-astro está disponible para Astro.

Usa el comando astro add para tu gestor de paquetes preferido para agregar la integración auth-astro.

Ventana de terminal
npx astro add auth-astro

Para instalar auth-astro manualmente, instala el paquete requerido para tu gestor de paquetes:

Ventana de terminal
npm install auth-astro @auth/core@^0.18.6

Luego, aplica la integración a tu archivo astro.config.* usando la propiedad integrations:

astro.config.mjs
import { defineConfig } from 'astro/config';
import auth from 'auth-astro';
export default defineConfig({
// ...
integrations: [auth()],
});

Crea un archivo auth.config.mjs en la raíz de tu proyecto. Agrega cualquier proveedor o método de autenticación que desees admitir, junto con cualquier variable de entorno que requieran.

auth.config.mjs
import GitHub from '@auth/core/providers/github';
import { defineConfig } from 'auth-astro';
export default defineConfig({
providers: [
GitHub({
clientId: import.meta.env.GITHUB_CLIENT_ID,
clientSecret: import.meta.env.GITHUB_CLIENT_SECRET,
}),
],
});

Crea un archivo .env en la raíz de tu proyecto si no existe. Agrega las siguientes dos variables de entorno. AUTH_SECRET debe ser un string privada con un mínimo de 32 caracteres.

.env
AUTH_TRUST_HOST=true
AUTH_SECRET=<my-auth-secret>

Puedes agregar botones de inicio de sesión y cierre de sesión usando el módulo auth-astro/client en una etiqueta de script o componente de framework del lado del cliente.

src/pages/index.astro
---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
<button id="login">Iniciar sesión</button>
<button id="logout">Cerrar sesión</button>
<script>
const { signIn, signOut } = await import("auth-astro/client")
document.querySelector("#login").onclick = () => signIn("github")
document.querySelector("#logout").onclick = () => signOut()
</script>
</Layout>

Puedes obtener la sesión del usuario usando el método getSession.

src/pages/index.astro
---
import Layout from 'src/layouts/Base.astro';
import { getSession } from 'auth-astro/server';
const session = await getSession(Astro.request);
---
<Layout>
{
session ? (
<p>Bienvenido {session.user?.name}</p>
) : (
<p>No ha iniciado sesión</p>
)
}
</Layout>

Clerk es una suite completa de UIs incrustables, APIs flexibles y paneles de administración para autenticar y gestionar a tus usuarios. Un SDK oficial de Clerk para Astro está disponible.

Instala @clerk/astro usando el gestor de paquetes de tu elección.

Ventana de terminal
npm install @clerk/astro

Sigue la guía de inicio rápido de Clerk para Astro para configurar la integración de Clerk y el middleware en tu proyecto de Astro.

Clerk proporciona componentes que te permiten controlar la visibilidad de las páginas basadas en el estado de autenticación de tu usuario. Muestra a los usuarios desconectados un botón de inicio de sesión en lugar del contenido disponible para los usuarios que han iniciado sesión:

src/pages/index.astro
---
import Layout from 'src/layouts/Base.astro';
import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components';
---
<Layout>
<SignedIn>
<UserButton />
</SignedIn>
<SignedOut>
<SignInButton />
</SignedOut>
</Layout>

Clerk también te permite proteger rutas en el servidor usando middleware. Especifica qué rutas están protegidas y pide a los usuarios no autenticados que inicien sesión:

src/middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';
const isProtectedRoute = createRouteMatcher([
'/dashboard(.*)',
'/forum(.*)',
]);
export const onRequest = clerkMiddleware((auth, context) => {
if (!auth().userId && isProtectedRoute(context.request)) {
return auth().redirectToSignIn();
}
});
Contribuir

¿Qué tienes en mente?

Comunidad