A simple authentication scaffold using NextJS, OpenNextJS Cloudflare, Drizzle ORM, D1, and BetterAuth.
This example demonstrates a basic web application with user signup, login, and a protected homepage.
- Clone the repo
git clone https://github.com/webflow/cloud-d1-examples.git - Remove the current git repo so you can create your own
rm -rf .git - Navigate to the scaffold
cd cloud-d1-examples/nextjs/betterauth-d1-example npm install
- Push to a new GitHub repository
- Create a Cloud project + environment
- Copy and send your
environmentIdto Slack #triage-wf-cloud to be added to the feature flag (we can get theenvironmentIdfrom the URL on yourEnvironment detailspage or from your Webflow site domain) - Add environment variables to your environment:
BETTER_AUTH_URL=https://your-domain.webflow.io(don't include a trailing/nor your mount path)BETTER_AUTH_SECRET= Run commandopenssl rand -base64 32to generate a random secret locally
- Deploy the project by pushing a new commit or clicking "Deploy from latest commit" in the Webflow Cloud dashboard
If you want to run locally (not required) follow these steps
-
Copy
.dev.vars.templateto.dev.varsand fill in the required values:BETTER_AUTH_SECRET=YOUR_SECRET_HERE BETTER_AUTH_URL=http://localhost:8787- Generate
BETTER_AUTH_SECRETusingopenssl rand -base64 32
- Generate
-
Apply local database migrations:
npm run db:apply:local
-
Start the preview:
npm run preview
That's it! The application is now running locally, with a mimicked D1 database.
If you modify the database schema:
- Generate new migrations:
npm run db:generate
- Apply the new migrations:
npm run db:apply:local