Skip to Content
ConnectQuickstart

Quickstart

This guide goes from an empty project to a gated dApp: launch the extension, track the proof, and check the resulting credential on chain.

Prerequisites

1. Install the SDK

npm install @keyringnetwork/keyring-connect-sdk

2. Launch the verification flow

launchExtension opens the extension’s side panel when it is installed and redirects to the chrome web store when it is not, so one call covers both cases.

launch.ts
import {
  KeyringConnect,
  type ExtensionSDKConfig,
} from "@keyringnetwork/keyring-connect-sdk";
 
const config: ExtensionSDKConfig = {
  name: "Example dApp",
  app_url: window.location.origin,
  logo_url: "https://example.com/logo.png",
  policy_id: 7,
  credential_config: {
    chain_id: 1,
    wallet_address: userAddress,
  },
};
 
await KeyringConnect.launchExtension(config);

launchExtension throws when a required field is missing or when the extension does not respond within two seconds; see error handling.

3. Track the proof

The extension reports progress through a small state machine (idle, mounted, proving, prove_success, prove_error, error). Subscribe to state changes and react when the proof completes:

track.ts
const unsubscribe = KeyringConnect.subscribeToExtensionState((state) => {
  if (!state) return; // extension unavailable
  if (state.status === "prove_success") {
    unsubscribe();
    // the user's credential is being written on chain
  }
});

The full state machine, including the user object with attestation and credential status, is documented in tracking state.

4. Check the credential on chain

KeyringCore answers a single view call. The SDK re-exports the deployment artifacts, so no address needs to be hard-coded:

check.ts
import { getKrnDeploymentArtifact } from "@keyringnetwork/keyring-connect-sdk";
import { createPublicClient, http } from "viem";
import { mainnet } from "viem/chains";
 
const { address, ABI } = getKrnDeploymentArtifact({ chainId: 1 });
const client = createPublicClient({ chain: mainnet, transport: http() });
 
const compliant = await client.readContract({
  address: address as `0x${string}`,
  abi: ABI,
  functionName: "checkCredential",
  args: [7n, userAddress],
});

For gating inside a contract rather than a frontend, see gating with checkCredential.

Next steps

Last verified on
OverviewHow it works