client apis/astro

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Mount Better Auth handler in Astro API route

Create a file at `pages/api/auth/[...all].ts` with an `ALL` export that calls `auth.handler(ctx.request)`. The handler receives an Astro APIRoute context object. Optionally set the 'x-forwarded-for' header on the request for rate limiting by using `ctx.clientAddress`. The path can be customized in the Better Auth configuration but `/api/auth/[...all]` is recommended.

Create Astro client for vanilla, React, Vue, Svelte, or Solid

Import `createAuthClient` from the framework-specific Better Auth package and export it. For vanilla JavaScript use `better-auth/client`. For React use `better-auth/react`. For Vue use `better-auth/vue`. For Svelte use `better-auth/svelte`. For Solid use `better-auth/solid`. Each client is created the same way: `createAuthClient()`.

Type Astro locals for user and session

Declare the `App.Locals` interface in `env.d.ts` with two properties: `user` of type `import('better-auth').User | null` and `session` of type `import('better-auth').Session | null`.

Implement Astro middleware to set user and session in locals

Create a `middleware.ts` file in the project root using `defineMiddleware` from 'astro:middleware'. In the `onRequest` handler, call `auth.api.getSession()` with `headers: context.request.headers`. If a session is returned, set `context.locals.user` and `context.locals.session` from the response; otherwise set both to null. Return `next()` to continue the request.

Access session data server-side in Astro components

Use `Astro.locals.user` and `Astro.locals.session` inside the frontmatter of `.astro` files to check authentication status. These values are populated by the middleware. Use `Astro.redirect()` to redirect unauthenticated users to a login page.

Astro API route handler example

Example code for `pages/api/auth/[...all].ts`: ```ts import { auth } from "~/auth"; import type { APIRoute } from "astro"; export const ALL: APIRoute = async (ctx) => { // If you want to use rate limiting, make sure to set the 'x-forwarded-for' header to the request headers from the context // ctx.request.headers.set("x-forwarded-for", ctx.clientAddress); return auth.handler(ctx.request); }; ```

Astro React client creation example

Example code for `lib/auth-client.ts` with React: ```ts import { createAuthClient } from "better-auth/react" export const authClient = createAuthClient() ```

Astro middleware getSession example

Example code for `middleware.ts`: ```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 (isAuthed) { context.locals.user = isAuthed.user; context.locals.session = isAuthed.session; } else { context.locals.user = null; context.locals.session = null; } return next(); }); ```

Access session in Astro component example

Example code showing how to access session in an `.astro` file: ```astro --- import { UserCard } from "@/components/user-card"; const session = () => { if (Astro.locals.session) { return Astro.locals.session; } else { // Redirect to login page if the user is not authenticated return Astro.redirect("/login"); } } --- <UserCard initialSession={session} /> ```

Give your agent this brain