/* 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.

Civic Auth Overview

Civic Auth

Civic Docs

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

The Civic Auth SDK also works with any Node.js backend.

Overview

Node.JS

Follow these simple steps to set up Civic Auth with an [Express](https://expressjs.com/) backend (a working example is available in our [github examples repo](https://github.com/civicteam/civic-auth-examples/tree/main/packages/civic-auth/server/express)).

Express

Follow these simple steps to set up Civic Auth with a [Hono](https://hono.dev/) backend (a working example is available in our [github examples repo](https://github.com/civicteam/civic-auth-examples/tree/main/packages/civic-auth/server/hono)).

Hono

Follow these simple steps to set up Civic Auth with a [Fastify](https://fastify.dev/) backend.

Fastify

The Civic Auth SDK also works with any Python backend.

Python

Follow these simple steps to set up Civic Auth with a [FastAPI](https://fastapi.tiangolo.com/) backend (a working example is available in the [github repo](https://github.com/civicteam/civic-auth-py/tree/main/examples/fastapi)).

FastAPI

Follow these simple steps to set up Civic Auth with a [Flask](https://flask.palletsprojects.com/) backend (a working example is available in the [github repo](https://github.com/civicteam/civic-auth-py/tree/main/examples/flask)).

Flask

Follow these simple steps to set up Civic Auth with a [Django](https://www.djangoproject.com/) backend (a working example is available in the [github repo](https://github.com/civicteam/civic-auth-py/tree/main/examples/django)).

Django

Integrate react-native with civic-auth OAuth2 services.

React Native

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

Frequently asked questions about Civic Auth integration.

FAQs

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

Error Codes

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

Changelog

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

Welcome to the home of your new documentation

Introduction

Start building awesome documentation in under 5 minutes

Quickstart

Development

Text, title, and styling in standard markdown

Markdown Syntax

Code Blocks

Add image, video, and other HTML elements

Images and Embeds

Mintlify gives you complete control over the look and feel of your documentation using the mint.json file

Global Settings

The navigation field in mint.json defines the pages that go in the navigation menu

Navigation

Reusable, custom snippets to keep content in sync

Reusable Snippets

Example section for showcasing API endpoints

Returns all plants from the system that the user has access to

Get Plants

Create Plant

Deletes a single plant based on the ID supplied

Getting Started

Integration

Web3

Guides

Civic Auth

What is Civic Auth?

Integrated login.

Adaptable onboarding.

Embedded wallets.

Multichain support.

Quick Start

Web3 Wallets

Usage

Civic Auth Demo

Getting Started

Integration

Web3

Guides

​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