Next.js

# Civic Auth Integration Prompt

## Prerequisites
Before starting, you need a Civic Auth Client ID:
1. Visit https://auth.civic.com
2. Sign up or log in to your account
3. Create a new application to obtain your Client ID
4. Copy the Client ID for use in this integration

## Task
Add Civic Auth authentication to this Next.js application.

## Step 1: Fetch the Documentation
Use curl to fetch the Civic Auth documentation:

curl https://docs.civic.com/integration/nextjs.md

This documentation contains ALL the code examples and instructions needed for the integration. Do NOT use web search or any other tools - only use curl to fetch this specific URL.

## Project Context
Ask the user for the following information if not provided:

- **Client ID**: If not provided, ask the user to visit https://auth.civic.com, sign up/log in, create a new application, and provide their Client ID
- **Project Type**: Ask if this is a new or existing Next.js project
- **Web3 Required**: Ask if they need Web3 features (Yes/No)
- **Protected Routes**: Ask which routes need authentication (e.g., /dashboard/*, /api/private/*)
- **Existing Auth**: Ask if there's any existing authentication that needs to be replaced

## Step 2: Create Implementation Plan
After fetching the documentation with curl:
1. Analyze the current project structure
2. Identify which code examples from the documentation apply
3. Plan the implementation order
4. Note any existing code that needs to be modified

## Step 3: Implement Civic Auth
Using ONLY the documentation fetched via curl:
1. Follow the Quick Start guide step by step
2. Choose the correct tab ("Auth" or "Auth + Web3") based on requirements
3. Adapt all code examples to this project's structure
4. Handle any existing middleware or auth code appropriately

## Important Notes
- Use ONLY curl to fetch the documentation - no web search tools
- The fetched documentation is the ONLY source of truth for this implementation
- All code examples, configuration options, and setup instructions are in that document
- Pay attention to version requirements and security warnings in the documentation

## CRITICAL: Middleware File Location
The middleware.ts file MUST be placed at src/middleware.ts (in the src/ directory), NOT in the project root. This is a common mistake that breaks authentication:
- ✅ CORRECT: src/middleware.ts 
- ❌ WRONG: middleware.ts (project root - breaks authentication)

The middleware file should be placed in the src/ directory as shown in the documentation examples. Placing it in the project root will cause the middleware to not take effect and authentication will fail.