> For the complete documentation index, see [llms.txt](https://docs.picketapi.com/picket-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.picketapi.com/picket-docs/tutorials/token-gated-photo-board-react.md).

# Token Gated Photo Board (React)

For a step by step tutorial for allowing users to sign in to your app with their wallet, follow the README on [Github](https://github.com/picketapi/picket-example-gated-gallery). 

Alternatively, you can [clone the repository](https://github.com/picketapi/picket-example-gated-gallery) and run the example to preview the final results by following these instructions:

**Step 1: Clone the repository**

Paste the following into your terminal and hit enter: 

```bash
git clone git@github.com:picketapi/picket-example-gated-gallery.git
```

**Step 2: Install dependencies**

Cd into the cloned directory

```bash
cd picket-example-gated-gallery/
```

Install dependencies from `package.json` by running the following command in your terminal.

```bash
npm install
```

**Step 3: Insert your publishable API key**

Open the repository in any code editor and locate the file named `_app.tsx` in the `pages/` directory

Within that file you'll see a line of code that looks like this: 

```typescript
const apiKey = "YOUR_PUBLISHABLE_KEY_GOES_HERE";
```

Replace `YOUR_PUBLISHABLE_KEY_GOES_HERE` with your publishable key, which you can find on your picket [dashboard](https://picketapi.com/dashboard) once you have logged in. 

**Step 4: Run App and Test**

Run the following in your terminal to run the app:

```bash
npm run dev
```

To test the app go to `localhost:3000` in any browser to see the following:

![](/files/I25MrhvE2fp4PCCw17ga)

You can now click on that button to experience log in and token gating for yourself. You also have the cloned repository on your computer for inspection. You can mess with it to learn and start building your next project.

**Step 5: Change the token used for token gating**

If you'd like to set the token gate to require tokens that you own, you can do that by changing the token ownership requirements that are passed to picket.

Find the file named `index.tsx` in the `pages/` directory. Within that file you'll see a block of code that looks like this: 

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

Replace the contract address (currently set to `"0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"`) with the contract address of whichever token you want to require. 

To find the contract address of a token you own, one easy way is to go to [etherscan](https://etherscan.io) and search for your token. For example to find the contract address for Doodles NFTs, search for Doodles:

![](/files/NEnpkaG2hW6dHtzSQLvl)

And then locate the contract address on the detail page once you click through:

![](/files/ytiuv0kSSw5Ljtiu6NF6)

This example uses Ethereum and this way of finding contract addresses works for NFTs and ERC-20s. 

In addition to setting the required token you can also set the minimum balance of tokens the user needs to hold. To change this simply change the minTokenBalance parameter (currently set to 1) to whichever minimum number you'd like to require.

**If you have any issues getting to this point, feel free to reach out to us at** [**team@picketapi.com**](mailto:team@picketapi.com)