DOCSEARCHbyAlgolia
Submit Docs

Civic Documentation

website·Indexed 35 days ago

https://docs.civic.com

Documentation for Civic, covering Civic Auth for user authentication and Civic Labs for experimental projects in digital identity. Includes details on billing plans, such as the Starter plan and free trials, and support for EVM-compatible chains including Ethereum and BSC.

Tokens
1.6K
Snippets
7
Records
11
Agent score
16%

What's inside Civic

  1. Overview of Civic Labs experimental projects

    Civic Labs explores digital identity, agentic AI, and authorization through 'flasks' (experimental projects). Key projects include:

    • MCP Hub: A hosted MCP Manager that orchestrates multiple MCP servers with a focus on security and auth.
    • Guardrail Proxy: A security layer that adds configurable guardrails to MCP servers that do not natively support them.
    • Bodyguard: LLM-based threat detection to identify prompt injections and jailbreak attempts before they reach tools.
    • Pass-through Proxy: A middleware hook system for MCP servers that powers guardrails and cross-cutting concerns.
    • Civic Knowledge: A demonstration of RAG (Retrieval-Augmented Generation) over organizational knowledge for internal operations.
    • x402-mcp: Integration of the x402 payment protocol to enable micropayments for agent tool calls.

  2. Overview of Civic Auth

    Civic Auth is a user authentication product (currently in beta) for web and mobile applications. It supports sign-in via Email, Google, and Web3 wallets, and can optionally provide embedded Web3 wallets that are automatically created for users. It is multichain, supporting Solana, Base, Ethereum, Polygon, Arbitrum, BSC, and other EVM-compatible chains. Developers can sign up and obtain a Client ID at https://auth.civic.com.

  4. Integrate Civic MCP into an AI framework

    To integrate Civic's MCP capabilities, follow these steps:

    1. Sign up at https://app.civic.com.
    2. Complete the onboarding process by selecting your preferred framework and tools.
    3. Generate a Civic token.
    4. Configure the following environment variables:
      • CIVIC_URL: Set to https://app.civic.com/hub/mcp?profile=your-toolkit
      • CIVIC_TOKEN: Set to your generated token.
    5. Connect using your framework's MCP client, ensuring the request includes the header Authorization: Bearer $CIVIC_TOKEN.
    export CIVIC_URL="https://app.civic.com/hub/mcp?profile=your-toolkit"
export CIVIC_TOKEN="your-token"

  5. Civic Hub limits and specifications

    Key technical and account specifications for Civic Hub:

    • Capacity: 95+ MCP servers, ~200 tools, and ~5,000 tool parameters.
    • Guardrails: 14 universal guardrails and ~1,000 server-specific rules across 35 servers.
    • Free Trial: 10,000 credits for 14 days.
    • Data Retention: Audit logs are retained for approximately 30 days.

  6. Understand Civic Hub core concepts and terminology

    When working with Civic, it is important to distinguish between these core entities:

    • Civic Hub: The MCP gateway and core infrastructure.
    • Civic Chat: The control plane UI (located at app.civic.com) used for configuration, auditing, and revocation.
    • Civic Auth: A separate user authentication product, distinct from Civic Hub.
    • Toolkit: A collection of MCP servers. Only one toolkit can be active at a time.
    • Skill: A set of instructions that layers on top of the currently active toolkit.
    • Profile locking: A security feature that is enabled by default when the profile parameter is set. It prevents agents from switching toolkits or modifying their own guardrails.

  7. Integrate Civic Auth with Python FastAPI

    Use the CivicAuth integration for FastAPI to protect routes. The civic.get_user dependency can be used to retrieve the authenticated user in route handlers.
    from fastapi import FastAPI, Depends
from civic_auth.integrations.fastapi import CivicAuth
import os

app = FastAPI()
civic = CivicAuth(client_id=os.environ["CIVIC_CLIENT_ID"])

@app.get("/protected")
async def protected(user=Depends(civic.get_user)):
    return {"user": user}

  8. Integrate Civic Auth with Next.js

    To integrate Civic Auth into a Next.js application, set up the API route handler, the middleware for route protection, and the root layout provider.
    // app/api/auth/[...civicauth]/route.ts
import { handler } from "@civic/auth/nextjs";
export const GET = handler;
export const POST = handler;

// middleware.ts
import { authMiddleware } from "@civic/auth/nextjs";
export default authMiddleware();
export const config = { matcher: ["/((?!_next|favicon.ico).*)"] };

// app/layout.tsx
import { CivicAuthProvider } from "@civic/auth/nextjs";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <CivicAuthProvider>{children}</CivicAuthProvider>
      </body>
    </html>
  );
}

  9. Civic Auth Framework Support Reference

    Civic Auth provides specialized packages and guides for various frameworks:
    FrameworkPackageGuide
    React@civic/auth/reacthttps://docs.civic.com/integration/react
    Next.js@civic/auth/nextjshttps://docs.civic.com/integration/nextjs
    Node.js@civic/authhttps://docs.civic.com/integration/nodejs
    Express@civic/authhttps://docs.civic.com/integration/nodejs/express
    Fastify@civic/authhttps://docs.civic.com/integration/nodejs/fastify
    Hono@civic/authhttps://docs.civic.com/integration/nodejs/hono
    FastAPIcivic-authhttps://docs.civic.com/integration/python/fastapi
    Flaskcivic-authhttps://docs.civic.com/integration/python/flask
    Djangocivic-authhttps://docs.civic.com/integration/python/django
    React Native@civic/authhttps://docs.civic.com/integration/mobile/react-native
    Vanilla JS@civic/authhttps://docs.civic.com/integration/vanillajs
    Other (OIDC/OAuth2)Any OIDC clienthttps://docs.civic.com/integration/other

  10. Integrate Civic Auth with React

    Wrap your application with the CivicAuthProvider and use the UserButton component for authentication UI. Pass your Client ID via the clientId prop.
    import { CivicAuthProvider, UserButton } from "@civic/auth/react";

function App() {
  return (
    <CivicAuthProvider clientId={process.env.REACT_APP_CIVIC_CLIENT_ID}>
      <UserButton />
    </CivicAuthProvider>
  );
}

  11. Implement Web3 Wallet support in React

    Use the @civic/auth-web3/react package to provide Web3 wallet functionality. The useWallet hook allows access to the user's wallet address. This supports Solana, Ethereum, Base, Polygon, Arbitrum, BSC, and other EVM-compatible chains.
    import { CivicAuthProvider } from "@civic/auth-web3/react";
import { useWallet } from "@civic/auth-web3/react";

function App() {
  return (
    <CivicAuthProvider clientId="your-client-id">
      <WalletComponent />
    </CivicAuthProvider>
  );
}

function WalletComponent() {
  const { wallet } = useWallet();
  return <div>Address: {wallet?.address}</div>;
}