Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung

Authenticating users in Astro with Better Auth

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-authcom) para autenticar usuarios sin problemas

Requisitos previos

Necesitará lo siguiente:

Nodejs 18 o posterior
Una cuenta Neon (Postgres sin servidor)

Tabla de contenido

Crear 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)
Integra Better Auth en tu proyecto Astro
Implementar en Vercel

Crea una nueva aplicación Astro

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

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:

cd my-app
npm run dev

La aplicación debería estar ejecutándose en 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:

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

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:

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

{
  "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

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.

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.

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:

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:

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:

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:

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

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

---
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
[Mejor documentación de Auth Astro] (https://wwwbetter-authcom/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