---
phase: 01-foundation-auth
plan: 04
type: execute
wave: 2
depends_on: ["01-01", "01-02"]
files_modified:
  - src/components/auth/google-button.tsx
  - src/app/(auth)/login/page.tsx
  - src/app/(auth)/register/page.tsx
  - docs/GOOGLE_OAUTH_SETUP.md
autonomous: true
user_setup:
  - service: google-cloud
    why: "Google OAuth for social login"
    env_vars: []
    dashboard_config:
      - task: "Create OAuth 2.0 Client ID"
        location: "Google Cloud Console -> APIs & Services -> Credentials"
      - task: "Add authorized JavaScript origins"
        location: "OAuth Client -> Authorized JavaScript origins"
        value: "http://localhost:3000, https://your-domain.com"
      - task: "Add authorized redirect URI"
        location: "OAuth Client -> Authorized redirect URIs"
        value: "https://<project-ref>.supabase.co/auth/v1/callback"
  - service: supabase
    why: "Enable Google OAuth provider"
    env_vars: []
    dashboard_config:
      - task: "Enable Google provider"
        location: "Supabase Dashboard -> Authentication -> Providers -> Google"
      - task: "Paste Google Client ID and Secret"
        location: "Same settings page"

must_haves:
  truths:
    - "User can click 'Accedi con Google' button"
    - "User is redirected to Google consent screen"
    - "User returns to app authenticated after consent"
    - "User session persists after Google login"
  artifacts:
    - path: "src/components/auth/google-button.tsx"
      provides: "Google Sign-In button component"
      exports: ["GoogleSignInButton"]
    - path: "docs/GOOGLE_OAUTH_SETUP.md"
      provides: "Setup instructions for Google OAuth"
      contains: "Google Cloud Console"
  key_links:
    - from: "src/components/auth/google-button.tsx"
      to: "Supabase Auth"
      via: "signInWithOAuth"
      pattern: "signInWithOAuth.*google"
    - from: "Google OAuth"
      to: "src/app/auth/callback/route.ts"
      via: "redirect after consent"
      pattern: "auth/callback"
---

<objective>
Implement Google OAuth login allowing users to sign in with their Google account.

Purpose: Enable social login per AUTH-02 requirement. Google OAuth provides frictionless registration/login.

Output: Working Google Sign-In button that authenticates users and creates their profile automatically.
</objective>

<execution_context>
@C:\Users\miche\.claude/get-shit-done/workflows/execute-plan.md
@C:\Users\miche\.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/phases/01-foundation-auth/01-RESEARCH.md
@.planning/phases/01-foundation-auth/01-01-SUMMARY.md
@.planning/phases/01-foundation-auth/01-02-SUMMARY.md
</context>

<tasks>

<task type="auto">
  <name>Task 1: Create Google Sign-In button component</name>
  <files>
    src/components/auth/google-button.tsx
  </files>
  <action>
    Create the Google Sign-In button at src/components/auth/google-button.tsx:

    ```typescript
    'use client'

    import { createClient } from '@/lib/supabase/client'
    import { Button } from '@/components/ui/button'
    import { useState } from 'react'

    // Simple Google icon SVG
    function GoogleIcon({ className }: { className?: string }) {
      return (
        <svg className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
            fill="#4285F4"
          />
          <path
            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
            fill="#34A853"
          />
          <path
            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
            fill="#FBBC05"
          />
          <path
            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
            fill="#EA4335"
          />
        </svg>
      )
    }

    export function GoogleSignInButton() {
      const [loading, setLoading] = useState(false)
      const supabase = createClient()

      async function handleGoogleSignIn() {
        setLoading(true)

        const { error } = await supabase.auth.signInWithOAuth({
          provider: 'google',
          options: {
            redirectTo: `${window.location.origin}/auth/callback`,
            queryParams: {
              access_type: 'offline',
              prompt: 'consent',
            },
          },
        })

        if (error) {
          console.error('Google sign-in error:', error)
          setLoading(false)
        }
        // Note: No need to handle success - user is redirected to Google
      }

      return (
        <Button
          type="button"
          variant="outline"
          onClick={handleGoogleSignIn}
          disabled={loading}
          className="w-full flex items-center justify-center gap-2"
        >
          <GoogleIcon className="w-5 h-5" />
          {loading ? 'Reindirizzamento...' : 'Accedi con Google'}
        </Button>
      )
    }
    ```

    Key points:
    - Uses 'use client' since it needs browser APIs
    - Uses createClient from lib/supabase/client.ts (browser client)
    - redirectTo points to /auth/callback which handles the code exchange
    - access_type: 'offline' requests refresh token
    - prompt: 'consent' ensures user always sees consent screen (good for debugging)
    - Italian button text per project requirement
  </action>
  <verify>
    - Component file exists
    - No TypeScript errors
    - Button renders with Google icon
  </verify>
  <done>
    Google Sign-In button component created with proper OAuth configuration.
  </done>
</task>

<task type="auto">
  <name>Task 2: Add Google button to login and register pages</name>
  <files>
    src/app/(auth)/login/page.tsx
    src/app/(auth)/register/page.tsx
    src/components/auth/login-form.tsx
    src/components/auth/register-form.tsx
  </files>
  <action>
    Update login page to include Google button. Modify src/app/(auth)/login/page.tsx:

    ```typescript
    import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
    import { LoginForm } from '@/components/auth/login-form'
    import { GoogleSignInButton } from '@/components/auth/google-button'

    export default function LoginPage() {
      return (
        <Card>
          <CardHeader className="text-center">
            <CardTitle>Accedi a Leopost</CardTitle>
            <CardDescription>
              Inserisci le tue credenziali per continuare
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <GoogleSignInButton />

            <div className="relative">
              <div className="absolute inset-0 flex items-center">
                <span className="w-full border-t border-gray-300" />
              </div>
              <div className="relative flex justify-center text-xs uppercase">
                <span className="bg-white px-2 text-gray-500">oppure</span>
              </div>
            </div>

            <LoginForm />
          </CardContent>
        </Card>
      )
    }
    ```

    Update register page similarly. Modify src/app/(auth)/register/page.tsx:

    ```typescript
    import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
    import { RegisterForm } from '@/components/auth/register-form'
    import { GoogleSignInButton } from '@/components/auth/google-button'

    export default function RegisterPage() {
      return (
        <Card>
          <CardHeader className="text-center">
            <CardTitle>Crea il tuo account</CardTitle>
            <CardDescription>
              Inizia a usare Leopost gratuitamente
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <GoogleSignInButton />

            <div className="relative">
              <div className="absolute inset-0 flex items-center">
                <span className="w-full border-t border-gray-300" />
              </div>
              <div className="relative flex justify-center text-xs uppercase">
                <span className="bg-white px-2 text-gray-500">oppure</span>
              </div>
            </div>

            <RegisterForm />
          </CardContent>
        </Card>
      )
    }
    ```

    The divider uses "oppure" (Italian for "or") to separate social login from email form.
    Google button appears FIRST (above the form) as it's the faster option.
  </action>
  <verify>
    - Login page shows Google button above email form
    - Register page shows Google button above email form
    - "oppure" divider separates the two methods
    - Pages render without errors
  </verify>
  <done>
    Google Sign-In button integrated into login and registration pages.
  </done>
</task>

<task type="auto">
  <name>Task 3: Document Google OAuth setup process</name>
  <files>
    docs/GOOGLE_OAUTH_SETUP.md
  </files>
  <action>
    Create comprehensive setup documentation at docs/GOOGLE_OAUTH_SETUP.md:

    ```markdown
    # Google OAuth Setup Guide

    This guide explains how to configure Google OAuth for Leopost.

    ## Prerequisites

    - Google Cloud account
    - Supabase project created
    - Access to Supabase Dashboard

    ## Step 1: Google Cloud Console Setup

    1. Go to [Google Cloud Console](https://console.cloud.google.com/)

    2. Create a new project or select existing one

    3. Navigate to **APIs & Services > Credentials**

    4. Click **Create Credentials > OAuth client ID**

    5. If prompted, configure the OAuth consent screen:
       - User Type: External
       - App name: Leopost
       - User support email: your email
       - Developer contact: your email
       - Scopes: email, profile, openid (default)

    6. Create OAuth Client ID:
       - Application type: **Web application**
       - Name: Leopost Web Client

    7. Add **Authorized JavaScript origins**:
       ```
       http://localhost:3000
       https://your-production-domain.com
       ```

    8. Add **Authorized redirect URIs**:
       ```
       https://<your-project-ref>.supabase.co/auth/v1/callback
       ```

       Find your project ref in Supabase Dashboard > Project Settings > General

    9. Click **Create** and save the **Client ID** and **Client Secret**

    ## Step 2: Supabase Configuration

    1. Go to [Supabase Dashboard](https://supabase.com/dashboard)

    2. Select your project

    3. Navigate to **Authentication > Providers**

    4. Find **Google** and click to enable

    5. Enter:
       - **Client ID**: From Google Cloud Console
       - **Client Secret**: From Google Cloud Console

    6. Copy the **Callback URL** shown (should match what you entered in Google)

    7. Click **Save**

    ## Step 3: Environment Variables

    No additional environment variables needed for Google OAuth.
    The configuration is stored in Supabase Dashboard.

    Your existing `.env.local` should have:
    ```
    NEXT_PUBLIC_SUPABASE_URL=your-project-url
    NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
    ```

    ## Step 4: Test the Integration

    1. Start development server: `npm run dev`

    2. Go to http://localhost:3000/login

    3. Click "Accedi con Google"

    4. You should be redirected to Google consent screen

    5. After consent, you should return to the app authenticated

    6. Check Supabase Dashboard > Authentication > Users to verify user was created

    ## Troubleshooting

    ### "redirect_uri_mismatch" error

    The redirect URI in Google Console doesn't match Supabase's callback URL.
    - Verify the exact URL in Supabase Auth Providers matches Google Console
    - Check for trailing slashes
    - Ensure using HTTPS for Supabase callback

    ### "Access blocked: This app's request is invalid"

    OAuth consent screen not configured or not published.
    - Configure OAuth consent screen in Google Cloud Console
    - For testing, add your email as a test user
    - For production, submit for verification

    ### User created but profile missing

    The database trigger might not have fired.
    - Check if `on_auth_user_created` trigger exists
    - Verify `handle_new_user` function has correct permissions
    - Check Supabase logs for errors

    ### Session not persisting

    Middleware might not be refreshing sessions.
    - Ensure middleware.ts is in project root
    - Check middleware matcher includes auth routes
    - Verify cookies are being set correctly

    ## Security Notes

    - Never commit Client Secret to version control
    - For production, publish OAuth consent screen for verification
    - Use a separate OAuth client for production vs development
    - Regularly rotate Client Secrets

    ## Local Development vs Production

    | Setting | Local | Production |
    |---------|-------|------------|
    | JavaScript origins | http://localhost:3000 | https://your-domain.com |
    | Redirect URI | Same Supabase callback | Same Supabase callback |
    | Consent screen | Testing mode | Published/Verified |
    | Test users | Your email added | Not needed |
    ```

    This documentation helps future developers (or the user) configure Google OAuth correctly.
  </action>
  <verify>
    - File exists at docs/GOOGLE_OAUTH_SETUP.md
    - Contains step-by-step instructions
    - Includes troubleshooting section
    - Covers both Google Cloud and Supabase configuration
  </verify>
  <done>
    Google OAuth setup documentation created.
  </done>
</task>

</tasks>

<verification>
After all tasks complete:
1. Google button appears on /login and /register pages
2. Clicking button redirects to Google (or shows error if not configured)
3. Documentation provides clear setup steps
4. No TypeScript or build errors
</verification>

<success_criteria>
- GoogleSignInButton component exists and renders
- Login/register pages show Google option prominently
- Setup documentation is comprehensive
- OAuth flow uses correct callback URL (/auth/callback)
- Italian text used throughout UI
</success_criteria>

<output>
After completion, create `.planning/phases/01-foundation-auth/01-04-SUMMARY.md`
</output>