A Webflow Cloud example app to showcase user authentication functionality. Built with Astro, this app integrates Webflow components via DevLink and uses Better Auth for secure user authentication with database persistence.
- User Authentication: Complete sign-up and login functionality with secure session management
- Database Integration: Uses Drizzle ORM with D1 database for user data persistence
- Webflow Integration: Uses Webflow DevLink components
- Session Management: Secure session handling with middleware protection
- Responsive Design: Built with Tailwind CSS and Webflow components for optimal user experience
- Webflow Cloud - Infrastructure for hosting the webapp alongside a Webflow site, including Cloudflare D1 dependencies
- Astro.js - Modern web framework
- Better Auth - Authentication library with session management
- Drizzle ORM - Type-safe database ORM
- Tailwind CSS - Utility-first CSS framework
- Webflow DevLink - Syncs design system components from the Webflow site to React components
Make sure you have the following before running the app locally:
- Install Node.js 18+ / npm / Git
- Webflow account (sign up for free)
- Install the Webflow CLI
- Fork this repo into your own repositories so you have a copy of this project to work with
- Clone the repo down to your local machine
cd auth-cloud-webapp/astro
Feel free to use your own Webflow site to attach this Webflow Cloud project to! If you need a starter site template, clone the Astral Fund demo site into your workspace.
Once you have a Webflow site you want to deploy this app on, generate an auth token to use for syncing Webflow components with Devlink:
- In the terminal, run
webflow auth login --forceto authorize the Webflow Cloud app to your site - Once complete, you should see a
.envfile with theWEBFLOW_SITE_API_TOKENandWEBFLOW_SITE_IDvariables filled in
- In your editor, duplicate
.dev.vars.template, rename the copy to.dev.vars, and fill in the required values:- Set the
WEBFLOW_SITE_IDandWEBFLOW_SITE_API_TOKENvariables with the relevant values from.env BETTER_AUTH_URL: Set this to your localhost portBETTER_AUTH_SECRET: Run the following command in the terminal and set this variable value to the outputopenssl rand -base64 32
- Set the
Initialize your Cloudflare D1 database:
npm run db:generate
npm run db:apply:localnpm installnpm run devThe development server will start and automatically show you where to navigate:
🚀 Starting development server...
📍 App will be available at: http://localhost:4321/app
Open http://localhost:4321/app in your browser to see the authentication app. You can:
- Sign up for a new account at
/app/signup - Log in with existing credentials at
/app/login - Access the protected homepage after authentication at
/app
Note: The mount/base path for this Webflow Cloud app is at /app by default.
This example repo has components already in place from the Webflow template site, but if you make any changes to the components on the Webflow site, you'll need to sync the changes down using the webflow-cli devlink tool.
Once your .env is set up from step 3, run webflow devlink sync in the terminal.
Once everything locally works OK, it's time to build and deploy the app to your Webflow site. First, push up any code changes made to the project to the forked remote GitHub repo.
For more detailed guidance on creating a Webflow Cloud app, see docs here for a step-by-step.
In your Webflow site settings, navigate to the Webflow Cloud tab, click "Install GitHub App", and follow the prompts so Webflow can access your forked repo.
Back in the Webflow Cloud page, click the "Create New Project" button and follow the prompts accordingly to add your project name, and the location of your GitHub repo. Expand the Advanced settings section and in the directory path input, add the subfolder name of this project: betterauth-astro so the Cloud app ensures to pull code from this subdirectory.
When you are prompted to create an Environment:
- Branch - Select the GitHub branch you're working from (usually
main) - Mount Path - Enter the mount path where you want the app to live (e.g.,
/appby default)
After the project is created, click "Publish" to re-publish your Webflow site. Once publishing completes, open your Webflow Cloud project, navigate into the Environments, then select the main branch name to view Deployments.
On the Deployments page, open the "Environment Variables" tab and add the following environment variables from your .dev.vars file:
BETTER_AUTH_URL: set the value to the domain of your Webflow site (i.e.https://auth-cloud-test.webflow.io) as opposed to localhostBETTER_AUTH_SECRET: set the value to a new value by running the following command in the terminal again:openssl rand -base64 32. Make sure to mark it as a secret type before creating the variable in Webflow.
Click the "Deploy latest commit" button to build and deploy the latest app from your repo.
After a few minutes, you can click the "Environment URL", which should be where the app is deployed to on your site (i.e. https://{your-site-here}.webflow.io/app).
At this point, you should be able to test out the sign up/login flow as you did on localhost and verify the functionality works the same. If so, congrats! You've deployed a Webflow Cloud app with an authentication flow 🎉
If you make additional changes to your project, simply push them up to your repo on main, and Webflow will automatically kick off a new deployment with your changes. Also, if your deployment build fails for any reason, check the "Deployment History" for more logs.
To check a build locally before Webflow kicks off a build and deploys the latest changes, simply run the following commands:
npm run previewIf you modify the database schema:
- Generate new migrations:
npm run db:generate
- Apply the new migrations:
npm run db:apply:local
Commit and push up the changes, and Webflow Cloud will handle applying the migrations to the hosted D1 instance for your Webflow Cloud app.
Feel free to submit issues and enhancement requests!
This project is MIT licensed.