Skip to content

Conversation

@RyanTamulevicz
Copy link

@RyanTamulevicz RyanTamulevicz commented Oct 19, 2025

Let me know if you have an interest in this. I can add an example if this is something you are interested in adding support for.

Setup for this:

  1. Setup fresh Astro project with npm create astro@latest
  2. Add tailwind + react (I don't think react is necessarily required for this though)
  3. Setup Convex as normal
  4. Setup better-auth + convex mostly the nextjs way, but use the astro version of the adaptor instead of nextjs where applies.

It seemingly just works, barring anything unexpected as of now.

The normal Astro + Convex + React wrapper would be required which can be written like:

import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
import { ConvexReactClient } from "convex/react";
import type { FunctionComponent, JSX } from "react";
import { authClient } from "./auth-client";

// Initialized once so all components share the same client.
const convex = new ConvexReactClient(
	import.meta.env.PUBLIC_CONVEX_URL as string,
	{
		// Optionally pause queries until the user is authenticated
		expectAuth: true,
	},
);

export function withConvexProvider<Props extends JSX.IntrinsicAttributes>(
	Component: FunctionComponent<Props>,
) {
	return function WithConvexProvider(props: Props) {
		return (
			<ConvexBetterAuthProvider client={convex} authClient={authClient}>
				<Component {...props} />
			</ConvexBetterAuthProvider>
		);
	};
}

This needs to wrap every react component that is called in an astro file to give context to the react component.


By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@erquhart
Copy link
Collaborator

Thanks for this, Ryan! Picking up from our conversation in Discord, I'd say following the pattern used for SvelteKit is best - that allows Astro support to be documented in the main docs without adding it to the support load, which we're not quite ready for. The maintainer of the SvelteKit adapter published a package with Svelte specific code and opened a PR consisting of docs changes, you can reference here: #91

@RyanTamulevicz
Copy link
Author

Sounds good! That makes complete sense. I started reviewing the the Svelte implementation, and I will build something.

I will say I am finding that this allows for multiple framework support out of the box so far. I was able to, without changing any of the code for better-auth (outside of the specifics for react to svelte in convex for example) I was able to switch from react to svelte, so I would imagine Vue and anything supported by better-auth should theoretically work pretty simply as well within Astro, so that is exciting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants