mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-06 12:27:44 +00:00
108 lines
3.5 KiB
Plaintext
108 lines
3.5 KiB
Plaintext
---
|
|
title: Astro Integration
|
|
description: Integrate Better Auth with Astro
|
|
---
|
|
|
|
Better auth comes with first class support for Astro. This guide will show you how to integrate better auth with Astro.
|
|
|
|
Before you start, make sure you have a better auth instance configured. If you haven't done that yet, check out the [installation](/docs/installation).
|
|
|
|
### Mount the handler
|
|
|
|
To enable Better Auth to handle requests, we need to mount the handler to a catch all API route. Create a file inside `/page/api/auth` called `[...all].ts` and add the following code:
|
|
|
|
```ts title="page/api/auth/[...all].ts"
|
|
import { auth } from "~/auth";
|
|
import type { APIRoute } from "astro";
|
|
|
|
export const ALL: APIRoute = async (ctx) => {
|
|
return auth.handler(ctx.request);
|
|
};
|
|
```
|
|
|
|
<Callout>
|
|
You can change the path on your better-auth configuration but it's recommended to keep it as `/api/auth/[...all]`
|
|
</Callout>
|
|
|
|
## Create a client
|
|
|
|
Astro supports multiple frontend frameworks, so you can easily import your client based on the framework you're using.
|
|
|
|
If you're not using a frontend framework, you can still import the vanilla client.
|
|
|
|
|
|
<Tabs items={[ "vanilla", "react", "vue", "svelte", "solid",
|
|
]} defaultValue="react">
|
|
<Tab value="vanilla">
|
|
```ts title="lib/auth-client.ts"
|
|
import { createAuthClient } from "better-auth/client"
|
|
export const client = createAuthClient()
|
|
```
|
|
</Tab>
|
|
<Tab value="react" title="lib/auth-client.ts">
|
|
```ts title="lib/auth-client.ts"
|
|
import { createAuthClient } from "better-auth/react"
|
|
export const client = createAuthClient()
|
|
```
|
|
</Tab>
|
|
<Tab value="vue" title="lib/auth-client.ts">
|
|
```ts title="lib/auth-client.ts"
|
|
import { createAuthClient } from "better-auth/vue"
|
|
export const client = createAuthClient()
|
|
```
|
|
</Tab>
|
|
<Tab value="svelte" title="lib/auth-client.ts">
|
|
```ts title="lib/auth-client.ts"
|
|
import { createAuthClient } from "better-auth/svelte"
|
|
export const client = createAuthClient()
|
|
```
|
|
</Tab>
|
|
<Tab value="solid" title="lib/auth-client.ts">
|
|
```ts title="lib/auth-client.ts"
|
|
import { createAuthClient } from "better-auth/solid"
|
|
export const client = createAuthClient()
|
|
```
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Auth Middleware
|
|
|
|
To protect your routes, you can check if the user is authenticated using the `getSession` method in middleware. Start by creating a `middleware.ts` file in the root of your project and follow the example below:
|
|
|
|
```ts title="middleware.ts"
|
|
import { auth } from "@/auth";
|
|
import { defineMiddleware } from "astro:middleware";
|
|
|
|
export const onRequest = defineMiddleware(async (context, next) => {
|
|
const isAuthed = await auth.api
|
|
.getSession({
|
|
headers: context.request.headers,
|
|
})
|
|
if (context.url.pathname === "/dashboard" && !isAuthed) {
|
|
return context.redirect("/");
|
|
}
|
|
return next();
|
|
});
|
|
```
|
|
|
|
## Getting session on the server inside `.astro` file
|
|
|
|
You can use `auth.api` to call the API from the server side. Here is an example of how you can get the session inside an `.astro` file:
|
|
|
|
```astro
|
|
---
|
|
import { UserCard } from "@/components/user-card";
|
|
import { auth } from "@/auth";
|
|
|
|
const activeSessions = await auth.api
|
|
.listSessions({
|
|
headers: Astro.request.headers,
|
|
});
|
|
|
|
const session = await auth.api.getSession({
|
|
headers: Astro.request.headers,
|
|
});
|
|
---
|
|
|
|
<UserCard initalSession={session} />
|
|
``` |