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

Sección titulada Lucia

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

Instalación

Sección titulada Instalación

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

Ventana de terminal
npm install lucia

Configuración

Sección titulada 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

Sección titulada Uso

Siguientes pasos

Sección titulada Siguientes pasos

Auth.js

Sección titulada 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

Sección titulada Instalación

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

Instalación manual

Sección titulada Instalación manual

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

Configuración

Sección titulada 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.

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>

Uso

Sección titulada 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.

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>

Siguientes pasos

Sección titulada Siguientes pasos