Vite + React + Webflow Cloud — Auth Portal

A minimal user-authed portal template: a Vite + React + TypeScript app served by a Hono worker on Cloudflare, configured for Webflow Cloud. Includes a login screen, a session-protected dashboard, and a sign-out flow — all client-side with mock credentials.

Project structure

.
├── index.html
├── package.json
├── public/
│   └── favicon.svg
├── src/
│   ├── App.tsx
│   ├── auth/
│   │   ├── AuthApp.tsx
│   │   ├── Chrome.tsx
│   │   ├── Dashboard.tsx
│   │   ├── LoginForm.tsx
│   │   ├── auth.css
│   │   ├── auth.ts
│   │   ├── types.ts
│   │   ├── useSession.ts
│   │   ├── users.ts
│   │   ├── webflowLogo.ts
│   │   └── __tests__/auth.test.ts
│   ├── globals.d.ts
│   ├── index.css
│   ├── main.tsx
│   └── worker.ts
├── tsconfig.json
├── vite.config.ts
├── vitest.config.ts
├── webflow.json
├── worker-configuration.d.ts
└── wrangler.json

Commands

Command	Action
npm install	Install dependencies.
npm run dev	Start the Vite dev server at http://localhost:5173.
npm run build	Production-build the app to dist/.
npm run preview	Serve the production build locally.
npm run test	Run the Vitest unit tests for the auth logic.
npm run deploy	Deploys with webflow cloud deploy.

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.
• Pure-function credential check in src/auth/auth.ts with Vitest tests covering happy path, invalid password, unknown user, case-insensitive email, and password trimming behavior.

Demo credentials

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

A small Hono worker (src/worker.ts) serves the built React app via the Cloudflare ASSETS binding.

Learn more

• Vite documentation
• Webflow Cloud