import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro' import ReadMore from '/components/ReadMore.astro'

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.

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

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.

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

:::tip Sigue uno de los tutoriales completos de Lucia para Astro para agregar autenticación de nombre de usuario y contraseña o GitHub OAuth a tu proyecto de Astro. :::

Siguientes pasos

• Ejemplo de proyecto Astro + Lucia OAuth
• Ejemplo de proyecto Astro + Lucia usuario y contraseña

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.

Instalación manual

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

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

• auth-astro en GitHub
• Documentación de Auth.js

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.

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