Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung

In diesem Leitfaden erfahren Sie, wie Sie Benutzer in einer Astro-Anwendung mithilfe von Better Auth authentifizieren. Sie durchlaufen den Prozess der Einrichtung eines neuen Astro-Projekts, der Aktivierung des serverseitigen Renderings mithilfe des Vercel-Adapters und der Integration von [Better Auth](https: //wwwbetter-authcom) zur nahtlosen Authentifizierung von Benutzern

Voraussetzungen

Sie benötigen Folgendes:

• Nodejs 18 oder höher
• Ein Neon (Serverless Postgres)-Konto

Inhaltsverzeichnis

• Eine neue Astro-Anwendung erstellen
• Vercel-Adapter in Ihr Astro-Projekt integrieren
• Erstellen Sie ein Neon-Projekt (Serverless Postgres)
• Integrieren Sie Better Auth in Ihr Astro-Projekt
  • Relevante Abhängigkeiten installieren
  • Typdefinitionen einrichten
  • Umgebungsvariablen laden
  • Hilfsdateien für die Verwendung von Better Auth erstellen
  • Relevantes Schema in der Datenbank erstellen
  • Definieren Sie eine Catch-All-Authentifizierungs-API-Route
  • Alle eingehenden Anfragen mit Astro-Middleware abfangen
  • Indexroute erstellen
  • Anmeldeseite erstellen
  • Eine Anmeldeseite erstellen
• Auf Vercel bereitstellen

Erstellen Sie eine neue Astro-Anwendung

Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:

npm create astro@latest my-app

„npm create astro“ ist die empfohlene Methode, um ein Astro-Projekt schnell zu erstellen

Wenn Sie dazu aufgefordert werden, wählen Sie:

• „Leer“, wenn Sie gefragt werden, wie das neue Projekt gestartet werden soll
• „Ja“, wenn Sie gefragt werden, ob Sie Typescript schreiben möchten
• „Streng“, wenn Sie gefragt werden, wie streng Typescript sein soll
• „Ja“, wenn Sie aufgefordert werden, Abhängigkeiten zu installieren – „Ja“, wenn Sie aufgefordert werden, ein Git-Repository zu initialisieren

Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:

cd my-app
npm run dev

Die App sollte auf localhost:4321 ausgeführt werden.

Kommen wir nun zur Aktivierung des serverseitigen Renderings in Ihrer Astro-Anwendung

Integrieren Sie den Vercel-Adapter in Ihr Astro-Projekt

Um Benutzersitzungen mit Better Auth zu authentifizieren und aufrechtzuerhalten, aktivieren Sie serverseitiges Rendering in Ihrem Astro-Projekt über den Vercel-Adapter. Führen Sie den folgenden Befehl aus:

npx astro add vercel

Wenn Sie dazu aufgefordert werden, wählen Sie Folgendes aus:

• „Ja“, wenn Sie gefragt werden, ob die Vercel-Abhängigkeiten installiert werden sollen
• „Ja“, wenn Sie gefragt werden, ob Änderungen an der Astro-Konfigurationsdatei vorgenommen werden sollen

Sie haben das serverseitige Rendering in Astro erfolgreich aktiviert

Kommen wir nun dazu, ein serverloses Postgres als Datenbank einzurichten

Erstellen Sie ein Neon-Projekt (Serverless Postgres).

Wenn Sie noch keins haben, erstellen Sie ein Neon-Projekt (Serverless Postgres). Speichern Sie Ihre Verbindungsdaten einschließlich Ihres Passworts. So gehen Sie vor:

1 Navigieren Sie zur Seite Projekte in der Neon-Konsole 2 Klicken Sie auf Neues Projekt 3 Geben Sie Ihre Projekteinstellungen an und klicken Sie auf Projekt erstellen 4 Erstellen Sie eine „env“-Datei im Stammverzeichnis Ihres Astro-Projekts und definieren Sie einen „DATABASE_URL“-Schlüssel mit der erhaltenen Verbindungszeichenfolge als Wert

Kommen wir nun zur Einrichtung von Better Auth im Astro-Projekt

Integrieren Sie Better Auth in Ihr Astro-Projekt

Relevante Abhängigkeiten installieren

Führen Sie zunächst den folgenden Befehl aus, um die erforderlichen Pakete zum Erstellen der Authentifizierung mit Better Auth zu installieren:

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

Die obigen Befehle installieren Folgendes:

• „better-auth“: Ein Framework-unabhängiges Authentifizierungs- (und Autorisierungs-)Framework für TypeScript
• „pg“: Ein PostgreSQL-Client für Nodejs- „@types/pg“: Typdefinitionen für das „pg“-Paket
• „dotenv-cli“: Ein Paket zum Laden von dotenv-Dateien

Beginnen wir nun damit, Typdefinitionen für das Benutzer- und Sitzungsobjekt in Ihrem Astro-Projekt einzurichten

Richten Sie Typdefinitionen ein

Als nächstes richten Sie Typdefinitionen für „Benutzer“- und „Sitzungs“-Objekte in der Datei „src/envdts“ ein:

/// <reference path="../.astro/types.d.ts" />

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

Kommen wir nun zur Konfiguration des universellen Zugriffs auf Umgebungsvariablen

Umgebungsvariablen laden

Aktualisieren Sie Ihr „packagejson“ so, dass immer dotenv zum Laden der Umgebungsvariablen verwendet wird, sodass sie sowohl über „importmetaenv“- als auch „processenv“-Objekte zugänglich sind:

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

Aktualisieren Sie abschließend die Datei „env“, sodass sie einen eindeutigen Zufallswert für den Schlüssel „BETTER_AUTH_SECRET“ enthält

BETTER_AUTH_SECRET="a-32-character-secret"

Kommen wir nun zum Erstellen von Dienstprogrammdateien für den Zugriff auf Better Auth in Ihrer Astro-Anwendung

Erstellen Sie Hilfsdateien für die Verwendung von Better Auth

Sie erstellen zwei Dienstprogrammdateien, „src/authts“ und „src/auth-clientts“, um auf Better Auth auf der Server- bzw. Clientseite zuzugreifen

In „src/authts“ (Code unten) verwenden Sie einen „Pool“, um eine Verbindung zu Ihrer Postgres-Instanz herzustellen, um die Sitzungen und Benutzerobjekte in der Datenbank beizubehalten und die E-Mail- und Passwort-Authentifizierung zu aktivieren

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

Im „src/auth-clientts“ (Code unten) instanziieren Sie eine neue Instanz mit besserer Authentifizierung, die in den clientseitigen Interaktionen verwendet werden soll

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

export const authClient = createAuthClient()

Erstellen Sie ein relevantes Schema in der Datenbank

Um das Schema gemäß Ihrer in der Datei „src/authts“ in Ihrer Datenbank definierten Konfiguration automatisch zu erstellen, führen Sie den folgenden Befehl aus:

npx @better-auth/cli migrate

Kommen wir nun zur Definition einer API-Route, die Ihnen die Authentifizierung von Benutzern ermöglicht

Definieren Sie eine Catch-All-Authentifizierungs-API-Route

Better Auth übernimmt die schwere Arbeit der Erstellung und Verwaltung der Logik zur Validierung von Anmeldeinformationen sowie der Erstellung (oder Aktualisierung) des Benutzers und relevanter Sitzungsobjekte in der Datenbank. Sie müssen lediglich eine Catch-All-API-Route in Ihrem Astro-Projekt erstellen, wie im folgenden Abschnitt beschrieben src/pages/api/auth/[all]ts`-Datei:

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

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

Kommen wir nun zur Erstellung einer Middleware, die den Benutzer und das Sitzungsobjekt dynamisch aktualisiert, auf die global zugegriffen werden soll

Alle eingehenden Anfragen mithilfe der Astro-Middleware abfangen

Um sicherzustellen, dass für jede Anfrage ein Benutzer und Sitzungsinformationen über die serverseitigen Endpunkte und in „Astro“-Seiten während des serverseitigen Renderns verfügbar sind, erstellen Sie eine Middleware, die Better Auth verwendet, um eine Benutzersitzung zu dekodieren/kodieren aus dem Keks

Erstellen Sie eine Datei „middlewarets“ im Verzeichnis „src“ mit dem folgenden Code:

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

Der Code stellt sicher, dass sowohl Benutzer als auch Sitzung standardmäßig als Null markiert werden und weist die jeweiligen aus der Datenbank erhaltenen Werte mithilfe der entsprechenden Cookies aus der Anfrage zu. Dadurch wissen Sie immer über den korrekten Status der Benutzerauthentifizierung Bescheid

Fahren wir nun mit der Erstellung der Indexroute Ihrer Astro-Anwendung fort

Erstellen Sie die Indexroute

Erstellen Sie eine „indexastro“-Datei im Verzeichnis „src/pages“ mit dem folgenden Code:

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

Der obige Code führt Folgendes aus:

– Leitet den Benutzer zur Anmeldeseite weiter, wenn der Benutzer nicht authentifiziert ist – Zeigt die im „Benutzer“-Objekt gespeicherten Informationen zum authentifizierten Benutzer an – Zeigt eine Abmeldeschaltfläche an, die beim Klicken das „SignOut“-Dienstprogramm von Better Auth aufruft, um den Benutzer abzumelden

Beginnen wir nun mit der Erstellung einer Anmelderoute in Ihrer Astro-Anwendung

Erstellen Sie eine Anmeldeseite

Erstellen Sie eine „signinastro“-Datei im Verzeichnis „src/pages“ mit dem folgenden Code:

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

Der obige Code führt Folgendes aus:

– Leitet den Benutzer zur Indexseite weiter, wenn der Benutzer bereits authentifiziert ist – Erstellt ein Anmeldeformular und hängt den Submit-Ereignis-Listener an – Versucht, den Benutzer mit der angegebenen E-Mail-Adresse und dem angegebenen Passwort anzumelden

Beginnen wir nun mit der Erstellung einer Anmelderoute in Ihrer Astro-Anwendung

Erstellen Sie eine Anmeldeseite

Erstellen Sie eine Anmeldungastro“-Datei im Verzeichnis „src/pages“ mit dem folgenden Code:

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

Der obige Code führt Folgendes aus:

– Leitet den Benutzer zur Indexseite um, wenn der Benutzer bereits authentifiziert ist – Erstellt ein Anmeldeformular und hängt den Submit-Ereignis-Listener an – Es wird versucht, den Benutzer mit dem angegebenen Namen, der E-Mail-Adresse und dem Passwort anzumelden

Nun stellen wir die Anwendung auf Vercel bereit

Auf Vercel bereitstellen

Der Code kann nun auf Vercel bereitgestellt werden. Führen Sie zur Bereitstellung die folgenden Schritte aus:

• Beginnen Sie mit der Erstellung eines GitHub-Repositorys, das den Code Ihrer App enthält
• Navigieren Sie dann zum Vercel-Dashboard und erstellen Sie ein Neues Projekt
• Verknüpfen Sie das neue Projekt mit dem GitHub-Repository, das Sie gerade erstellt haben
• Aktualisieren Sie in Einstellungen die Umgebungsvariablen so, dass sie mit denen in Ihrer lokalen „env“-Datei übereinstimmen
• Einsetzen! 🚀

Referenzen

• GitHub-Repository
• Better Auth Astro-Dokumentation

Abschluss

In diesem Leitfaden haben Sie die Benutzerauthentifizierung über die Anmeldeinformationsmethode mithilfe von Better Auth in einer Astro-Anwendung aktiviert. Sie haben auch einige Erfahrungen mit der Verwendung von Middleware in Astro gesammelt und verstanden, wie diese Ihnen beim Aufbau dynamischer Benutzeroberflächen helfen kann

Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf [Twitter] kontaktieren (https://twittercom/direct_messages/create/rishi_raj_jain_).