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

1
npm i @civic/solana-gateway-react
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.
Last modified 10d ago
Copy link