Astro Integration

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.

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:

import { auth } from "~/auth";
import type { APIRoute } from "astro";
 
export const ALL: APIRoute = async (ctx) => {
	return auth.handler(ctx.request);
};

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.

import { createAuthClient } from "better-auth/client"
export const client = createAuthClient()

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:

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:

---
import { UserCard } from "@/components/user-card";
import { auth } from "@/auth";
 
const session = await auth.api.getSession({
	headers: Astro.request.headers,
});
---
 
<UserCard initalSession={session} />