Astro + React + Webflow Cloud — Auth Portal

A minimal user-authed portal template built with Astro, React islands, and the Cloudflare adapter, set up for Webflow Cloud. Includes a login screen, a session-protected dashboard, and a sign-out flow — all client-side with mock credentials.

Project structure

.
├── astro.config.mjs
├── package.json
├── public/
│   └── favicon.svg
├── src/
│   ├── auth/
│   │   ├── AuthApp.tsx
│   │   ├── Chrome.tsx
│   │   ├── Dashboard.tsx
│   │   ├── LoginForm.tsx
│   │   ├── auth.css
│   │   ├── auth.ts
│   │   ├── types.ts
│   │   ├── useSession.ts
│   │   ├── users.ts
│   │   └── webflowLogo.ts
│   ├── env.d.ts
│   └── pages/
│       └── index.astro
├── tsconfig.json
├── webflow.json
├── worker-configuration.d.ts
└── wrangler.json

Commands

Command	Action
npm install	Installs dependencies.
npm run dev	Starts the Astro dev server at http://localhost:4321.
npm run build	Builds the production site.
npm run preview	Runs astro build then wrangler dev for a local preview.
npm run deploy	Deploys with webflow cloud deploy.
npm run cf-typegen	Generates Wrangler TypeScript types.

What's modeled

• Login screen with email/password form and inline error feedback.
• Hardcoded demo users in src/auth/users.ts (replace with a real user store when you adopt the template).
• Client-side session stored in sessionStorage via the useSession hook — survives reloads, cleared on tab close.
• Auth gate: AuthApp shows the login form when no user is signed in, and the dashboard otherwise.
• Dashboard shows the signed-in user's name, email, role, plus a sign-out button.

The whole auth experience is a single hydrated React island (AuthApp with client:load); the rest of the page is static HTML.

Demo credentials

Email	Password	Role
demo@webflow.com	demo1234	member
admin@webflow.com	admin1234	admin

Learn more

• Astro documentation
• Webflow Cloud