Replit

# Civic Auth Integration Prompt

## Prerequisites
Before starting, you need a Civic Auth Client ID and domain setup:
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
5. **IMPORTANT FOR REPLIT**: Since Replit is a hosted platform, you MUST add your app's domain to Civic Auth:
   - In the Civic Auth dashboard, navigate to "Domains"
   - Add your Replit app's URL (e.g., https://your-app-name.your-username.repl.co/)
   - This is required because hosted platforms need domain verification for security

## Task
Stop. Do not use any other authentication systems (like Firebase Auth, Auth0, etc.). Remove any existing auth dependencies and configuration files. Instead, implement authentication using Civic Auth only. Use Civic's authentication flow and API endpoints for all auth functionality including login, logout, and session management.

Add Civic Auth authentication to this React/Node.js 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)
- ✅ Replit app URL (e.g., https://your-app-name.your-username.repl.co/) - needed for domain registration
- ✅ Confirmation that the app URL has been added to Civic Auth domains
- ✅ Project type (React frontend, Node.js backend, full-stack, or other)
- ✅ Framework being used (Create React App, Vite, Next.js, Express, 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
- ✅ Environment variables setup in Replit

**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: Domain Registration (CRITICAL FOR REPLIT)
Before implementing, ensure domain registration is complete:
1. **Verify the Replit app URL** is added to Civic Auth domains
2. **If not added yet**, guide the user to:
   - Go to https://auth.civic.com
   - Navigate to "Domains" section
   - Add their Replit app URL (e.g., https://your-app-name.your-username.repl.co/)
   - Save the domain registration
3. **Do not proceed** until this step is confirmed - authentication will fail without proper domain registration

## Step 4: Replit-Specific Setup
For Replit projects, handle these platform-specific considerations:
1. **Environment Variables**: Set up environment variables in Replit's Secrets tab:
   - Add `CIVIC_CLIENT_ID` with the Client ID from Civic Auth
   - For Node.js backends, add any required server-side environment variables
2. **Port Configuration**: Ensure the app is configured to run on Replit's default port
3. **Package Management**: Use npm or yarn as appropriate for the project type
4. **File Structure**: Work with Replit's project structure and main entry files

## Step 5: Create Implementation Plan
After fetching the documentation with curl and confirming domain registration:
1. Analyze the current Replit 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
6. Consider Replit's hot-reload and development environment

## Step 6: Implement Civic Auth
Using ONLY the documentation fetched via curl:
1. **Install Dependencies**: Add required packages via Replit's package manager or npm install
2. **Follow the Quick Start guide** step by step from the documentation
3. **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)
4. **Configure Environment Variables**: Set up Client ID and any other required variables in Replit's Secrets
5. **Adapt code examples** to this Replit project's structure
6. **Handle existing authentication** or routing code appropriately
7. **Test in Replit's preview**: Use Replit's built-in preview to test the authentication flow

## Step 7: Replit Testing and Verification
After implementation:
1. **Start the application** in Replit's environment
2. **Use the preview URL** to test authentication
3. **Verify login/logout flows** work correctly
4. **Check console for any errors** and address them
5. **Test on the actual Replit-hosted URL** (not just localhost)

## 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
- **Replit-specific**: Always test with the actual Replit preview URL, not localhost
- **Environment**: Use Replit's Secrets tab for sensitive environment variables

## Replit Platform Considerations
- **Hot Reload**: Changes should automatically refresh in Replit's preview
- **Port Binding**: Ensure your server binds to `0.0.0.0` and the correct port for Replit
- **File Permissions**: Replit handles file permissions automatically
- **Package Installation**: Use the built-in package manager or shell for npm commands
- **Debugging**: Use Replit's built-in console and debugging tools

## 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
- **Production**: When ready to deploy outside Replit, remember to update domain settings in Civic Auth