Building Token Gated Rooms using the React SDK

Walkthrough

Getting Access Token

To access the token gated room using SDK, you need an accessToken which you will pass in the joinLobby() method.

As you have installed @huddle01/auth package, you can use the following code snippet to get the accessToken

1. Install token gating package

pnpm i @huddle01/auth

💡

Make sure that you already have installed @huddle01/react or @huddle01/web-core package.

2. Getting the message to sign

Use wagmi to connect wallet

Install wagmi and ethers

pnpm i wagmi ethers^5 connectkit

Add wagmi to the root of your project

import { WagmiConfig, createClient } from 'wagmi'
import { getDefaultClient, ConnectKitProvider } from "connectkit";
import type { AppProps } from "next/app";
 
const client = createClient(
  getDefaultClient({
  autoConnect: true,
  appName: "Huddle01-Token-Gating",
 })
)
 
function App({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig client={client}>
        <ConnectKitProvider>
            <Component {...pageProps} />
        </ConnectKitProvider>
    </WagmiConfig>
  )
}

Add wallet connect button

import { ConnectKitButton } from "connectkit";
import { useAccount } from "wagmi";
 
const ConnectWallet = () => {
  const { address } = useAccount();
 
  return (
    <div>
      <ConnectKitButton/>
    </div>
  );
};

Connect wallet using wallet01

Install wallet01 package

pnpm i @wallet01/react @wallet01/evm

Add wallet01 to the root of your project

import { Wallet01 } from "@wallet01/react";
import { InjectedConnector } from "@wallet01/evm";
import type { AppProps } from "next/app";
 
function MyApp({ Component, pageProps }: AppProps) {
 
  return (
    <Wallet01 autoConnect={true} connectors={() => [new InjectedConnector()]}>
      <Component {...pageProps} />
    </Wallet01>
  );
}

Add wallet connect button

import { useConnect } from "@wallet01/react";
import { useWallet } from "@wallet01/react";
 
const ConnectWallet = () => {
  const { connect } = useConnect();
  const { address } = useWallet();
 
  return (
    <div>
    {
      connectors.map((connector) => (
        <button
          onClick={() => {
            connect({ connector })
          }}
        >
          {address ?? "Connect"}
        </button>
      ))
    }
  </div>
  );
}

Once you connect wallet and get address, use the following code snippet to get the message to sign.

import { getMessage } from '@huddle01/auth';
 
const address = '0x1234567890123456789012345678901234567890'; // address of the user
 
const message = getMessage(address); // message to sign

3. Signing the message

You can sign message using any of the following methods:

Use wagmi to sign message and get access token

Importing methods from wagmi

import { useAccount, useSignMessage } from "wagmi";
import { getAccessToken, getMessage } from "@huddle01/auth";

Signing the message and getting Access token

const App () => {
  const { address } = useAccount();
  const [accessToken, setAccessToken] = useState("");
 
  const { signMessage } = useSignMessage({
    onSuccess: async (data) => {
      const token = await getAccessToken(data, address as string);
      setAccessToken(token.accessToken);
    },
  });
 
  return (
    <div>
      <button 
        onClick={ async() => {
          const msg = await getMessage(address as string);
          signMessage({ message: msg.message });
        }}> 
        Sign Message
      </button>
    </div>
  );
}

Use wallet01 to sign message and get access token

Importing methods from wallet01

import { useWallet, useMessage } from "@wallet01/react";
import { getAccessToken, getMessage } from "@huddle01/auth";

Signing the message and getting Access token

const App = () => {
  const { address } = useWallet();
  const { hash, signMessage } = useMessage();
 
  const [accessToken, setAccessToken] = useState("");
 
  const getAccessToken = async (hash: string) => {
    const token = await getAccessToken(hash, address as string);
    setAccessToken(token.accessToken);
  };
 
  useEffect(() => {
    if (hash) {
      setToken(hash);
    }
  }, [hash]);
 
  return (
    <div>
      <button 
        onClick={ async () => {
          const msg = await getMessage(address as string);
          signMessage({message: msg.message});
        }}> 
        Sign Message
      </button>
    </div>
  );
}

Joining the Lobby using access token

Once you get the access token, you can pass it in the joinLobby hook to access the token gated room.

joinLobby(roomId, accessToken)

Use sample app to access token gated room

Visit this sample app (opens in a new tab) to get the access token.

Get Message to Sign

Click on getMessage() button to get the message to sign. Once you click it you will get message as shown below.

Sign Message

Click on signMessage() button to sign the message. Once you click it you will get a pop up to sign the message.

Once you sign it you will get signature as shown below.

Get Access Token

Click on getAccessToken() button to get the access token. Once you click it you will get access token as shown below.

Using Access Token in sample app

The following guide explains how you can integrate token gated rooms into your application seamlessly using Huddle01 SDKs.

Start from an example app

Open your terminal and enter the following command:

npx create-huddle01

Give a Name to your project.
Choose Core SDK.
Confirm whether you want to use TypeScript.
Choose React to generate boilerplate.
Choose Next or Vite based on your preference to generate boilerplate.
The sample app has now been cloned to your local system!

Change directory

cd name-of-the-app

Install the dependencies

pnpm i

Run the app

pnpm dev

💡

We prefer pnpm over yarn or npm.

Once you run the above command open localhost:3000 or the port on which your web app is running. You will see a page as shown below.

Initilization of project

Head over to API Keys Page and connect your wallet to get your project credentials:

API Key
projectId

Enter this projectId in the sample app and click on INIT button.

Create a token gated room

Visit the Token Gating Page and create a token gated room.

💡

Make sure you create token gated room only for the token which you already have.

Once you create token gated room, get a roomId and use it in the sample app which you are running. Here we also need to pass accessToken, which you get from previous steps, once you enter both roomId and accessToken you can press JOIN_LOBBY button.

Happy Hacking

That's it for the setup! You can now start building dApps with token gated rooms using Huddle01 SDKs.

Audio Rooms Recording a Room