Pinata
Published in

Pinata

How To Use Sign In With Ethereum And NFTs To Build A Token Gated Instagram

Using Next.js and Pinata

Getting Started

This app will make use of Pinata’s paid plan features. You can get started for as little as $20/month and get access to Dedicated Gateways, Submarining, Custom Domains, and more.

Sign In With Ethereum

Because we’re using Next.js (which leverages server-side rendering), we’re going to need to install some additional dependencies alongside our SIWE dependency. One of the dependencies will be for session management, and one of them will be for convenience.

npm i siwe next-auth wagmi
NEXTAUTH_SECRET=somereallysecretsecret
JWT_SECRET=itshouldbealsoverysecret
DOMAIN=localhost:3000
-api
-auth
-[...nextauth].js

Checking For NFT Ownership

We’ve covered this topic in the past, but it’s worth going over again. Once we’ve verified that the signature is valid, we can then trust the wallet address associated with that signature. That means we can now check if that wallet owns the NFT we expect it to own.

npm i ethers
import { ethers } from "ethers";

Creating The Gallery

If you remember, any folder or file nested under the pages directory in a Next.js project (besides the api folder) becomes a page in your app. So, we need to create a new file in the pages folder called gallery.js. Once you’ve done that, add the following boilerplate code:

  1. Allow users to view gallery of images that other holders have uploaded
  2. Allow users to upload their own images

Adding Photos To The Gallery

We’ve created the gallery, but it’s empty. We can change that by letting authenticated users upload photos to the gallery.

npm i form-data formidable
import formidable from "formidable";
import fs from "fs";
import FormData from "form-data"

Wrapping Up

It could use some styling, but it’s working. What you’re seeing is essentially an NFT gated version of Instagram using private IPFS (Pinata Submarine) and Sign In With Ethereum.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store