Picket Gated Gallery Example

For this example we’ll be using Next.js. While few of the Next.js features are needed in this example tutorial, it will create a convenient launching off point for you to build on from this base. It also makes deployment easy through Vercel.

1. Create your Next.js app

In your terminal cd into the directory where you’d like your project folder to reside and enter the following into the terminal: npx create-next-app@latest —typescript

Confirm your app is running on localhost by running npm run dev

Now, when you navigate to http://localhost:3000 in your browser you should see the following:

2. Install the Picket React SDK

npm install "@picketapi/picket-react"

3. Setup the Picket Provider

Replace the contents of pages/_app.tsx with the following:

import "../styles/globals.css";
import type { AppProps } from "next/app";

import { PicketProvider } from "@picketapi/picket-react";

const apiKey = "YOUR_PUBLISHABLE_KEY_GOES_HERE";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <PicketProvider apiKey={apiKey}>
      <Component {...pageProps} />
    </PicketProvider>
  );
}

export default MyApp;

The PicketProvider makes Picket and the user's authentication state available throughout your app via the usePicket hook.

4. Add Your API Key

You'll need to add your publishable API key to make this functional. Navigate to your Picket account dashboard and copy your publishable key from a project. Now paste it into the pages/_app.tsx

// in pages/_app.tsx
// Replace with your copied publishable key
const apiKey = "YOUR_PUBLISHABLE_KEY_GOES_HERE";

5. Build your home page

Copy and paste the contents of pages/index.tsx into your local pages/index.tsx.

The magic method here to initiate logging in a user is picket.login(), which is triggered when a user click the Sign-In with Your Wallet button.

Next up, replace the contents of your local styles/Home.module.css with the styles/Home.module.css.

When you navigate to http://localhost:3000 in your browser you should see the following:

6. Build the Token-Gated Gallery Page

Now, let's create the page that will only be accessible to those who verify token ownership of the required ERC20, ERC721, or ERC1155 token(s). For the purposes of this demo we are token-gate a photo gallery; however this page could be anything you want. It could be a live video stream, exclusive merchandise, or whatever else you dream up!

Create a new file pages/gallery.tsx. This page will render 5 photos we picked from across the internet to authorized users.

Copy and paste the contents of pages/gallery.tsx into your local pages/gallery.tsx.

Let's style this page. Create a new file styles/Gallery.module.css. Now, copy and paste the contents of styles/Gallery.module.css into your local file.

This page will be available at http://localhost:3000/gallery, but to access it, we need to sign-in with Picket.

7. Add Token Ownership Requirements

To token-gate access, we need to enforce token ownership on login. For this tutorial, we will use CryptoKitties) to token-gate our gallery. Users will need to own at least one CryptoKitty NFT token to access the gallery page. Picket works with any ERC-20, ERC-721 or ERC-1155 token on the ethereum-mainnet . You'll want to pick a token contract that your wallet owns to test out the token-gating functionality yourself.

The contract address for CryptoKitties is: 0x06012c8cf97BEaD5deAe237070F9587f8E7A266d

If you’re not sure what the contract address is for your token is, Etherscan is a great resource. It'll give you information about any ERC-20, ERC-721, ERC-1155 token.

Now, let's update the login (aka token ownership) requirements in pages/index.tsx

// at the top of pages/index.tsx
// TODO: Replace with your requirements of choice!
const loginRequirements = {
  // Replace this example address with whichever contract you are verifying ownership for
  contractAddress: "0x06012c8cf97BEaD5deAe237070F9587f8E7A266d",
  // Replace with minimum balance you want to verify users' currently hold,
  // or omit if any number of tokens is sufficient
  minTokenBalance: 1,
};

8. Try it out!

Now, when you run npm run dev from the command line and navigate to http://localhost:3000 in your browser you should have a working app that lets you tap on the “Connect Wallet” button to initiate a signing request and verify your wallet and token ownership.

If all goes well, and you meet the token ownership requirements, you'll see the following page:

Congratulations! You’ve created a fully functional token gated gallery that is only accessible to users who have the necessary token. You can token gate any page or APIs using these same methods.