---
title: "Autenticación de Benutzern en Astro mit besserer Authentifizierung"
description: "¿Cómo autentificó Benutzer in der Astro-Anwendung mithilfe von Better Auth?"
source: "https://www.launchfa.st/es/blog/astro-better-auth"
author: "Rishi Raj Jain"
created_at: 2024-11-24T00:00:00.000Z
---

> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.

<img width="1600" height="900" alt="Authenticating users in Astro with Better Auth" decoding="async" loading="eager" class="mt-4 border rounded-sm bg-cover bg-center bg-no-repeat transform will-change-auto" src="https://ik.imagekit.io/vjeqenuhn/launchfast-website/astro-better-auth.png" />

En esta guía, aprenderá cómo autenticar usuarios en una aplicación Astro usando Better Auth. Pasará por el proceso de configuración de un nuevo proyecto Astro, habilitando la representación del lado del servidor usando el adaptador Vercel e integrando [Better Auth](https: //wwwbetter-auth.com) para autenticar usuarios sin problemas

## Requisitos previos

Necesitará lo siguiente:

- [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior
- Una cuenta [Neon](https://neontech) (Postgres sin servidor)

## Tabla de contenido

- [Crear una nueva aplicación Astro](#crea-una-nueva-aplicación-astro)
- [Integra el adaptador Vercel en tu proyecto Astro](#integra el adaptador-vercel-en-tu-proyecto-astro)
- [Crear un proyecto Neon (Postgres sin servidor)](#create-a-neon-serverless-postgres-project)
- [Integra Better Auth en tu proyecto Astro](#integrate-better-auth-in-your-astro-project)
  - [Instalar dependencias relevantes](#install-relevant-dependencies)
  - [Configurar definiciones de tipo](#set-up-type-definitions)
  - [Cargar variables de entorno](#cargar-variables-de-entorno)
  - [Crear archivos auxiliares para usar Better Auth](#create-helper-files-for-using-better-auth)
  - [Crear esquema relevante en la base de datos](#crear-esquema-relevante-en-la-base-de-datos)
  - [Definir una ruta API de autenticación general](#define-a-catch-all-authentication-api-route)
  - [Interceptar todas las solicitudes entrantes utilizando el middleware Astro](#interceptar-todas-las-solicitudes-entrantes-utilizando-astro-middleware)
  - [Crear la ruta del índice](#crear-la-ruta-del-índice)
  - [Crear una página de inicio de sesión](#create-a-sign-in-page)
  - [Crear una página de registro](#crear-una-página-de-registro)
- [Implementar en Vercel](#implementar-en-vercel)

## Crea una nueva aplicación Astro

Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:

```bash
npm create astro@latest my-app
```

`npm create astro` es la forma recomendada de desarrollar rápidamente un proyecto Astro

Cuando se le solicite, elija:

- `Empty` cuando se le pregunta cómo iniciar el nuevo proyecto
- `Sí` cuando se le pregunte si planea escribir Typecript
- `Estricto` cuando se le pregunta qué tan estricto debe ser Typecript.
- `Sí` cuando se le solicita instalar dependencias
- `Sí` cuando se le solicita inicializar un repositorio de git

Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:

```bash
cd my-app
npm run dev
```

La aplicación debería estar ejecutándose en [localhost:4321](http://localhost:4321/)

Ahora, pasemos a habilitar la renderización del lado del servidor en su aplicación Astro.

## Integre el adaptador Vercel en su proyecto Astro

Para autenticar y mantener sesiones de usuario con Better Auth, habilitará la representación del lado del servidor en su proyecto Astro a través del adaptador Vercel. Ejecute el siguiente comando:

```bash
npx astro add vercel
```

Cuando se le solicite, elija lo siguiente:

- `Sí` cuando se le pregunta si desea instalar las dependencias de Vercel
- `Sí` cuando se le pregunta si desea realizar cambios en el archivo de configuración de Astro

Ha habilitado con éxito la renderización del lado del servidor en Astro.

Ahora, pasemos a poner en marcha un Postgres sin servidor como base de datos.

## Crear un proyecto Neon (Postgres sin servidor)

Si aún no tiene uno, cree un proyecto Neon (Serverless Postgres) Guarde los detalles de su conexión, incluida su contraseña. Así es como lo haría:

1 Navegue a la página [Proyectos](https://consoleneontech/app/projects) en Neon Console
2 Haga clic en **Nuevo proyecto**
3 Especifique la configuración de su proyecto y haga clic en **Crear proyecto**
4 Cree un archivo `env` en el directorio raíz de su proyecto Astro y defina una clave `DATABASE_URL` con la cadena de conexión obtenida como valor.

Ahora, pasemos a configurar Better Auth en el proyecto Astro.

## Integre Better Auth en su proyecto Astro

### Instalar dependencias relevantes

Primero, ejecute el siguiente comando para instalar los paquetes necesarios para crear autenticación con Better Auth:

```bash
npm install better-auth pg
npm install -D @types/pg dotenv-cli
```

Los comandos anteriores instalan lo siguiente:

- `better-auth`: un marco de autenticación (y autorización) independiente del marco para TypeScript
- `pg`: Un cliente PostgreSQL para Nodejs- `@types/pg`: definiciones de tipos para el paquete `pg`
- `dotenv-cli`: Un paquete para cargar archivos dotenv

Ahora, pasemos a configurar definiciones de tipo para el usuario y el objeto de sesión en su proyecto Astro.

### Configurar definiciones de tipo

A continuación, configure definiciones de tipos para los objetos `usuario` y `sesión` en el archivo `src/envdts`:

```ts title="src/env.d.ts"
/// <reference path="../.astro/types.d.ts" />

declare namespace App {
  interface Locals {
    user: import('better-auth').User | null
    session: import('better-auth').Session | null
  }
}
```

Ahora, pasemos a configurar el acceso universal a las variables de entorno.

### Cargar variables de entorno

Actualice su `packagejson` para usar siempre dotenv para cargar las variables de entorno de modo que sean accesibles a través de los objetos `importmetaenv` y `processenv`:

```json title="package.json" ins={4-6}
{
  "type": "module",
  "scripts": {
    "dev": "dotenv -- astro dev",
    "build": "dotenv -- astro build",
    "preview": "dotenv -- astro preview"
  },
  "dependencies": {
    "@astrojs/vercel": "^7.8.2",
    "astro": "^4.16.13",
    "better-auth": "^1.0.0",
    "pg": "^8.13.1",
    "typescript": "^5.7.2"
  },
  "devDependencies": {
    "@types/pg": "^8.11.10",
    "dotenv-cli": "^7.4.4"
  }
}
```

Finalmente, actualice el archivo `env` para que tenga un valor aleatorio único para la clave `BETTER_AUTH_SECRET`

```bash title=".env"
BETTER_AUTH_SECRET="a-32-character-secret"
```

Ahora, pasemos a crear archivos de utilidad para acceder a Better Auth en su aplicación Astro.

### Crear archivos auxiliares para usar Better Auth

Creará dos archivos de utilidad, `src/authts` y `src/auth-clientts` para acceder a Better Auth en el lado del servidor y del lado del cliente, respectivamente.

En `src/authts` (código a continuación), usará un `Pool` para conectarse a su instancia de Postgres para conservar las sesiones y el objeto de usuario en la base de datos, y habilitar la autenticación de correo electrónico y contraseña. 

```tsx
// File: src/auth.ts

import pkg from 'pg'
import { betterAuth } from 'better-auth'

const { Pool } = pkg

export const auth = betterAuth({
  emailAndPassword: { enabled: true },
  database: new Pool({ connectionString: process.env.DATABASE_URL })
})
```

En `src/auth-clientts` (código a continuación), está creando una nueva instancia de mejor autenticación para usar en las interacciones del lado del cliente.

```tsx
// File: src/auth-client.ts

import { createAuthClient } from 'better-auth/client'

export const authClient = createAuthClient()
```

### Crear esquema relevante en la base de datos

Para crear el esquema según su configuración definida en el archivo `src/authts` en su base de datos automáticamente, ejecute el siguiente comando:

```bash
npx @better-auth/cli migrate
```

Ahora, pasemos a definir una ruta API que le permita autenticar usuarios.

### Definir una ruta API de autenticación general

Better Auth hace el trabajo pesado de crear y administrar la lógica de validación de credenciales, crear (o actualizar) el usuario y los objetos de sesión relevantes en la base de datos. Solo necesita crear una ruta API general en su proyecto Astro de la siguiente manera en el ` Archivo src/pages/api/auth/[all]ts`:

```tsx
// File: src/pages/api/auth/[...all].ts

import { auth } from '@/auth'
import type { APIRoute } from 'astro'

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

Ahora, pasemos a crear un middleware que actualice dinámicamente el usuario y el objeto de sesión al que se accederá globalmente.

### Intercepta todas las solicitudes entrantes utilizando el middleware Astro

Para asegurarse de que cada solicitud mantenga un usuario y que la información de la sesión sea accesible a través de los puntos finales del lado del servidor y en las páginas "astro" durante la representación del lado del servidor, creará un middleware que utilice Better Auth para decodificar/codificar una sesión de usuario. de la galleta

Cree un archivo `middlewarets` en el directorio `src` con el siguiente código:

```tsx
// File: src/middleware.ts

import { auth } from '@/auth'
import { defineMiddleware } from 'astro:middleware'

export const onRequest = defineMiddleware(async (context, next) => {
  context.locals.user = null
  context.locals.session = null
  const isAuthed = await auth.api.getSession({
    headers: context.request.headers,
  })
  if (isAuthed) {
    context.locals.user = isAuthed.user
    context.locals.session = isAuthed.session
  }
  return next()
})
```

El código se asegura de marcar tanto el usuario como la sesión como nulos de forma predeterminada y asignar los valores respectivos obtenidos de la base de datos utilizando las cookies relevantes de la solicitud. Esto le permite saber siempre el estado correcto de autenticación del usuario.

Ahora, pasemos a crear la ruta de índice de su aplicación Astro.

### Crear la ruta de índice

Cree un archivo `indexastro` dentro del directorio `src/pages` con el siguiente código:

```astro
---
if (!Astro.locals.user?.id) return Astro.redirect('/signin')
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    {JSON.stringify(Astro.locals.user)}
    <button id="signOutButton">Sign Out</button>
    <script>
      import { authClient } from '@/auth-client'
      document.getElementById('signOutButton')?.addEventListener('click', async () => {
        await authClient.signOut()
        window.location.href = '/signin'
      })
    </script>
  </body>
</html>
```

El código anterior hace lo siguiente:

- Redirige al usuario a la página de inicio de sesión si el usuario no está autenticado
- Muestra la información almacenada en el objeto `usuario` perteneciente al usuario autenticado
- Muestra un botón de cierre de sesión que, al hacer clic, invoca la utilidad "cerrar sesión" de Better Auth para cerrar la sesión del usuario. 

Ahora, pasemos a crear una ruta de inicio de sesión en su aplicación Astro.

### Crear una página de inicio de sesión

Cree un archivo `signinastro` dentro del directorio `src/pages` con el siguiente código:

```astro
---
if (Astro.locals.user?.id) return Astro.redirect('/')
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <form id="signin-form">
      <input type="email" name="email" placeholder="Email" required />
      <input required type="password" name="password" placeholder="Password" />
      <button type="submit">Sign In</button>
    </form>
    <p>Don't have an account? <a href="/signup">Sign up here</a>.</p>
    <script>
      import { authClient } from '@/auth-client'
      document.getElementById('signin-form')?.addEventListener('submit', async (event) => {
        event.preventDefault()
        const email = event.target?.email.value
        const password = event.target?.password.value
        const tmp = await authClient.signIn.email({
          email,
          password,
        })
        if (Boolean(tmp.error) === false) window.location.href = '/'
      })
    </script>
  </body>
</html>
```

El código anterior hace lo siguiente:

- Redirige al usuario a la página de índice si el usuario ya está autenticado
- Crea un formulario de inicio de sesión y adjunta el detector de eventos de envío.
- Intenta iniciar sesión como usuario utilizando el correo electrónico y la contraseña proporcionados

Ahora, pasemos a crear una ruta de registro en su aplicación Astro.

### Crear una página de registro

Crear un `registroarchivo astro` dentro del directorio `src/pages` con el siguiente código:

```astro
---
if (Astro.locals.user?.id) return Astro.redirect('/')
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <form id="signup-form">
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <input required type="password" name="password" placeholder="Password" />
      <button type="submit">Sign up</button>
    </form>
    <p>Already have an account? <a href="/signin">Sign in here</a>.</p>
    <script>
      import { authClient } from '@/auth-client'
      document.getElementById('signup-form')?.addEventListener('submit', async (event) => {
        event.preventDefault()
        const name = event.target?.name.value
        const email = event.target?.email.value
        const password = event.target?.password.value
        const tmp = await authClient.signUp.email({
          name,
          email,
          password,
        })
        if (Boolean(tmp.error) === false) window.location.href = '/'
      })
    </script>
  </body>
</html>
```

El código anterior hace lo siguiente:

- Redirige al usuario a la página de índice si el usuario ya está autenticado
- Crea un formulario de registro y adjunta el detector de eventos de envío.
- Intenta registrar al usuario utilizando el nombre, correo electrónico y contraseña proporcionados

Ahora, implementemos la aplicación en Vercel.

## Implementar en Vercel

El código ahora está listo para implementarse en Vercel. Utilice los siguientes pasos para implementarlo:

- Comience creando un repositorio de GitHub que contenga el código de su aplicación.
- Luego, navegue hasta el Panel de Vercel y cree un **Nuevo proyecto**
- Vincula el nuevo proyecto al repositorio de GitHub que acabas de crear
- En **Configuración**, actualice las **Variables de entorno** para que coincidan con las de su archivo `env` local
- ¡Desplegar! 🚀

## Referencias

- [Repositorio de GitHub](https://github.com/rishi-raj-jain/better-auth-astro/)
- [Mejor documentación de Auth Astro] (https://wwwbetter-auth.com/docs/integrations/astro)

## Conclusión

En esta guía, habilitó la autenticación de usuario mediante el método de credenciales con la ayuda de Better Auth en una aplicación Astro. También adquirió algo de experiencia en el uso de middleware en Astro y comprendió cómo puede ayudarlo a crear interfaces de usuario dinámicas.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_)