Skip to main content
Building something amazing on Lovable and want to add authentication super quickly? Just copy the prompt below and paste it into Lovable’s AI chat - it will automatically integrate Civic Auth into your project in minutes!

​
Integration Prompt

# 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 LOVABLE**: Since Lovable is a hosted platform, you MUST add your app's domain to Civic Auth:
   - In the Civic Auth dashboard, navigate to "Domains"
   - Add your Lovable app's URL (e.g., https://your-app-name.lovable.app/)
   - This is required because hosted platforms need domain verification for security

## Task
Stop. Do not use Supabase auth. Remove any Supabase dependencies and configuration files. Instead, implement authentication using Civic Auth only. Do not install @supabase/supabase-js or create any supabase client. 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 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)
- ✅ Lovable app URL (e.g., https://your-app-name.lovable.app/) - needed for domain registration
- ✅ Confirmation that the app URL has been added to Civic Auth domains
- ✅ 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: Domain Registration (CRITICAL FOR LOVABLE)
Before implementing, ensure domain registration is complete:
1. **Verify the Lovable 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 Lovable app URL (e.g., https://your-app-name.lovable.app/)
   - Save the domain registration
3. **Do not proceed** until this step is confirmed - authentication will fail without proper domain registration

## Step 4: Create Implementation Plan
After fetching the documentation with curl and confirming domain registration:
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 5: 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
Need Web3? After setting up basic authentication, use our Solana or Ethereum prompts to add wallet functionality.
Need help? If you encounter any issues during the LLM-assisted integration, you can always fall back to the manual integration guide.

​
What Lovable’s AI Will Do

When you use this prompt in Lovable, the AI will:
  1. Fetch the documentation using curl from the official Civic Auth docs
  2. Analyze your Lovable project structure and requirements
  3. Install dependencies and configure your app for Civic Auth
  4. Set up authentication provider and wrap your components correctly
  5. Implement authentication UI for login/logout functionality
  6. Configure domain settings for Lovable’s hosted environment
  7. Handle existing auth systems if you have any

​
Show Us What You Built! 🚀

We’d love to see what amazing projects you’re building with Civic Auth and Lovable! Share your creations:
  • Join our Slack community and show off your project
  • Get help from other developers and our team
  • Share feedback and feature requests
  • Connect with the Civic developer community
Built something cool? We feature awesome community projects on our social channels and blog!