/* Custom styles for image width and border radius control */
/* Use these classes on Frame components for selective styling */

/* Width control classes (no border radius) */
.image-50 {
  width: 50% !important;
  max-width: 50% !important;
  height: auto;
  margin: 0 auto;
  display: block;
}

.image-60 {
  width: 60% !important;
  max-width: 60% !important;
  height: auto;
  margin: 0 auto;
  display: block;
}

.image-70 {
  width: 70% !important;
  max-width: 70% !important;
  height: auto;
  margin: 0 auto;
  display: block;
}

.image-80 {
  width: 80% !important;
  max-width: 80% !important;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* Border radius class (separate) */
.image-rounded {
  border-radius: 8px;
}

/* For responsive behavior */
@media (max-width: 768px) {
  .image-50,
  .image-60,
  .image-70,
  .image-80 {
    width: 90% !important;
    max-width: 90% !important;
  }
} 

What is Civic Auth?

Quick Start

Usage

Civic Auth Demo

Web3 Wallets

Civic Auth is a simple, flexible, and fast way to integrate authentication into your applications. Enable familiar sign-in options while offering optional embedded wallets and unlocking blockchain benefits for your users.

Getting Started

Civic Auth

Civic Docs

Seamless Authentication with Just a Few Lines of Code

Pricing

Auth Pricing

The steps you need to follow to use your App in a live environment.

Bring Your App to Production

The login options you can set up for users to log in to your app.

Login Options

Frequently asked questions about Civic Auth integration.

FAQs

Changelog

Integrate Civic Auth into your React application with ease, just wrap your app with the Civic Auth provider and add your Client ID (provided after you [sign up](https://auth.civic.com)).

React

Next.JS

Integrate Civic Auth into your Vanilla JavaScript application with just a few lines of code.

Vanilla JavaScript

Civic Auth can be integrated into other environments using any OIDC or OAuth 2.0-compliant client libraries.

Other OIDC / OAuth 2.0-Compliant Environments

This section describes the error codes that may be encountered during the OAuth authentication flow.

Error Codes

The **Civic Auth Web3 SDK** ([@civic/auth-web3](https://www.npmjs.com/package/@civic/auth-web3)) extends the functionality of the base **Civic Auth SDK** by including the ability to provision a Web3 wallet for users. This allows Civic Auth apps to provide their users with access to the world of Cryptocurrencies and Web3 without any hassle or prior knowledge.

Embedded Wallets

Ethereum / EVM

Solana

Create a secure MCP server in 15 Minutes

Where Civic explores ideas in digital identity, agentic AI, and authorization

Civic Labs

Understanding the maturity levels of Civic Labs experiments

Flask Status

How to share feedback, contribute, and shape the future of Civic Labs

Feedback & Contribution

A hosted MCP Manager unifying and orchstrating multiple MCP servers, focusing on auth and security

MCP Hub

Wrap any MCP server in a configurable and flexible security layer

Guardrail Proxy

LLM-based threat detection for prompts and tool calls

Bodyguard

Middleware hook system for MCP servers that powers guardrails and more

Pass-through Proxy

AI assistant for the optimisation of internal operations and processes

Civic Knowledge

What is MCP and why it matters for AI applications

Model Context Protocol (MCP)

Understanding prompt injection attacks & LLM safety

Guardrails

Prompt Injection

OAuth2, granular permissions, and consent

Auth Strategies

Middleware pattern for MCP request processing

Civic Auth

What is Civic Auth?

Integrated login.

Adaptable onboarding.

Embedded wallets.

Multichain support.

Quick Start

Web3 Wallets

Usage

Civic Auth Demo

​What is Civic Auth?

Integrated login.

Adaptable onboarding.

Embedded wallets.

Multichain support.

​Quick Start

​Web3 Wallets

​Usage

​Civic Auth Demo

What is Civic Auth?

Quick Start

Web3 Wallets

Usage

Civic Auth Demo