Google OAuth Login

Add "Sign in with Google" to your Worker app. No auth libraries, no frameworks — just the raw OAuth 2.0 flow running at the edge. By the end you'll have a Worker that authenticates users via their Google account and stores sessions in KV.

How OAuth 2.0 Works

The flow has 4 steps:

1. User clicks "Sign in with Google" → your Worker redirects them to Google's auth page
2. User authorizes → Google redirects back to your Worker with an authorization code
3. Worker exchanges code for tokens → calls Google's token endpoint server-side
4. Worker reads user info from the token → creates a session, sets a cookie

Step 1: Create Google OAuth Credentials

1. Go to Google Cloud Console → Credentials
2. Create a new project (or select existing)
3. Click Create Credentials → OAuth client ID
4. Application type: Web application
5. Add an Authorized redirect URI:
   • For local dev: http://localhost:8787/auth/callback
   • For production: https://your-worker.your-subdomain.workers.dev/auth/callback
   • (Or your custom domain: https://app.yourdomain.com/auth/callback)
6. Copy the Client ID and Client Secret

Step 2: Set Up the Worker Project

npm create cloudflare@latest -- google-auth-worker
cd google-auth-worker

Store your secrets securely (never in code):

npx wrangler secret put GOOGLE_CLIENT_ID
npx wrangler secret put GOOGLE_CLIENT_SECRET

Add a KV namespace for sessions:

npx wrangler kv namespace create SESSIONS

Update wrangler.jsonc:

{
  "name": "google-auth-worker",
  "main": "src/index.js",
  "compatibility_date": "2024-01-01",
  "kv_namespaces": [
    {
      "binding": "SESSIONS",
      "id": "<your-namespace-id>"
    }
  ]
}

# .dev.vars (add to .gitignore!)
GOOGLE_CLIENT_ID=your-client-id-here
GOOGLE_CLIENT_SECRET=your-client-secret-here

Step 3: The Complete OAuth Worker

Here's the full implementation — 4 routes handling the entire flow:

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const REDIRECT_URI = `${url.origin}/auth/callback`;

    // Route: Start OAuth flow
    if (url.pathname === "/auth/login") {
      const params = new URLSearchParams({
        client_id: env.GOOGLE_CLIENT_ID,
        redirect_uri: REDIRECT_URI,
        response_type: "code",
        scope: "openid email profile",
        access_type: "offline",
        prompt: "consent",
      });
      return Response.redirect(
        `https://accounts.google.com/o/oauth2/v2/auth?${params}`
      );
    }

    // Route: OAuth callback — exchange code for tokens
    if (url.pathname === "/auth/callback") {
      const code = url.searchParams.get("code");
      if (!code) {
        return new Response("Missing authorization code", { status: 400 });
      }

      // Exchange code for tokens
      const tokenRes = await fetch("https://oauth2.googleapis.com/token", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: new URLSearchParams({
          code,
          client_id: env.GOOGLE_CLIENT_ID,
          client_secret: env.GOOGLE_CLIENT_SECRET,
          redirect_uri: REDIRECT_URI,
          grant_type: "authorization_code",
        }),
      });

      const tokens = await tokenRes.json();
      if (!tokens.access_token) {
        return new Response("Token exchange failed", { status: 400 });
      }

      // Fetch user info from Google
      const userRes = await fetch(
        "https://www.googleapis.com/oauth2/v2/userinfo",
        { headers: { Authorization: `Bearer ${tokens.access_token}` } }
      );
      const user = await userRes.json();

      // Create a session
      const sessionId = crypto.randomUUID();
      await env.SESSIONS.put(sessionId, JSON.stringify({
        email: user.email,
        name: user.name,
        picture: user.picture,
        created: Date.now(),
      }), { expirationTtl: 86400 }); // 24 hours

      // Set session cookie and redirect to app
      return new Response(null, {
        status: 302,
        headers: {
          Location: "/",
          "Set-Cookie": `session=${sessionId}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=86400`,
        },
      });
    }

    // Route: Logout
    if (url.pathname === "/auth/logout") {
      const session = getSession(request);
      if (session) await env.SESSIONS.delete(session);
      return new Response(null, {
        status: 302,
        headers: {
          Location: "/",
          "Set-Cookie": "session=; Path=/; Max-Age=0",
        },
      });
    }

    // Route: Home page — show login state
    const session = getSession(request);
    const user = session
      ? JSON.parse(await env.SESSIONS.get(session) || "null")
      : null;

    if (user) {
      return new Response(`
        <!DOCTYPE html>
        <html>
        <body style="font-family: system-ui; max-width: 600px; margin: 2rem auto; padding: 0 1rem;">
          <h1>Welcome, ${user.name}!</h1>
          <p>Email: ${user.email}</p>
          <img src="${user.picture}" width="80" style="border-radius: 50%;">
          <p><a href="/auth/logout">Sign out</a></p>
        </body>
        </html>
      `, { headers: { "Content-Type": "text/html" } });
    }

    return new Response(`
      <!DOCTYPE html>
      <html>
      <body style="font-family: system-ui; max-width: 600px; margin: 2rem auto; padding: 0 1rem;">
        <h1>My App</h1>
        <p><a href="/auth/login">Sign in with Google</a></p>
      </body>
      </html>
    `, { headers: { "Content-Type": "text/html" } });
  },
};

// Helper: extract session ID from cookie
function getSession(request) {
  const cookie = request.headers.get("Cookie") || "";
  const match = cookie.match(/session=([^;]+)/);
  return match ? match[1] : null;
}

Understanding the Flow

Step 4: Test Locally

npx wrangler dev

Visit http://localhost:8787 and click "Sign in with Google". You'll be redirected to Google, then back to your local Worker with your profile info displayed.

Step 5: Deploy

npx wrangler deploy

After deploying, add your production URL (https://google-auth-worker.<your-account>.workers.dev/auth/callback) to Google's authorized redirect URIs.

Security Notes

• HttpOnly cookie — JavaScript can't read the session cookie (prevents XSS theft)
• Secure flag — cookie only sent over HTTPS (automatic with Cloudflare)
• SameSite=Lax — prevents CSRF for most cases
• Session expiry — KV's expirationTtl auto-deletes sessions after 24 hours
• Secrets in env — client secret never in source code

Free Tier Impact

That's ~1,000 new logins per day and 100,000 authenticated page views — more than enough for personal projects.