Next.js
Last updated
Last updated
We have prepared a Next.js example project which we can use as a starting point. It uses NextAuth.js for handling authentication and a custom provider build by walt.id to connect the IDP Kit easily with NextAuths functionality. We won't go into details of how Next.js or NextAuth.js works.
The user of the frontend application needs MetaMask or another compatible wallet to share their blockchain address, with which the IDP Kit will be able to check if the user is holder of the required NFT collection.
We will need Node.js and yarn or npm
Clone the project
2. Install the dependencies by running yarn install or npm install
3. Update CLIENT_ID and CLIENT_SECRET based on the response returned by the client registration step in the .env.example file.
4. Rename .env.example to .env
5. In pages/api/auth/[...nextauth].ts we update the identityProviderURL parameter of the NFTProvider. We can leave the third parameter in the NFTProvider as is, if you have not changed the port on which the IDP Kit is running locally. When you switch the port or use a hosted version of the IDP Kit, you need to update the parameter to reflect the new endpoint of the IDP Kit.
6. Now the project is set up and can be run
7. When we visit http://localhost:3000 and press the login button, the authentication is started.