Gating a Web3 UI Based on On-Chain Attestations: A React Tutorial

As a Web3 frontend developer, you often need to restrict access to premium content, DAO dashboards, or specific application features based on a user's verified qualifications. Rather than building a centralized backend database to track who has completed KYC, joined a community, or attended an event, you can use the Attest Protocol SDK to verify on-chain attestations directly in your React frontend.

This technical guide walks you through the process of querying a decentralized attestation and using it to conditionally render a React component. We will be using the unified @attestprotocol/sdk, an open-source library that works seamlessly across supported blockchain networks (Stellar Soroban, Solana, Cairo).

Prerequisites for Web3 Verification

• You have the @attestprotocol/sdk installed in your project via npm, yarn, or pnpm.

• You know the unique schemaUID representing the on-chain data structure you want to check (e.g., a "Verified Human" or "Accredited Investor" Schema).

• You have access to the connected user's wallet address (e.g., via a standard Web3 wallet adapter).

1. Initialize the Universal Client

First, initialize the Attestation Client. Because the SDK is chain-agnostic, you simply declare the chain your app is operating on. You do not need a signer (keypair) if you are only verifying (reading) data from the network.

import { AttestProtocol } from '@attestprotocol/sdk';

// Initialize the universal read-only client
// No secret key is required for verification queries
const sdk = await AttestProtocol.initializeStellar({
  url: 'https://soroban-testnet.stellar.org',
});

1. Querying the Attestation

We need to check if the connected user has an active, valid attestation for our specific schemaUID.

async function checkUserVerification(userAddress: string, schemaUID: string) {
  try {
    // Query the protocol for attestations matching the subject and schema
    const result = await sdk.fetchAttestation({
      subject: userAddress,
      schemaUID: schemaUID,
    });

    // Check if attestation exists and is not revoked
    if (result.data && !result.data.revoked) {
      // You can additionally parse the value string if your schema holds specific data
      // e.g. "verified:true,level:enhanced"
      return true;
    }

    return false;
  } catch (error) {
    console.error("Failed to fetch attestations:", error.message);
    return false;
  }
}

1. Implementing the React Component

Now, let's tie this asynchronous verification logic into a React component using standard hooks. When the user connects their wallet, we check their attestation status and unlock the premium UI content.

import React, { useState, useEffect } from 'react';
import { checkUserVerification } from './attestUtils'; // Assuming the function above is exported

const VERIFIED_HUMAN_SCHEMA = "kyc-basic-v1";

export const PremiumDashboard = ({ userWalletAddress }) => {
  const [isVerified, setIsVerified] = useState<boolean | null>(null);

  useEffect(() => {
    if (!userWalletAddress) return;

    const verify = async () => {
      const status = await checkUserVerification(
        userWalletAddress, 
        VERIFIED_HUMAN_SCHEMA
      );
      setIsVerified(status);
    };

    verify();
  }, [userWalletAddress]);

  if (isVerified === null) {
    return <div>Checking credentials on-chain...</div>;
  }

  if (!isVerified) {
    return (
      <div className="locked-state">
        <h2>Access Denied: Verification Required</h2>
        <p>You must hold a valid "Verified Human" on-chain attestation to view this Web3 dashboard.</p>
        <button onClick={() => alert("Redirect to KYC provider")}>Start Verification Process</button>
      </div>
    );
  }

  return (
    <div className="unlocked-state">
      <h2>Welcome to the Premium Web3 Dashboard</h2>
      <p>Your on-chain credentials have been verified successfully via the Attest Protocol!</p>
      {/* Premium DAO Content or RWA Data Renders Here */}
    </div>
  );
};

Summary: Decentralized Access Control

By leveraging the Attest Protocol SDK, gating a Web3 user interface becomes a purely frontend operation. Your React application reads verifiable data natively from the blockchain, eliminating the need to maintain an insecure centralized backend database of user permissions or API keys.

Because the SDK exposes a unified API, this exact same React component logic applies whether the underlying attestation was anchored on the Stellar network, Solana, or any other supported execution environment. This approach significantly enhances your application's decentralization, security, and developer experience (DX).