---
title: "Authentifizieren von Benutzern in Astro mit besserer Authentifizierung"
description: "Wie authentifiziert man Benutzer in der Astro-Anwendung mithilfe von Better Auth?"
source: "https://www.launchfa.st/de/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" />

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-auth.com) zur nahtlosen Authentifizierung von Benutzern

## Voraussetzungen

Sie benötigen Folgendes:

- [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) oder höher
- Ein [Neon](https://neontech) (Serverless Postgres)-Konto

## Inhaltsverzeichnis

- [Eine neue Astro-Anwendung erstellen](#create-a-new-astro-application)
- [Vercel-Adapter in Ihr Astro-Projekt integrieren](#integrate-vercel-adapter-in-your-astro-project)
- [Erstellen Sie ein Neon-Projekt (Serverless Postgres)](#create-a-neon-serverless-postgres-project)
- [Integrieren Sie Better Auth in Ihr Astro-Projekt](#integrate-better-auth-in-your-astro-project)
  - [Relevante Abhängigkeiten installieren](#install-relevant-dependencies)
  - [Typdefinitionen einrichten](#set-up-type-definitions)
  - [Umgebungsvariablen laden](#load-environment-variables)
  - [Hilfsdateien für die Verwendung von Better Auth erstellen](#create-helper-files-for-using-better-auth)
  - [Relevantes Schema in der Datenbank erstellen](#create-relevant-schema-in-the-database)
  - [Definieren Sie eine Catch-All-Authentifizierungs-API-Route](#define-a-catch-all-authentication-api-route)
  - [Alle eingehenden Anfragen mit Astro-Middleware abfangen](#intercept-all-incoming-requests-using-astro-middleware)
  - [Indexroute erstellen](#create-the-index-route)
  - [Anmeldeseite erstellen](#create-a-sign-in-page)
  - [Eine Anmeldeseite erstellen](#create-a-sign-up-page)
- [Auf Vercel bereitstellen](#deploy-to-vercel)

## Erstellen Sie eine neue Astro-Anwendung

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

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

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

Die App sollte auf [localhost:4321](http://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:

```bash
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](https://consoleneontech/app/projects) 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:

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

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

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:

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

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

```bash title=".env"
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 

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

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

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

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:

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

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

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:

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

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:

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

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:

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

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:

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

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](https://github.com/rishi-raj-jain/better-auth-astro/)
- [Better Auth Astro-Dokumentation](https://wwwbetter-auth.com/docs/integrations/astro)

## 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://twitter.com/direct_messages/create/rishi_raj_jain_).