# 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 React application.
## Step 1: Fetch the Documentation
Use curl to fetch the Civic Auth documentation:
curl https://docs.civic.com/integration/react.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.
## Step 2: Gather Project Information
Ask the user for the following information if not provided:
**Required Information (gather ALL before starting):**
- ✅ Client ID (if not provided, ask user to get it from https://auth.civic.com)
- ✅ Project type (new/existing React project)
- ✅ Build tool (Create React App, Vite, Next.js, or other)
- ✅ Web3 Support Needed (Yes/No) - This affects which imports and packages to use
- ✅ Protected routes/components that need authentication
- ✅ Existing authentication systems that need replacement
**DO NOT proceed with implementation until you have confirmed ALL of the above information.**
If any information is missing, ask specific questions and wait for responses before continuing. This prevents errors and ensures the integration matches the user's exact requirements.
## Step 3: 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. Choose the correct setup based on Web3 requirements:
- **If Web3 support needed**: Use "Auth + Web3" tab and @civic/auth-web3 packages
- **If no Web3 support**: Use "Auth" tab and @civic/auth packages
4. Plan the implementation order
5. Note any existing code that needs to be modified
## Step 4: Implement Civic Auth
Using ONLY the documentation fetched via curl:
1. Follow the Quick Start guide step by step
2. Choose the correct tab based on Web3 requirements:
- **If Web3 support needed**: Use "Auth + Web3" tab (imports from @civic/auth-web3/react)
- **If no Web3 support**: Use "Auth" tab (imports from @civic/auth)
3. Adapt all code examples to this project's structure
4. Handle any existing authentication or routing 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 compatibility notes in the documentation
- **CRITICAL**: If Web3 support is needed, you MUST use @civic/auth-web3 packages and imports, not @civic/auth
## Next Steps
After completing basic authentication integration:
- **If Web3 was selected**: Use the [Solana](/ai-prompts/web3/solana) or [Ethereum](/ai-prompts/web3/ethereum) prompts to add specific wallet functionality
- **If no Web3**: Your basic authentication setup is complete