Skip to main content

Use Civic on-chain verification

Introduction​

Civic is a platform that allows users to verify their identities. It provides a simple and secure way to do so without having to share your personal information with third parties. Honeycomb Protocol supports Civic integration, making it easy to fetch and use passes assigned to your users.

Pre-requisites​

Before starting this guide, please make sure to setup your development environment.

Step by step guide​

note

This is just a sample integration of Civic. You can find more detailed and latest instructions in the official guide from Civic.

1. Setting up Civic verification​

To get started with Civic, you need to install the Civic SDK. You can install the Civic SDK using NPM or Yarn.

npm i @civic/solana-gateway-react

Then set up your Civic Gateway like so.

import { GatewayProvider } from "@civic/solana-gateway-react";
import { Connection, clusterApiUrl } from '@solana/web3.js';

<GatewayProvider
  connection={new Connection(clusterApiUrl("mainnet-beta"), "confirmed")}
  cluster="mainnet-beta"
  wallet={wallet}
  gatekeeperNetwork={"PublicKey"}> // This is the Public Key that you get from Civic depending on the network and mode of verification you selected.
  {children}
</GatewayProvider>

Wrap your app in the GatewayProvider component and provide it the required props. The gatekeeperNetwork prop is the Public Key that you get from Civic depending on the network and mode of verification you selected. You can see a list of them on their docs.

There are different kinds of verification methods available in Civic, such as:

  • Captcha Verification: Verifies the user's identity by asking them to solve a captcha.
  • Liveness Verification: Verifies the user's identity by asking them submit a video selfie.
  • Uniqueness Verification: Verifies the user's uniqueness by asking them to submit a video selfie.
  • Document Verification: Verifies the user's identity by asking them to uploada a government-issued ID.

You can choose the method that best suits your needs and pass it as the gatekeeperNetwork prop.

2. Requesting a Civic Pass​

Afterwards, you can use the useGateway hook to request a Civic Pass.

import { useGateway } from "@civic/solana-gateway-react";

const { requestGatewayToken } = useGateway()

<button onClick={requestGatewayToken}>Civic Pass</button>

The requestGatewayToken function will request a Civic Pass for the user. Once the user has completed the verification process, the Civic Pass will be issued for the user's wallet.

3. Populating the Civic Pass in the Honeycomb user data​

When a user's wallet has an associated Civic Pass, you can fetch the Civic Pass and populate it in the user's data on the Honeycomb Protocol. This allows you to verify the user's identity using the Civic Pass.

Doing so is very simple and can be done while updating a user.

note

In case the user got a Civic Pass before signing up on your platform, their Civic Pass gets detected and populated automatically when creating the user.

All you need to do is pass in a populateCivic parameter with a value of true when updating a user. Here's an example:

import { useWallet } from "@solana/wallet-adapter-react";
import { sendClientTransactions } from "@honeycomb-protocol/edge-client/client/walletHelpers";
import { client } from "@/utils"; // Import the client (covered in the dev environment setup)

const {
  updateUserTransaction: txResponse // This is the transaction response, you'll need to sign and send this transaction
} = await client.updateUserTransaction({
    wallet: userPublicKey.toString(), // User's wallet public key
    payer: adminPublicKey.toString(), // Optional, the transaction payer's public key
    populateCivic: true, // Populate the Civic Pass
});

await sendClientTransactions(client, wallet, txResponse); // Get the transaction signed by the user and send it to the blockchain

The populateCivic parameter will fetch the Civic Passes associated with the user's wallet(s) and populate it in the user's data on the Honeycomb Protocol.

This is how the Civic Pass will look inside a user object in findUsers response (in case no Civic passes are found, the returned Civic passes array will be empty):

{
    "address": "pubkey", // Pubkey in string format
    "id": int,
    "info": {
        "bio": "string",
        "name": "string",
        "pfp": "string",
    },
    "socialInfo": {
        "civic": [
            {
                "expiry": int, // Either a timestamp or null (in case the Civic Pass doesn't have an expiration).
                "gatekeeperNetwork": "string", // Type of Civic Pass. Example, "IdVerificationPass".
                "walletIndex": int
            }
        ],
        "discord": "string",
        "steam": "string",
        "twitter": "string"
    },
    "wallets": {
        "wallets": [
            "pubkey", // Pubkey in string format
            "pubkey" // Pubkey in string format
        ],
        "shadow": "pubkey" // Pubkey in string format
    }
}
note

Some Civic Passes expire after a certain period of time. It's recommended to refetch the Civic Pass periodically (every week or so) to ensure the user's identity is up-to-date. For more information on the validity period of different Civic Pases, visit this page: https://support.civic.com/hc/en-us/articles/16691562390935-Do-Civic-Passes-expires