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

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

Instalación

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

npm install lucia

pnpm add lucia

yarn add lucia

Configuración

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.

Uso

Siguientes pasos

Auth.js

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.

Instalación

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

npx astro add auth-astro

pnpm astro add auth-astro

yarn astro add auth-astro

Instalación manual

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

npm install auth-astro @auth/core@^0.18.6

pnpm add auth-astro @auth/core@^0.18.6

yarn add auth-astro @auth/core@^0.18.6

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

import { defineConfig } from 'astro/config';
import auth from 'auth-astro';

export default defineConfig({
  // ...
  integrations: [auth()],
});

Configuración

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.

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.

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

Uso

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.

---
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.

---
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>

Siguientes pasos

Clerk

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.

Instalación

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

npm install @clerk/astro

pnpm add @clerk/astro

yarn add @clerk/astro

Configuración

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.

Uso

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:

---
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:

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();
  }
});

Siguientes pasos

Leer la documentación de clerk/astro oficial
Empieza usando una plantilla con el proyecto de inicio rápido de Clerk + Astro

Recursos de la comunidad

Usando Microsot Entra Id EasyAuth con Astro y Azure Static Web App

Contribuir

Comunidad

Autenticación

Lucia

Instalación

Configuración

Uso

Siguientes pasos

Auth.js

Instalación

Instalación manual

Configuración

Uso

Siguientes pasos

Clerk

Instalación

Configuración

Uso

Siguientes pasos

Recursos de la comunidad

¿Qué tienes en mente?

Crear un problema en GitHub

Envíanos comentarios

Envíanos comentarios