{"id":25588591,"url":"https://github.com/picketapi/picket-example-gated-gallery","last_synced_at":"2026-04-11T05:30:16.832Z","repository":{"id":40479533,"uuid":"477457785","full_name":"picketapi/picket-example-gated-gallery","owner":"picketapi","description":null,"archived":false,"fork":false,"pushed_at":"2022-10-18T18:14:04.000Z","size":1463,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-08-04T05:11:39.438Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/picketapi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-03T20:28:10.000Z","updated_at":"2023-08-04T05:11:39.439Z","dependencies_parsed_at":"2023-01-19T19:55:00.518Z","dependency_job_id":null,"html_url":"https://github.com/picketapi/picket-example-gated-gallery","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picketapi%2Fpicket-example-gated-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picketapi%2Fpicket-example-gated-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picketapi%2Fpicket-example-gated-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picketapi%2Fpicket-example-gated-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/picketapi","download_url":"https://codeload.github.com/picketapi/picket-example-gated-gallery/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239985714,"owners_count":19729512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-21T08:38:56.784Z","updated_at":"2026-04-11T05:30:16.778Z","avatar_url":"https://github.com/picketapi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Picket Gated Gallery Example\nFor this example we’ll be using [Next.js](https://nextjs.org/). While few of the [Next.js](https://nextjs.org/) 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](https://vercel.com/).\n\n## 1. Create your Next.js app\n\nIn your terminal `cd` into the directory where you’d like your project folder to reside and enter the following into the terminal:\n`npx create-next-app@latest —typescript`\n\nConfirm your app is running on localhost by running\n `npm run dev`\n\nNow, when you navigate to http://localhost:3000 in your browser you should see the following:\n\n## 2. Install the Picket React SDK\n\n```shell\nnpm install \"@picketapi/picket-react\"\n```\n## 3. Setup the Picket Provider \nReplace the contents of `pages/_app.tsx` with the following: \n\n```tsx\nimport \"../styles/globals.css\";\nimport type { AppProps } from \"next/app\";\n\nimport { PicketProvider } from \"@picketapi/picket-react\";\n\nconst apiKey = \"YOUR_PUBLISHABLE_KEY_GOES_HERE\";\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    \u003cPicketProvider apiKey={apiKey}\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/PicketProvider\u003e\n  );\n}\n\nexport default MyApp;\n```\n\nThe `PicketProvider` makes Picket and the user's authentication state available throughout your app via the `usePicket` hook.\n\n## 4. Add Your API Key\nYou'll need to add your publishable API key to make this functional. Navigate to your [Picket account dashboard](https://picketapi.com/dashboard) and copy your publishable key from a project. Now paste it into the `pages/_app.tsx`\n\n```tsx\n// in pages/_app.tsx\n// Replace with your copied publishable key\nconst apiKey = \"YOUR_PUBLISHABLE_KEY_GOES_HERE\";\n```\n\n## 5. Build your home page\nCopy and paste the contents of [pages/index.tsx](https://github.com/picketapi/picket-example-gated-gallery/blob/main/pages/index.tsx) into your local `pages/index.tsx`.\n\nThe 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.\n\nNext up, replace the contents of your local `styles/Home.module.css` with the [styles/Home.module.css](https://github.com/picketapi/picket-example-gated-gallery/blob/main/styles/Home.module.css).\n\n\nWhen you navigate to http://localhost:3000 in your browser you should see the following:\n\n![image](https://picket-static-files.s3.amazonaws.com/login-home.png)\n\n## 6. Build the Token-Gated Gallery Page\nNow, 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!\n\nCreate a new file `pages/gallery.tsx`. This page will render 5 photos we picked from across the internet to authorized users.\n\nCopy and paste the contents of [pages/gallery.tsx](https://github.com/picketapi/picket-example-gated-gallery/blob/main/pages/gallery.tsx) into your local `pages/gallery.tsx`.\n\nLet's style this page. Create a new file `styles/Gallery.module.css`. Now, copy and paste the contents of [styles/Gallery.module.css](https://github.com/picketapi/picket-example-gated-gallery/blob/main/styles/Gallery.module.css) into your local file.\n\nThis page will be available at http://localhost:3000/gallery, but to access it, we need to sign-in with [Picket](https://picketapi.com/).\n\n![image](https://picket-static-files.s3.amazonaws.com/gallery-unknown-wallet.png)\n\n## 7. Add Token Ownership Requirements\n\nTo token-gate access, we need to enforce [token ownership on login](https://docs.picketapi.com/picket-docs/reference/libraries-and-sdks/javascript-library-picket-js#login). For this tutorial, we will use [CryptoKitties](https://opensea.io/collection/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.\n\nThe contract address for CryptoKitties is: `0x06012c8cf97BEaD5deAe237070F9587f8E7A266d`\n\nIf you’re not sure what the contract address is for your token is, [Etherscan](https://etherscan.io/) is a great resource. It'll give you information about any ERC-20, ERC-721, ERC-1155 token.\n\nNow, let's update the login (aka token ownership) requirements in `pages/index.tsx`\n\n```ts\n// at the top of pages/index.tsx\n// TODO: Replace with your requirements of choice!\nconst loginRequirements = {\n  // Replace this example address with whichever contract you are verifying ownership for\n  contractAddress: \"0x06012c8cf97BEaD5deAe237070F9587f8E7A266d\",\n  // Replace with minimum balance you want to verify users' currently hold,\n  // or omit if any number of tokens is sufficient\n  minTokenBalance: 1,\n};\n```\n## 8. Try it out!\nNow, 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.\n\nIf all goes well, and you meet the token ownership requirements, you'll see the following page: \n\n![image](https://picket-static-files.s3.amazonaws.com/gallery-noahfradin.png)\n \n\nCongratulations! 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicketapi%2Fpicket-example-gated-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpicketapi%2Fpicket-example-gated-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicketapi%2Fpicket-example-gated-gallery/lists"}