Cloudflare + React Router v7 and Better Auth
It seems there is no clear answer on how to actually use Better Auth with Cloudflare D1. As a beginner, I have searched high and low for what is seemingly an impossible answer.
1. The problem starts with Better Auth: Better Auth does not support Cloudflare D1 out of the box
2. Third-party packages are required: Both Kysely and Kysely-D1 are needed to do something with Better Auth and unfortunatly the documentation is non-existent as to how Kysley talks to Cloudflare D1 and Better Auth or why these third-party packages are required
3. Lack of a clear way forward: I have found several resources and claim "Better Auth + Cloudflare D1, just add water" however when reviewing the project setups every Better Auth and Kysely conguration is different
What I'm trying to achieve is simply add Better Auth into a React Router v7 project with the default e-mail/password authentication so I can protect routes.
From the Better Auth documentation I am able to only get to step 3 (https://www.better-auth.com/docs/installation)
- npm install better-auth
- created .dev.vars in project root; add the variables (generate secret key, url is http://localhost:5173)
- created auth.ts in app/utils
Step 4 is to configure the database. There is basically no clear way forward here.
- Further reading leads me to the other supported databases pages, https://www.better-auth.com/docs/adapters/other-relational-databases
- "Better Auth supports a wide range of database dialects out of the box thanks to Kysely." - but as a beginner, I have no idea what this actually means
- Under Kysely Community dialects I see "Cloudflare D1", https://github.com/aidenwallis/kysely-d1
- https://github.com/aidenwallis/kysely-d1 has only 1 instruction, "npm i kysely-d1" but no other context for where to put that code that's in the readme.md file. Replace auth.ts?
Does anybody have a clear way to connect Better Auth with Cloudflare D1 that does not involve other packages like Hono or Drizzle?
Installation | Better Auth
Learn how to configure Better Auth in your project.
Other Relational Databases | Better Auth
Integrate Better Auth with other relational databases.
GitHub
GitHub - aidenwallis/kysely-d1: D1 dialect for Kysely
D1 dialect for Kysely. Contribute to aidenwallis/kysely-d1 development by creating an account on GitHub.
4 Replies
Down the rabbit hole of how to get Better Auth working with Cloudflare D1:
- https://github.com/zpg6/better-auth-cloudflare
- https://hono.dev/examples/better-auth-on-cloudflare
- https://old.reddit.com/r/nextjs/comments/1jjfftz/nextjs_hono_betterauth_cloudflare_d1/
- https://dev.to/atman33/setup-better-auth-with-react-router-cloudflare-d1-2ad4
- https://medium.com/@dasfacc/sveltekit-better-auth-using-cloudflare-d1-and-drizzle-91d9d9a6d0b4
- https://zenn.dev/atman/articles/360c1ea325d2cb
- https://massadas.com/posts/implementing-register-and-login-in-workers-d1/
GitHub
GitHub - zpg6/better-auth-cloudflare: Seamlessly integrate better-a...
Seamlessly integrate better-auth with Cloudflare Workers, D1, Hyperdrive, KV, R2, and geolocation services. CLI for project generation, automated resource provisioning on Cloudflare, and database m...
Better Auth on Cloudflare - Hono
Web framework built on Web Standards for Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Node.js, and others. Fast, but not only fast.
Reddit
From the nextjs community on Reddit: NextJS, Hono, Better-Auth, Clo...
Explore this post and more from the nextjs community
DEV Community
Setup Better Auth with React Router & Cloudflare D1
This document outlines the steps to set up better-auth for authentication in a React Router project...
Medium
Sveltekit better auth using Cloudflare D1 and drizzle
Writing this so you don’t waste as much time as I did figuring this one out. I’ll explain the issue with following the better auth docs and…
I've had this same issue too. It seems the issue is you can't get the database object into auth.ts to run generate and migrate. Some of the discussions you linked reference using a file in the .wrangler directory, but I don't know how this is supposed to work in production. The most realistic looking answer I found to getting d1 working was using kysely here https://github.com/better-auth/better-auth/issues/3552, but this is with openNext, not with react router.
GitHub
better-auth/better-auth
The most comprehensive authentication framework for TypeScript - better-auth/better-auth
Also, I'm convinced the tutorial at https://dev.to/atman33/setup-better-auth-with-react-router-cloudflare-d1-2ad4 is AI generated. it used two ORMs (kysely and drizzle), and I've spotted the code snippets it references in github issues. Maybe it's just researched across many sites, but I doubt it.
DEV Community
Setup Better Auth with React Router & Cloudflare D1
This document outlines the steps to set up better-auth for authentication in a React Router project...
This conversation might be useful for anyone looking to use cloudflare d1 with better-auth https://discord.com/channels/1288403910284935179/1416707955423711363/1417544570022920313