Autenticación

La autenticación y la autorización son dos procesos de seguridad que gestionan 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 usuarios conectados y brinda la mayor protección para información personal o privada. Las bibliotecas de autenticación (p. ej. Better Auth, Clerk) proporcionan utilidades para múltiples métodos de autenticación, como el inicio de sesión por correo electrónico y proveedores de OAuth.

Consejo

No existe una solución de autenticación oficial para Astro, pero puedes encontrar integraciones de autenticación de la comunidad en el directorio de integraciones.

Mira cómo añadir autenticación con Supabase, añadir autenticación con Firebase o añadir autenticación con Scalekit en nuestras guías dedicadas a estos servicios backend.

Better Auth

Better Auth es un framework de autenticación (y autorización) para TypeScript independiente del framework (framework-agnostic). Proporciona un conjunto completo de características listas para usar e incluye un ecosistema de plugins que simplifica la adición de funcionalidades avanzadas.

Es compatible con Astro por defecto, y puedes usarlo para agregar autenticación a tu proyecto de Astro.

Instalación

npm

npm install better-auth

pnpm

pnpm add better-auth

Yarn

yarn add better-auth

Para obtener instrucciones detalladas sobre la configuración, consulta la Guía de instalación de Better Auth.

Configuración

Configura la tabla de tu base de datos para almacenar datos de usuario y tus métodos de autenticación preferidos como se describe en la Guía de instalación de Better Auth. Luego, necesitarás montar el manejador de Better Auth en tu proyecto de Astro.

src/pages/api/auth/[...all].ts

import { auth } from "../../../lib/auth"; // import your Better Auth instance
import type { APIRoute } from "astro";

export const prerender = false; // Not needed in 'server' mode

export const ALL: APIRoute = async (ctx) => {
  return auth.handler(ctx.request);
};

Sigue la Guía de Astro para Better Auth para aprender más.

Uso

Better Auth ofrece un ayudante createAuthClient para varios frameworks, incluidos Vanilla JS, React, Vue, Svelte y Solid.

Por ejemplo, para crear un cliente para React, importa el ayudante desde 'better-auth/react':

React

src/lib/auth-client.ts

import { createAuthClient } from 'better-auth/react';

export const authClient = createAuthClient();

export const { signIn, signOut } = authClient;

Solid

src/lib/auth-client.ts

import { createAuthClient } from 'better-auth/solid';

export const authClient = createAuthClient();

export const { signIn, signOut } = authClient;

Svelte

src/lib/auth-client.ts

import { createAuthClient } from 'better-auth/svelte';

export const authClient = createAuthClient();

export const { signIn, signOut } = authClient;

Vue

src/lib/auth-client.ts

import { createAuthClient } from 'better-auth/vue';

export const authClient = createAuthClient();

export const { signIn, signOut } = authClient;

Una vez configurado tu cliente, puedes usarlo para autenticar a los usuarios en tus componentes de Astro o en cualquier archivo específico del framework. El siguiente ejemplo añade la posibilidad de iniciar o cerrar sesión con las funciones configuradas signIn() y signOut().

src/pages/index.astro

---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
  <button id="login">Login</button>
  <button id="logout">Logout</button>

  <script>
    const { signIn, signOut } = await import("./lib/auth-client")
    document.querySelector("#login").onclick = () => signIn.social({
      provider: "github",
      callbackURL: "/dashboard",
    })
    document.querySelector("#logout").onclick = () => signOut()
  </script>
</Layout>

Luego puedes usar el objeto auth para obtener los datos de la sesión del usuario en tu código del lado del servidor. El siguiente ejemplo personaliza el contenido de la página mostrando el nombre de un usuario autenticado:

src/pages/index.astro

---
import { auth } from "../../../lib/auth"; // import your Better Auth instance

export const prerender = false; // Not needed in 'server' mode

const session = await auth.api.getSession({
  headers: Astro.request.headers,
});
---

<p>{session.user?.name}</p>

También puedes usar el objeto auth para proteger tus rutas usando middleware. El siguiente ejemplo verifica si un usuario que intenta acceder a una ruta de panel protegida está autenticado y lo redirige a la página de inicio en caso contrario.

src/middleware.ts

import { auth } from "../../../auth"; // import your Better Auth instance
import { defineMiddleware } from "astro:middleware";

export const onRequest = defineMiddleware(async (context, next) => {
  const isAuthed = await auth.api
    .getSession({
      headers: context.request.headers,
    })
  if (context.url.pathname === "/dashboard" && !isAuthed) {
    return context.redirect("/");
  }
  return next();
});

Siguientes pasos

• Guía de Astro para Better Auth
• Ejemplo de Astro para Better Auth
• Documentación de Better Auth
• Repositorio de GitHub de Better Auth

Clerk

Clerk es una suite completa de interfaces de usuario incrustables, APIs flexibles y paneles de administración para autenticar y administrar a tus usuarios. Hay un SDK oficial de Clerk para Astro disponible.

Instalación

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

npm

npm install @clerk/astro

pnpm

pnpm add @clerk/astro

Yarn

yarn add @clerk/astro

Configuración

Sigue la guía de inicio rápido de Astro de Clerk 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 según el estado de autenticación de tu usuario. Muestra a los usuarios que no han iniciado sesión un botón de inicio de sesión en lugar del contenido disponible para los usuarios que sí han iniciado sesión:

src/pages/index.astro

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

export const prerender = false; // Not needed in 'server' mode
---

<Layout>
    <SignedIn>
        <UserButton />
    </SignedIn>
    <SignedOut>
        <SignInButton />
    </SignedOut>
</Layout>

Clerk también te permite proteger rutas en el servidor utilizando middleware. Especifica qué rutas están protegidas e indica 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();
  }
});

Siguientes pasos

• Lee la documentación oficial de @clerk/astro
• Comienza desde una plantilla con el proyecto de inicio rápido de Clerk + Astro

Lucia

Lucia es un recurso para implementar autenticación basada en sesiones en varios frameworks, incluyendo Astro.

Guías

1. Crea una API de sesiones básica con la base de datos de tu elección.
2. Añade cookies de sesión usando endpoints y middleware.
3. Implementa OAuth de GitHub usando las APIs que implementaste.

Ejemplos

• Ejemplo de OAuth de GitHub en Astro
• Ejemplo de OAuth de Google en Astro
• Ejemplo de correo electrónico y contraseña con 2FA en Astro
• Ejemplo de correo electrónico y contraseña con 2FA y WebAuthn en Astro

Scalekit

Scalekit es una plataforma de autenticación creada para aplicaciones B2B e IA. Ofrece inicio de sesión con redes sociales, SSO empresarial, enlaces mágicos y más; gestionando todo el flujo OAuth 2.0 / OIDC para que recibas tokens y un perfil de usuario sin construir ninguna interfaz de usuario de inicio de sesión. Un solo entorno de Scalekit admite múltiples aplicaciones, de modo que los usuarios se autentican una vez y comparten la misma sesión en todas tus propiedades (por ejemplo, app.yourcompany.com y docs.yourcompany.com).

Guía

Sigue la guía de Scalekit y Astro para agregar autenticación a tu proyecto SSR de Astro mediante inicio de sesión social, SSO empresarial y más.

Ejemplos

• Tutorial de blog de Astro con autenticación Scalekit (flujo de código de autorización)
• Código fuente del sitio de documentación para desarrolladores de Scalekit (flujo PKCE, sin SDK)

Recursos de la comunidad

• Uso de Microsoft Entra Id EasyAuth con Astro y Azure Static Web App