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, Better Auth, 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.

Consejo

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

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

Better Auth

Better Auth es un framework agnóstico de autenticación (y autorización) independiente para TypeScript. Proporciona un conjunto completo de funciones listas para usar e incluye un ecosistema de complementos que simplifica la adición de funcionalidades avanzadas.

Es compatible con Astro desde el primer momento, y puedes utilizarlo para añadir 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 tu tabla de base de datos para almacenar los datos de los usuarios y tus métodos de autenticación preferidos tal y como se describe en la Guía de instalación de Better Auth. A continuación, tendrás que montar el controlador Better Auth en tu proyecto de Astro.

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

import { auth } from "../../../lib/auth"; // importa tu instancia de Better Auth
import type { APIRoute } from "astro";

export const prerender = false; // Innecesario en modo 'server'

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

Sigue la Guía de Better Auth en Astro para obtener más información.

Uso

Better Auth ofrece un asistente 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 el cliente, puedes utilizarlo para autenticar 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 signIn() y signOut() configuradas.

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>

A continuación, puedes utilizar el objeto auth para obtener los datos de 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"; // importa tu instancia de Better Auth

export const prerender = false; // Innecesario en modo 'server'

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

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

También puedes utilizar el objeto auth para proteger tus rutas mediante middleware. El siguiente ejemplo comprueba si un usuario que intenta acceder a una ruta del panel de control en la que ha iniciado sesión está autenticado y, si no es así, lo redirige a la página de inicio.

src/middleware.ts

import { auth } from "../../../auth"; // importa tu instancia de Better Auth
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 Better Auth en Astro
• Ejemplo de Better Auth en Astro
• Documentación de Better Auth
• Repositorio de GitHub de Better Auth

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

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

src/pages/index.astro

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

export const prerender = false; // Innecesario en modo 'server'
---
<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();
  }
});

Siguientes pasos

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

Lucia

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

Guides

1. Crea una API de sesiones básica con la base de datos que elijas.
2. Añade cookies de sesión utilizando endpoints y middleware.
3. Implementa GitHub OAuth utilizando las API que has implementado.

Ejemplos

• Ejemplo de Github OAuth en Astro
• Ejemplo de Google OAuth 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

Recursos de la comunidad

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