Filebase
HomepageFilebase DashboardDiscordBlog
  • 👋Welcome to Filebase!
  • Getting Started
    • FAQ
    • Service Limits
    • Getting Started Guides
      • Pin Your First File To IPFS
      • Developer Quick Start Guide
  • IPFS Concepts
    • What is IPFS?
    • What is an IPFS CID?
    • What is IPFS Pinning?
    • What is an IPFS Gateway?
  • IPFS Pinning
    • Pinning Files
    • Listing Files
    • Deleting Files
    • Event Notifications
  • IPNS Names
    • Managing Names
  • Dedicated IPFS Gateways
    • Managing Dedicated Gateways
    • Access Controls
    • Image Optimizations
    • Adding a Custom Domain
  • API Documentation
    • S3-Compatible API
      • Cross Origin Resource Sharing (CORS)
        • Create and Apply a CORS Rule to a Filebase Bucket
        • Deep Dive: Cross Origin Resource Sharing (CORS)
      • Pre-Signed URLs
    • Filebase Platform APIs
    • IPFS Pinning Service API
  • Code Development + SDKs
    • Code Development
      • Apache Libcloud - Python
      • Apostrophe CMS
      • AWS Lambda - NodeJS
      • AWS Lambda - Python
      • AWS SDK - Go (Golang)
      • AWS SDK - Java
      • AWS SDK - JavaScript
      • AWS SDK - .NET
      • AWS SDK - PHP
      • AWS SDK - Python
      • AWS SDK - Ruby
      • Code Examples
        • How To Utilize Filebase with NodeJS
      • DataCamp
      • Dart / Flutter
      • Django
      • Docker
        • Docker Volume Backup
      • Elixir Phoenix
      • Filebase NPM Package
      • Fog.io - Ruby
      • Google App Scripts
      • Integrated Haskell Platform
      • Laravel
      • Nuxt
      • Paperspace
      • Postman
      • Reading a JSON File
      • UNA
      • Unity
      • Uppy AWS S3 Plugin
      • Vue
      • Watcher for NodeJS
      • Webpack S3 Plugin
      • Xamarin
    • SDK Examples: Pinning Files and Folders to IPFS
      • AWS SDK for .NET
      • AWS SDK for Go
      • AWS SDK for JavaScript
      • AWS SDK for PHP
      • AWS SDK for Python
      • AWS SDK for Ruby
  • Archive
    • Content Archive
      • IPFS Getting Started Guide
      • Web Console Getting Started Guide
      • IPFS Tools
        • IPFS CLI
        • IPFS Desktop
        • IPFS Pin Sync
        • IPFS Pinning Service API
        • IPFS3up
      • Third Party Tools and Clients
        • Backup Client Configurations
          • AhsayCBS
          • BackupAssist Classic
          • BackupAssist ER
          • BackupNinja
          • BackupSheep
          • Bacula Enterprise Edition
          • CloudBacko
          • CloudBerry Backup
          • Cloudron
          • cPanel
          • Comet
          • Commvault
          • Duplicacy
          • Ghost IPFS Storage Adapter
          • IPFS Pinning GitHub Action
          • JetBackup
          • Kopia
          • MoveBot
          • MSP360 Online Backup
          • oDrive
          • Photos+ Cloud Library
          • qBackup
          • S3 Uploader for GitHub Actions
          • SimpleBackups
          • SnapShooter
          • Strapi Provider Plugin
          • Veeam
          • Wordpress
            • Media Cloud
            • XCloner
          • Zerto
        • CLI Tools
          • Ansible
          • Apache Pulsar
          • AWS CLI
            • How To Delete Data with AWS CLI
            • What is Multipart Upload?
          • Bash
            • Backup Files to IPFS with Bash
            • Laravel Backup with Bash
            • MongoDB Backup with Bash
            • PostgreSQL Backup with Bash
            • Wordpress Backup with Bash
          • cURL
          • Elasticsearch
          • IPFS-CAR
          • IPFScrape
          • IPGet
          • Jenkins
          • JFrog Artifactory
          • Kubernetes
            • Backup and Restore InFluxDB to Filebase with TrilioVault
            • CSI-S3
            • Kasten K10
            • Kerberos Vault
            • Longhorn.io
            • Stash for Kubernetes
            • Velero
          • Litestream
          • Minty
          • MongoDB
          • MoSMB
          • MySQL
          • Next.js .CAR File Upload
          • NFT Image Generator
          • NGINX S3 Gateway
          • Pinning Docker Images to IPFS
          • Pinning Encrypted Files to IPFS
          • PowerShell
            • Calculate the Size of Filebase Buckets using PowerShell
          • Rclone
            • Backing Up DigitalOcean Spaces to Filebase using Rclone
          • Restic
          • S3cmd
          • S3Express
          • S3FS-FUSE
          • S3QL
          • S3Surfer
          • S4cmd
          • SeaweedFS
          • Tableland
        • Content Delivery Networks
          • Bunny CDN
          • CloudFront CDN
          • Fastly CDN
        • File Management Client Configurations
          • Airbyte
          • Arq
          • Astiga
          • AWS Rekognition
          • AWS S3 Manager - iOS App
          • BucketAnywhere for S3 - Android App
          • CentreStack
          • CloudFlyer
          • Cloudfser
          • Couchdrop
          • CrossFTP
          • CyberDuck
            • How To Delete Data with CyberDuck
          • Dropshare
          • Duplicati
          • FileBrowserGO
          • Flexify.IO
          • ForkLift
          • Goofys
          • Joplin
          • LucidLink
          • MASV
          • Matrix Synapse
          • MinIO Gateway for S3
          • Mountain Duck
          • NetDrive
          • Nexfs
          • NextCloud
          • Nodeum
          • ownCloud
          • Plesk
          • Pure Storage FlashBlade
          • RaiDrive
          • S3 Browser
          • ShareX
          • SmartFTP
          • StableBit Cloud Drive
          • Storage Made Easy Enterprise File Fabric
          • WinSCP
        • NAS Device Configurations
          • Buffalo TeraStation
          • Datadobi DobiProtect
          • Netapp ONTAP Select
          • OpenDrives Atlas
          • Synology Hyper Backup
          • TrueNAS CORE
      • Knowledge Base
        • Deep Dives
          • Deep Dive: Blockchains
          • Deep Dive: Decentralized Compute
          • Deep Dive: Decentralized Digital Identity
          • Deep Dive: Decentralized Storage
          • Deep Dive: Erasure Coding
          • Deep Dive: Geo-Redundancy
          • Deep Dive: Metadata
          • Deep Dive: Metaverse
          • Deep Dive: NFTs
          • Deep Dive: Web3
        • Filebase eBooks
        • Filebase One-Pagers
        • Filebase Whitepapers
        • Web3 Tutorials
          • Alchemy
            • Alchemy: Build a dApp That Provides Real-Time Ethereum Transaction Notifications
            • Alchemy: Create a Full-Stack dApp
            • Alchemy: Create a Hello World Smart Contract
            • Alchemy: Create Your Own ERC20 Cryptocurrency
            • Alchemy: Decentralized Youtube
            • Alchemy: How to Create and Mint an NFT using Filebase
            • Alchemy: How to Mint an NFT Using Web3.js
            • Alchemy: Using The Alchemy SDK with NFTs Minted Through thirdweb
          • Agoric
            • Agoric: Create a DeFi dApp Using Agoric That’s Stored on Filebase
          • AirSwap
            • AirSwap: Track NFT Contract Addresses with AirSwap CLI
          • ArcBlock
            • ArcBlock: Running an ArcBlock Blocket Server on IPFS
          • Ankr
            • Ankr: Create a Truffle Project with Ankr and Filebase
            • Ankr: Deploy a Smart Contract on Polygon using Ankr that is backed up to Filebase
          • Avalanche
            • Avalanche: How To Launch a Generative NFT Collection With Avalanche and IPFS
          • Backing Up NFTs
          • Brownie
            • Brownie: Create and Mint an NFT Using Brownie
          • Bueno
            • Bueno: How to Create a Generative NFT Collection with Bueno
          • Cardano
            • Cardano: Submit Cardano Blockchain Transactions with Embedded Metadata Stored on Filebase
          • Ceramic
            • Ceramic: How to Host a Ceramic Node Using Decentralized Storage
          • Create-IPFS-app
          • Cosmos
            • Cosmos: Storing Cosmos Chain Governance Metadata on IPFS
          • DeCommerce
          • Ethereum Name Service
            • ENS: Configure an ENS Domain to use a Filebase IPFS Dedicated Gateway
          • Figment Datahub
            • Figment Datahub and Avalanche: Make an e-Voting dApp Using Figment Datahub, Avalanche, and Filebase
            • Figment Datahub and Celo Network: Create an ERC1155 NFT on the Celo Network using Figment Datahub and Objects Stored on Filebase
          • Flow
            • Flow: How to Create an NFT Marketplace with Filebase + Flow
          • Fauna
            • Fauna: Host an Application on IPFS with IPFS Dedicated Gateways
          • Ganache
            • Ganache: Create a dApp Hosted on IPFS
          • GUN
            • GUN: Create a Decentralized Chat App with GUN and IPFS
          • Hardhat
            • Hardhat: Creating an NFT Contract using Hardhat and Setting NFT Metadata using IPFS on Filebase
          • Harmony
            • Harmony: Deploy an HRC721 NFT on Harmony with IPFS
          • Hosting a Form on IPFS
          • iExec
            • iExec: Using iExec and Tee Worker to Create Apps that Use Datasets Stored on Filebase
          • Infura
            • Infura: Build dApp Frontends with Infura, React, and IPFS
            • Infura: Create an NFT Contract Factory with Metadata stored on IPFS
          • Lens Protocol
            • Lens Protocol: Build a Decentralized Social Media Network Stored on IPFS
          • LIT Protocol
            • LIT Protocol: Create a MintLIT NFT with LIT Protocol and IPFS
          • LivePeer
            • LivePeer: Mint a Video NFT with LivePeer
          • Macrometa
            • Macrometa: Track IPFS Files with Macrometa
          • Mina Protocol
            • Mina Protocol: Create a Simple zkApp with Mina Protocol and IPFS
          • NEAR Protocol
            • NEAR Protocol: Storing Off-Chain Data on IPFS using Filebase
          • NFTPort
            • NFTPort: Create an NFT Collection with NFTPort
          • Ocean Protocol
            • Ocean Protocol: Publish Data NFTs Stored on IPFS using Ocean Protocol
          • Pin Tezos Tokens Tool
          • Polkadot
            • Polkadot: Deploy a Polkadot dApp on Decentralized Storage
          • Polygon
            • Polygon: Building an App NFT With Polygon
            • Polygon: Make a Donation App with IPFS and Polygon
          • Python
            • Generating NFT Metadata with Python
          • QuickNode
            • QuickNode: Create a Token dApp using QuickNode
          • Remix
            • Remix: Create a Web App with Remix to Upload to Decentralized Storage
          • Remix IDE
            • Remix IDE: Creating Interactive NFTs with IPFS and Remix IDE
          • Secret Network
            • Secret Network: Create an NFT on Secret Network with Data Stored on IPFS
          • Stargaze
            • Stargaze: Create an NFT Collection Using IPFS and Stargaze
          • Starknet
            • Starknet: Create a HardHat Project Using A Starknet Plugin Hosted On IPFS
          • Studio 721
            • Studio 721: Create an NFT Collection with Studio 721 and IPFS
          • Solana
            • Solana: Minting an NFT Using Sugar, Candy Machine, and Filebase
          • Subsquid
            • Subsquid: Querying NFT Data using Subsquid and a Filebase IPFS Dedicated Gateway
          • Tailwind CSS
            • Tailwind CSS: Build an Image Gallery App with IPFS and Tailwind CSS
          • Tatum
            • Tatum: How To Mint NFTs on Solana with Tatum
          • Tezos
            • Tezos: Create an NFT on the Tezos Network using IPFS on Filebase
          • thirdweb
            • thirdweb: Build an NFT Loot Box with thirdweb and IPFS
            • thirdweb: Build an NFT Minting Page with thirdweb, IPFS, RainbowKit, and WAGMI
            • thirdweb: Create a Discord Bot That Gives Roles to NFT Holders
            • thirdweb: Create a Gated Website Using NFTs and IPFS
            • thirdweb: Create an NFT Marketplace with thirdweb and IPFS
            • thirdweb: Release an NFT Drop Using thirdweb and IPFS
          • useDApp
            • useDApp: Create a dApp using useDApp and IPFS
          • Unstoppable Domains
            • Unstoppable Domains: Create a Decentralized Website Using Unstoppable Domains and IPFS Folders
            • Unstoppable Domains: Deploy a Decentralized Blog Using Unstoppable Domains, Akash, and IPFS
            • Unstoppable Domains: IPFS Configuration
          • Vultr
            • Vultr: Store Bedrock Minecraft Worlds on Decentralized Storage
            • Vultr: Store Forge Minecraft Worlds on Decentralized Storage
            • Vultr: Store PaperSpigot Minecraft Worlds on Decentralized Storage
            • Vultr: Store Vanilla Minecraft Worlds on Decentralized Storage
          • Waffle
            • Waffle: Deploy a Smart Contract with Waffle That’s Stored on IPFS
          • Walt.id
            • Walt.id: Mint an NFT with Walt.id and Filebase
          • Web3 Toolbox
            • Web3 Toolbox: Building an NFT Drop With Web3 Toolbox
Powered by GitBook
On this page
  • What is thirdweb?
  • 1. Start by navigating to the thirdweb dashboard and connecting your crypto wallet.
  • 2. Select ‘Deploy New Contract'.
  • 3. Under 'NFTs', select ‘NFT Collection’:
  • 4. Give your NFT collection a name, icon, and description, then confirm that the recipient address is your crypto wallet address.
  • 5. Select ‘Deploy Now’ and confirm the transaction through your crypto wallet.
  • 6. Next, we need to create an IPFS bucket on Filebase.
  • 7. Select ‘Buckets’ from the left sidebar menu, or navigate to.
  • 8. Enter a bucket name and choose the IPFS storage network to create the bucket.
  • 9. Now, upload your NFTs to Filebase using the web console and selecting ‘Folder’, then select the folder that contains your NFT files.
  • 10. You will see your folder uploaded as a single object:
  • 11. Copy the CID of your folder:
  • 12. Navigate to your IPFS Folder using the Filebase IPFS gateway to see your folder’s files:
  • 13. Head back to the thirdweb dashboard, where you will see the page for your NFT collection.
  • 14. Open a command line window and install the thirdweb SDK:
  • 15. Open an IDE such as VSCode and insert the following code, replacing the following values:
  • 16. Save this script as mint.js, then run this script with the command:
  • 17. Refresh your thirdweb dashboard. Your NFTs will be listed.
  • 18. Then, in a new terminal window, create a thirdweb app using the thirdweb CLI:
  • 19. Go to the Discord Developer Portal and select ‘New Application’:
  • 20. Give your app a name, then select ‘Create’:
  • 21. Once created, select the ‘Bot’ option on the left side-bar menu.
  • 22. Give your bot a name to be displayed when it joins the server, and then toggle ‘public bot’ to be off.
  • 23. Scroll down to bot permissions, then select ‘Manage Roles’ as the only permission given to this bot.
  • 24. Save your changes.
  • 25. Select the ‘OAuth2’ option from the left side bar menu, then ‘URL Generator’.
  • 26. Select the check boxes for ‘bot’ under ‘Scope’, and ‘Manage Roles’ under ‘Bot Permissions’.
  • 27. Open the copied URL in your browser.
  • 28. Navigate back to your terminal window, and navigate inside the thirdweb app we created earlier and install the required dependencies:
  • 29. Then, create a new folder within the directory pages called api, with another folder inside called auth:
  • 30. Navigate into the auth folder, then create a new file called [...nextauth].ts
  • 31. Back in the Discord Developer Portal, copy the Client ID and Client Secret values.
  • 32. Navigate back to the root of your project, then create a new file called .env.local.
  • 33. Then, back in the Discord Developer Portal, add the following redirect link for your bot:
  • 34. Save your changes.
  • 35. Open the […nextauth].ts file and insert the following code:
  • 36. Save this file.
  • 37. Next, we need to create the code for the following workflows:
  • 38. First, create a new folder at the root of the project called components and create a SignIn.tsx file inside it.
  • 39. Open the index.tsx file and replace the existing content with the following:
  • 40. Run the following command to start your app:
  • 41. Your app will be running at localhost:3000 and will look like this:
  • 42. Select ‘Connect Wallet’ to connect your crypto wallet to your app.
  • 43. Then, select ‘Connect Discord’ to connect your Discord account.
  • 44. Select ‘Authorize’ to authenticate your Discord bot with your Discord account.
  • 45. You will see a ‘Give me the role!’ button. Let’s add functionality for this before using it.
  • 46. Head to the Discord Developer Portal and select ‘Bot’ from the left side-bar menu.
  • 47. Open your .env.local file and insert the following line for your bot’s token:
  • 48. Create a new file in the api directory called grant-role.ts.
  • 49. Open the index.tsx file and add the following code to create a new function after the const sdk = useSDK(): line:
  • 50. Then, add the replace the existing button code with the lines:
  • 51. Restart your app with yarn run dev, and connect your wallet and Discord to the app again.
  • 52. Once signed, the bot will give the authenticated user the configured role:

Was this helpful?

  1. Archive
  2. Content Archive
  3. Knowledge Base
  4. Web3 Tutorials
  5. thirdweb

thirdweb: Create a Discord Bot That Gives Roles to NFT Holders

Learn how to create a Discord bot that gives roles to NFT holders.

Previousthirdweb: Build an NFT Minting Page with thirdweb, IPFS, RainbowKit, and WAGMINextthirdweb: Create a Gated Website Using NFTs and IPFS

Last updated 9 months ago

Was this helpful?

What is thirdweb?

thirdweb is an easy-to-use platform to build Web3 applications with code or no-code. thirdweb makes creating and deploying apps such as NFT collections or NFT marketplaces easy. thirdweb can be used with objects stored on IPFS, so objects stored in a Filebase IPFS bucket can be seamlessly uploaded for use with a Thirdweb app.

Read below to learn how to create a Discord bot that gives roles to NFT holders.

Prerequisites:

1. Start by navigating to the and connecting your crypto wallet.

2. Select ‘Deploy New Contract'.

3. Under 'NFTs', select ‘NFT Collection’:

Then select 'Deploy Now'.

4. Give your NFT collection a name, icon, and description, then confirm that the recipient address is your crypto wallet address.

For this tutorial, we’ll be using the Mumbai testnet, so we are using a Mumbai wallet.

5. Select ‘Deploy Now’ and confirm the transaction through your crypto wallet.

6. Next, we need to create an IPFS bucket on Filebase.

7. Select ‘Buckets’ from the left sidebar menu, or navigate to.

Select ‘Create Bucket’ in the top right corner to create a new bucket for your NFTs.

8. Enter a bucket name and choose the IPFS storage network to create the bucket.

Bucket names must be unique across all Filebase users, be between 3 and 63 characters long, and can contain only lowercase characters, numbers, and dashes.

9. Now, upload your NFTs to Filebase using the web console and selecting ‘Folder’, then select the folder that contains your NFT files.

These files need to be named in sequential order, such as 0.png, 1.png, 2.png, etc.

10. You will see your folder uploaded as a single object:

11. Copy the CID of your folder:

12. Navigate to your IPFS Folder using the Filebase IPFS gateway to see your folder’s files:

https://ipfs.filebase.io/ipfs/IPFS_CID

Take note of this URL.

13. Head back to the thirdweb dashboard, where you will see the page for your NFT collection.

Select the ‘Code’ tab. This code showcases different code snippets to use to mint your NFTs using scripts, with your contract address and crypto wallet address inputted automatically for easy copy and paste. This tutorial will showcase the JavaScript code examples, but you can use any of the languages showcased in this Code tab. You can follow along with the code examples showcased in this tutorial, or copy and paste the snippets provided in this tab.

14. Open a command line window and install the thirdweb SDK:

npm install @thirdweb-dev/sdk

15. Open an IDE such as VSCode and insert the following code, replacing the following values:

  • CONTRACT with your contract address.

  • WALLET_ADDRESS with your crypto wallet address.

  • Each IPFS_CID with your IPFS folder CID you took note of earlier.

  • Replace the name and description of each NFT with your desired information.

import { ThirdwebSDK } from "@thirdweb-dev/sdk";

const sdk = new ThirdwebSDK("mumbai");
const contract = sdk.getContract("CONTRACT", "nft-collection");

// Address of the wallet you want to mint the NFT to
const walletAddress = "WALLET_ADDRESS";

// Custom metadata of the NFTs you want to mint.
const metadatas = [{
  name: "Cool NFT #1",
  description: "This is a cool NFT",
  image: fs.readFileSync("https://ipfs.filebase.io/ipfs/IPFS_CID/0.png"), // This can be an image url or file
}, {
  name: "Cool NFT #2",
  description: "This is a cool NFT",
  image: fs.readFileSync("https://ipfs.filebase.io/ipfs/IPFS_CID/1.png"),
}];

const tx = await contract.mintBatchTo(walletAddress, metadatas);
const receipt = tx[0].receipt; // same transaction receipt for all minted NFTs
const firstTokenId = tx[0].id; // token id of the first minted NFT
const firstNFT = await tx[0].data(); // (optional) fetch details of the first minted NFT

You can edit this script to include as many NFTs as you’d like to mint at one time.

16. Save this script as mint.js, then run this script with the command:

node mint.js

17. Refresh your thirdweb dashboard. Your NFTs will be listed.

18. Then, in a new terminal window, create a thirdweb app using the thirdweb CLI:

npx thirdweb create

When prompted, select the following options:

  • Type of Project: App

  • Project Name: discord-bot

  • Framework: Next.js

  • Language: TypeScript

20. Give your app a name, then select ‘Create’:

21. Once created, select the ‘Bot’ option on the left side-bar menu.

Then select ‘Add Bot’, and confirm the action:

22. Give your bot a name to be displayed when it joins the server, and then toggle ‘public bot’ to be off.

This bot should not be allowed to join servers other than the ones that you add it to yourself.

23. Scroll down to bot permissions, then select ‘Manage Roles’ as the only permission given to this bot.

This is important since Discord bots can be compromised, and if the permissions allow for destructive actions, malicious attackers can use bots to ruin a Discord server.

24. Save your changes.

25. Select the ‘OAuth2’ option from the left side bar menu, then ‘URL Generator’.

26. Select the check boxes for ‘bot’ under ‘Scope’, and ‘Manage Roles’ under ‘Bot Permissions’.

Then select ‘Copy’ next to the generated URL:

27. Open the copied URL in your browser.

You will be prompted to add your bot to a server. Select a server that you have Manage Server permissions in, then select ‘Continue’. Confirm that the bot will obtain the Manage Roles permission, then authorize the bot to join the server.

28. Navigate back to your terminal window, and navigate inside the thirdweb app we created earlier and install the required dependencies:

cd discord-bot

npm install

npm install next-auth

29. Then, create a new folder within the directory pages called api, with another folder inside called auth:

mkdir pages/api/

mkdir pages/api/auth

30. Navigate into the auth folder, then create a new file called [...nextauth].ts

cd pages/api/auth

yarn add next-auth

touch [...nextauth].ts

31. Back in the Discord Developer Portal, copy the Client ID and Client Secret values.

32. Navigate back to the root of your project, then create a new file called .env.local.

Paste these values into this .env.local file in the following format:

CLIENT_ID=xxxxx

CLIENT_SECRET=xxxxx

33. Then, back in the Discord Developer Portal, add the following redirect link for your bot:

http://localhost:3000/api/auth/callback/discord

34. Save your changes.

35. Open the […nextauth].ts file and insert the following code:

import NextAuth from "next-auth";
import DiscordProvider from "next-auth/providers/discord";
export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    DiscordProvider({
      clientId: process.env.CLIENT_ID as string,
      clientSecret: process.env.CLIENT_SECRET as string,
    }),
  ],

  // When the user signs in, get their token
  callbacks: {
    async jwt({ token, account }) {
      // Persist the OAuth access_token to the token right after signin
      if (account) {
        token.userId = account.providerAccountId;
      }
      return token;
    },

    async session({ session, token, user }) {
      // Send properties to the client, like an access_token from a provider.
      session.userId = token.userId;
      return session;
    },
  },
});

36. Save this file.

Then, open the _app.txs file in the api directory, and replace the existing content with the following:

import type { AppProps } from "next/app";
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";
import { SessionProvider } from "next-auth/react";
import "../styles/globals.css";

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mumbai;

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThirdwebProvider desiredChainId={activeChainId}>
      <SessionProvider session={pageProps.session}>
        <Component {...pageProps} />
      </SessionProvider>
    </ThirdwebProvider>
  );
}

export default MyApp;

37. Next, we need to create the code for the following workflows:

  • A user signs into the app with their Crypto wallet.

  • The user must authenticate with their Discord account.

We’ll create code for the three possible outcomes of this workflow:

  • A user is connected to both their wallet and Discord.

  • A user is not connected to their wallet.

  • A user is not connected to their Discord account.

38. First, create a new folder at the root of the project called components and create a SignIn.tsx file inside it.

Open this file in your IDE and insert the following code:

import { useAddress, useDisconnect, useMetamask } from "@thirdweb-dev/react";
import { useSession, signIn, signOut } from "next-auth/react";
import React from "react";
import styles from "../styles/Home.module.css";

export default function SignIn() {
  const address = useAddress();
  const connectWithMetamask = useMetamask();
  const disconnectWallet = useDisconnect();
  const { data: session } = useSession();

// 1. The user is signed into discord and connected to wallet.
if (session && address) {
    return (
      <div className={styles.bigSpacerTop}>
        <a onClick={() => signOut()} className={styles.secondaryButton}>
          Sign out of Discord
        </a>
        |<a onClick={() => disconnectWallet()} className={styles.secondaryButton}>
          Disconnect wallet
        </a>
      </div>
    );
  }

  // 2. Connect Wallet
if (!address) {
    return (
      <div className={styles.main}>
        <h2 className={styles.noGapBottom}>Connect Your Wallet</h2>
        <p>Connect your wallet to check eligibility.</p>
        <button
          onClick={connectWithMetamask}
          className={`${styles.mainButton} ${styles.spacerTop}`}
        >
          Connect Wallet
        </button>
      </div>
    );
  }

  // 3. Connect with Discord (OAuth)
if (!session) {
    return (
      <div className={`${styles.main}`}>
        <h2 className={styles.noGapBottom}>Sign In with Discord</h2>
        <p>Sign In with Discord to check your eligibility for the NFT!</p>
  
        <button
          onClick={() => signIn("discord")}
          className={`${styles.mainButton} ${styles.spacerTop}`}
        >
          Connect Discord
        </button>
      </div>
    );
  }
  
  // default return nothing
  return null;
  
}

39. Open the index.tsx file and replace the existing content with the following:

import { useAddress, useSDK } from "@thirdweb-dev/react";
import { useSession } from "next-auth/react";
import SignIn from "../components/SignIn";
import type { NextPage } from "next";
import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  const address = useAddress();
  const { data: session } = useSession();
  const sdk = useSDK();

  return (
    <div>
      <div className={styles.container} style={{ marginTop: 0 }}>
        <SignIn />

        {address && session && (
          <div className={styles.collectionContainer}>
            <button className={styles.mainButton}>Give me the role!</button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Home;

40. Run the following command to start your app:

yarn run dev

41. Your app will be running at localhost:3000 and will look like this:

42. Select ‘Connect Wallet’ to connect your crypto wallet to your app.

43. Then, select ‘Connect Discord’ to connect your Discord account.

44. Select ‘Authorize’ to authenticate your Discord bot with your Discord account.

45. You will see a ‘Give me the role!’ button. Let’s add functionality for this before using it.

46. Head to the Discord Developer Portal and select ‘Bot’ from the left side-bar menu.

Then select ‘Reset Token’ to generate your bot’s token. Copy this value.

47. Open your .env.local file and insert the following line for your bot’s token:

BOT_TOKEN=xxxxxx

48. Create a new file in the api directory called grant-role.ts.

Open the file, then insert the following content:

import { ThirdwebSDK } from "@thirdweb-dev/sdk";
import type { NextApiRequest, NextApiResponse } from "next";
import { getSession } from "next-auth/react";

export default async function grantRole(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  // Get the login payload out of the request
  const { loginPayload } = JSON.parse(req.body);

  // Get the NextAuth session so we can use the user ID as part of the discord API request
  const session = await getSession({ req });

  if (!session) {
    res.status(401).json({ error: "Not logged in" });
    return;
  }

// Authenticate login payload
const sdk = new ThirdwebSDK("mumbai");
const domain = "thirdweb.com"; // This should be the domain name of your own website
// Verify the login payload is real and valid
const verifiedWalletAddress = sdk.auth.verify(domain, loginPayload);

// If the login payload is not valid, return an error
if (!verifiedWalletAddress) {
  res.status(401).json({ error: "Invalid login payload" });
  return;
}

// Check if this user owns an NFT
const editionDrop = sdk.getEditionDrop(
  "CONTRACT_ADDRESS",
);

// Get addresses' balance of token ID 0
const balance = await editionDrop.balanceOf(verifiedWalletAddress, 0);

if (balance.toNumber() > 0) {
  // If the user is verified and has an NFT, return the content

  // Make a request to the Discord API to get the servers this user is a part of
  const discordServerId = "1007299321064079380";
  const { userId } = session;
  const roleId = "1007333470688776323";
  const response = await fetch(
    // Discord Developer Docs for this API Request: <https://discord.com/developers/docs/resources/guild#add-guild-member-role>
    `https://discordapp.com/api/guilds/${discordServerId}/members/${userId}/roles/${roleId}`,
    {
      headers: {
        // Use the bot token to grant the role
        Authorization: `Bot ${process.env.BOT_TOKEN}`,
      },
      method: "PUT",
    },
  );

  // If the role was granted, return the content
  if (response.ok) {
    res.status(200).json({ message: "Role granted" });
  }

  // Something went wrong granting the role, but they do have an NFT
  else {
    res
      .status(500)
      .json({ error: "Error granting role, are you in the server?" });
  }
}
// If the user is verified but doesn't have an NFT, return an error
else {
  res.status(401).json({ error: "User does not have an NFT" });
}
}

You will also need to replace CONTRACT_ADDRESS with the Contract address of your NFT collection. Navigate to the thirdweb dashboard, select your NFT collection from earlier, then copy the contract address as shown here:

This code does the following steps:

  • First, it authenticates the user’s login payload to ensure the user owns their wallet.

  • Then, it checks the wallet’s NFT balance for the NFT.

  • Lastly, it makes a request to the Discord API telling it to give the role to the user.

49. Open the index.tsx file and add the following code to create a new function after the const sdk = useSDK(): line:

async function requestGrantRole() {
  // First, login and sign a message
  const domain = "thirdweb.com"; // This should be the domain name of your own website
  const loginPayload = await sdk?.auth.login(domain);

  // Then make a request to our API endpoint.
  try {
    const response = await fetch("/api/grant-role", {
      method: "POST",
      body: JSON.stringify({
        loginPayload,
      }),
    });
    const data = await response.json();
    console.log(data);
  } catch (e) {
    console.error(e);
  }
}

50. Then, add the replace the existing button code with the lines:

<button className={styles.mainButton} onClick={requestGrantRole}>
Give me the role!
</button>

51. Restart your app with yarn run dev, and connect your wallet and Discord to the app again.

This time, when you get to ‘Give me the role!’, click the button. You’ll be prompted to sign the request.

52. Once signed, the bot will give the authenticated user the configured role:

To do this, navigate to . If you don’t have an account already, , then log in.

19. Go to the and select ‘New Application’:

You will need to replace the server and role ID variables. To do this, follow

The completed code can be found if you need to reference it.

console.filebase.com
sign up
Discord Developer Portal
this guide.
here
Discord
Discord server
custom role
Install Node.js and npm
MetaMask
VSCode
Sign up
here
thirdweb dashboard