leopost/.planning/phases/01-foundation-auth/01-01-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, user_setup, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	user_setup	must_haves
01-foundation-auth	01	execute	1		package.json tsconfig.json next.config.ts tailwind.config.ts postcss.config.mjs .env.local .env.example src/lib/supabase/client.ts src/lib/supabase/server.ts src/app/layout.tsx src/app/page.tsx src/app/globals.css	true	service why env_vars supabase Database and authentication backend name source NEXT_PUBLIC_SUPABASE_URL Supabase Dashboard -> Project Settings -> API -> Project URL name source NEXT_PUBLIC_SUPABASE_ANON_KEY Supabase Dashboard -> Project Settings -> API -> anon public name source SUPABASE_SERVICE_ROLE_KEY Supabase Dashboard -> Project Settings -> API -> service_role (secret)	truths artifacts key_links Next.js dev server starts without errors Supabase client connects to project Environment variables are loaded correctly path provides exports src/lib/supabase/client.ts Browser Supabase client for Client Components createClient path provides exports src/lib/supabase/server.ts Server Supabase client for Server Components/Actions createClient path provides contains .env.local Environment configuration NEXT_PUBLIC_SUPABASE_URL from to via pattern src/lib/supabase/client.ts .env.local process.env.NEXT_PUBLIC_* process.env.NEXT_PUBLIC_SUPABASE from to via pattern src/lib/supabase/server.ts next/headers cookies() cookie handling for SSR cookies()

Initialize Next.js 14 project with Supabase client configuration using the official @supabase/ssr package for App Router compatibility.

Purpose: Establish the foundational project structure and Supabase connectivity that all subsequent auth work depends on.

Output: Working Next.js 14 app with properly configured Supabase clients (browser + server) ready for auth implementation.

<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>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/phases/01-foundation-auth/01-RESEARCH.md Task 1: Initialize Next.js 14 project with TypeScript and Tailwind package.json tsconfig.json next.config.ts tailwind.config.ts postcss.config.mjs src/app/layout.tsx src/app/page.tsx src/app/globals.css Create Next.js 14 project with App Router:

```bash
npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm
```

If directory not empty, use --force or clean first.

After init, install Supabase packages:
```bash
npm install @supabase/supabase-js @supabase/ssr zod react-hook-form
```

Update src/app/page.tsx to a simple placeholder:
```tsx
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">Leopost</h1>
      <p className="mt-4 text-gray-600">Setup in corso...</p>
    </main>
  )
}
```

Ensure next.config.ts uses the new format (not .js):
```typescript
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  // config options here
}

export default nextConfig
```

Run `npm run dev` - server starts on localhost:3000 without errors. Visit http://localhost:3000 - shows Leopost placeholder. Next.js 14 project initialized with TypeScript, Tailwind, App Router, and Supabase packages installed. Task 2: Configure environment variables .env.local .env.example .gitignore Create .env.example (committed to git, template for others): ``` # Supabase Configuration NEXT_PUBLIC_SUPABASE_URL=your-project-url NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000
```

Create .env.local with actual Supabase credentials:
- Get URL from Supabase Dashboard -> Project Settings -> API -> Project URL
- Get anon key from Supabase Dashboard -> Project Settings -> API -> anon public
- Get service_role key from Supabase Dashboard -> Project Settings -> API -> service_role

NOTE: If Supabase project doesn't exist yet, create placeholder values and document that user must create project.

Verify .gitignore includes:
```
.env*.local
```
(This should already be present from create-next-app)

- .env.example exists and is NOT in .gitignore - .env.local exists and IS gitignored - Run `git status` - .env.local should NOT appear Environment files configured with Supabase credentials (or placeholders if project not yet created). Task 3: Create Supabase client utilities (dual client pattern) src/lib/supabase/client.ts src/lib/supabase/server.ts Create src/lib/supabase/client.ts for Client Components: ```typescript import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}
```

Create src/lib/supabase/server.ts for Server Components, Route Handlers, Server Actions:
```typescript
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // The `setAll` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing user sessions.
          }
        },
      },
    }
  )
}
```

IMPORTANT:
- Use @supabase/ssr NOT @supabase/auth-helpers-nextjs (deprecated)
- Server client uses async cookies() (Next.js 15 requirement)
- The try/catch in setAll is required for Server Components

- Both files exist with correct exports - `npm run build` completes without TypeScript errors - No import errors in IDE Dual Supabase client pattern implemented: client.ts for browser, server.ts for SSR/Server Actions. After all tasks complete: 1. `npm run dev` starts without errors 2. `npm run build` completes successfully 3. Both Supabase client files exist and export createClient 4. Environment variables are configured (even if placeholder) 5. Project structure follows Next.js 14 App Router conventions

<success_criteria>

• Next.js 14 development server runs at localhost:3000
• Supabase packages installed: @supabase/supabase-js, @supabase/ssr
• Form packages installed: zod, react-hook-form
• Dual client pattern implemented (client.ts + server.ts)
• Environment configuration ready for Supabase connection </success_criteria>

After completion, create `.planning/phases/01-foundation-auth/01-01-SUMMARY.md`