Use this prompt with your preferred AI assistant (Claude, ChatGPT, etc.) to automatically integrate Civic Auth into your React project.
How to Use
- Copy the prompt below
- Paste it into your AI assistant
- The assistant will ask for your project details and guide you through the setup
- The assistant will fetch the complete documentation and implement the integration for you
Integration Prompt
# 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
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 React project
- **Build Tool**: Ask what build tool they're using (Create React App, Vite, Next.js, or other)
- **Web3 Required**: Ask if they need Web3 features (Yes/No)
- **Protected Routes/Components**: Ask which components need authentication (e.g., Dashboard, Profile, Settings)
- **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 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
Need help? If you encounter any issues during the LLM-assisted integration, you can always fall back to the manual integration guide.
What the AI Assistant Will Do
When you use this prompt, the AI assistant will:
- Fetch the documentation using curl from the official Civic Auth docs
- Analyze your project structure and requirements
- Install dependencies and configure your React app
- Set up authentication provider and wrap your app correctly
- Implement authentication components for login/logout functionality
- Handle edge cases like existing auth systems or custom routing
Supported AI Assistants
This prompt has been tested with:
- Claude (Anthropic)
- Cursor (with Claude)
- ChatGPT (OpenAI)
- GitHub Copilot Chat
Make sure your AI assistant has the ability to run terminal commands and edit files in your project.
Responses are generated using AI and may contain mistakes.