A modern, full-stack authentication system built with React, Better Auth, and deployed on Cloudflare infrastructure. Features email whitelisting, Google OAuth, and a beautiful glassmorphic UI.

• Clean, minimalist sign-in page with glassmorphism design
• Purple gradient background with smooth animations
• Responsive design that works on all devices
• Loading states and error handling with visual feedback

• Google OAuth integration via Better Auth
• Email whitelist system for controlled access
• Secure cookie-based sessions with SameSite=None and secure flags
• Custom error handling and user-friendly error pages

• Cloudflare Workers for serverless API
• D1 SQLite database for data persistence
• Drizzle ORM for type-safe database operations
• Global edge network for low latency

• TypeScript for type safety across the stack
• Hot module replacement with Vite
• Automated database migrations with Drizzle Kit
• Environment-based configuration

BaGOuthApp/
├── ba-gouth-app/          # Frontend (React + Vite)
│   ├── src/
│   │   ├── routes/        # Page components
│   │   │   ├── SignIn.tsx
│   │   │   ├── AuthError.tsx
│   │   │   └── Blog.tsx
│   │   └── lib/
│   │       └── auth-client.ts  # Better Auth client
│   └── package.json
│
└── ba-gouth-apis/         # Backend (Cloudflare Workers + Hono)
    ├── src/
    │   ├── index.ts       # API routes & auth configuration
    │   └── schemas/       # Drizzle ORM schemas
    ├── migrations/        # Database migrations
    └── package.json

• Bun or Node.js 18+
• Cloudflare account
• Google Cloud Console project with OAuth credentials

git clone https://github.com/Shisui-Genjutsu/React_BetterAuth_GoogleOAuth_Cloudflare_SQLite.git
cd React_BetterAuth_GoogleOAuth_Cloudflare_SQLite

cd ba-gouth-apis
bun install  # or npm install

Create a wrangler.jsonc file:

{
  "name": "ba-gouth-apis",
  "main": "src/index.ts",
  "compatibility_date": "2024-01-01",
  "vars": {
    "CLOUDFLARE_BASE_URL": "https://your-worker.workers.dev",
    "CLOUDFLARE_FRONTEND_BASE_URL": "https://your-app.pages.dev"
  },
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "ba-gouth-db",
      "database_id": "your-database-id"
    }
  ],
  "secrets": [
    "GOOGLE_CLIENT_ID",
    "GOOGLE_CLIENT_SECRET"
  ]
}

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable Google+ API
4. Create OAuth 2.0 credentials:
   • Authorized JavaScript origins: http://localhost:5173, https://your-app.pages.dev
   • Authorized redirect URIs: https://your-worker.workers.dev/api/auth/callback/google

npx wrangler secret put GOOGLE_CLIENT_ID
npx wrangler secret put GOOGLE_CLIENT_SECRET

npx wrangler d1 create ba-gouth-db

Copy the database ID to your wrangler.jsonc.

bun run db:generate  # Generate migrations
bun run db:push      # Apply to local DB
npx wrangler d1 execute ba-gouth-db --remote --file=./migrations/0000_*.sql
npx wrangler d1 execute ba-gouth-db --remote --file=./migrations/0001_*.sql

npx wrangler d1 execute ba-gouth-db --remote --command="INSERT INTO allowed_emails (id, email, created_at) VALUES ('uuid-here', '[email protected]', datetime('now'))"

bun run deploy

cd ../ba-gouth-app
bun install  # or npm install

Create a .env file:

VITE_BETTER_AUTH_URL=https://your-worker.workers.dev

bun run dev

Visit http://localhost:5173/sign-in

bun run deploy

• id: User ID (primary key)
• name: User's full name
• email: User's email address
• emailVerified: Email verification status
• image: Profile picture URL
• createdAt: Account creation timestamp
• updatedAt: Last update timestamp

• id: Session ID (primary key)
• expiresAt: Session expiration time
• token: Session token
• ipAddress: User's IP address
• userAgent: Browser user agent
• userId: Foreign key to user table

• id: Account ID (primary key)
• accountId: OAuth provider account ID
• providerId: OAuth provider (e.g., "google")
• userId: Foreign key to user table
• accessToken: OAuth access token
• refreshToken: OAuth refresh token
• expiresAt: Token expiration time

• id: Record ID (primary key)
• email: Whitelisted email address
• created_at: Timestamp when email was added

• React 19 - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• React Router 7 - Client-side routing
• Better Auth Client - Authentication SDK

• Cloudflare Workers - Serverless runtime
• Hono - Lightweight web framework
• Better Auth - Authentication framework
• Drizzle ORM - Type-safe database toolkit
• D1 - Cloudflare's SQLite database

The backend uses a custom Better Auth plugin to enforce email whitelisting:

const emailWhitelistPlugin = (db: any) => ({
  id: "email-whitelist",
  init: (instance: any) => {
    return {
      options: {
        databaseHooks: {
          user: {
            create: {
              async before(user: any) {
                const email = user.email.toLowerCase()
                const allowedUser = await db.select()
                  .from(schema.allowedEmails)
                  .where(eq(schema.allowedEmails.email, email))
                  .limit(1)

                if (!allowedUser || allowedUser.length === 0) {
                  const error: any = new Error("unauthorized_email")
                  error.status = 403
                  throw error
                }
                return user
              }
            }
          }
        }
      }
    }
  }
})

Configured for cross-origin requests with credentials:

app.use(cors({
  origin: (origin, c) => {
    const allowedOrigins = [
      "http://localhost:5173",
      c.env.CLOUDFLARE_FRONTEND_BASE_URL
    ];
    return origin && allowedOrigins.some(allowed => origin.includes(allowed)) ? origin : null;
  },
  allowMethods: ['POST', 'GET', 'OPTIONS'],
  allowHeaders: ['Content-Type', 'Authorization', 'cookie'],
  credentials: true,
  exposeHeaders: ["set-cookie"]
}))

• Ensure your email is added to the allowed_emails table in D1
• Check that the email matches exactly (case-insensitive comparison is used)

• Verify CLOUDFLARE_FRONTEND_BASE_URL is set correctly in wrangler.jsonc
• Check that your frontend URL is in the trustedOrigins array

• Confirm D1 database is created and bound correctly
• Verify migrations have been applied to the remote database
• Check database ID in wrangler.jsonc matches your D1 database

• Ensure redirect URIs in Google Console match your worker URL exactly
• Check that baseURL and basePath are configured correctly in Better Auth

This project is open source and available under the MIT License.

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Bhaskar G

• GitHub: @Shisui-Genjutsu

Give a ⭐️ if this project helped you!

The application includes a dedicated error page for authentication failures with clear messaging and navigation options.

Built with ❤️ using React, Better Auth, and Cloudflare