UI integration: React component

Civic provides a developer-friendly plug and play React Component as an easy way to request a Gateway Token from your dApp with minimal setup. 
It includes a Civic Pass status widget, the Identity Button; and an in-dApp modal to guide your users through the process:
Identity Button
Civic Pass in-dApp modal
​
Basic Setup
1. Install the React component
Please always use @latest
1
npm i @civic/[email protected]
Copied!
2. Include the Gateway Context Provider (more info)
You can access the Gateway token by using the Gateway Provider that is part of the library. 
For a list of required and optional properties, please review the detailed section on the Gateway Context Provider.​
Note: 
The useGateway hook will only work in components wrapped by <GatewayProvider> . The Civic Pass state cannot be used outside of the <GatewayProvider> context. It's suggested to place the <GatewayProvider> as high up in the component tree as possible, to ensure the Civic Pass state is available throughout the dApp.
1
import { GatewayProvider } from "@civic/solana-gateway-react";
2
​
3
<GatewayProvider
4
  wallet={wallet}
5
  gatekeeperNetwork={gatekeeperNetwork}
6
  >
7
  {children}
8
</GatewayProvider> 
Copied!
3. Add the Identity Button
The IdentityButton must be inside the <GatewayProvider> context to ensure status updates are automatically reflected by the button.
1
import IdentityButton from '@civic/solana-gateway-react';
2
...
3
<IdentityButton />
Copied!
Advanced Setup
It is also possible to use a custom button and/or iframe wrapper. See the documentation on npm for more details.
​

Civic Pass - Previous

On-chain Integration

The Identity Button

Last modified 3mo ago

Copy link

Contents

Basic Setup

Advanced Setup