Login with NFTs | Next.js

Let your users authenticate in a Next.js app with NFTs.

🤟 Welcome

In this tutorial, we create our own instance of the IDP Kit locally and configure it to check users which want to authenticate for being an owner of a chosen NFT collection. We will register a client, connect our frontend and enable login with NFTs. The frontend builds on Next.js and will use NextAuth.js as authentication library.

NFT collections can be hosted on the following ecosystems:

  • Ethereum

  • Polygon

  • Tezos

  • Near

  • Polkadot

  • Flow

  • Algorand

The IDP Kit uses the OIDC authentication flow, the same technology used by Sign-in with Apple, Facebook, Twitter and many more. If you want to learn more about it and how it works behind the scenes, you can have a look at our concept section as well as how the ideas are translated when using NFTs.

🗂 Modules

  1. IDP Kit Setup - Build and run the project in your local environment

  2. Client Registration - Retrieve clientId and clientSecret from the IDP Kit, used in the frontend

  3. NFT Collection Configuration - Set NFT collection required by the users to login successfully

  4. Next.js - Setup and connect frontend to IDP Kit and enable sign in with NFTs

📽️ Video Version

You can also watch the full tutorial here.

Last updated