Frontend - 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, which makes it easy for us to connect our Keycloak instance. 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
We will clone the project and install all dependencies
2. Change directories
3. Install dependencies
We log in to the KeyCloak administration console with our admin credentials and navigate to the realm, we used before to configure our external identity provider.
2. Under the Clients section, we create a new client, which we will use in our Next.js app.
3. We provide a Client ID and Name and click on Next.
4. We select Client authentication and the Standard flow and click Save.
5. In the overview of the new client we just created under the General Settings section, we update Valid redirect URIs to match our next.js application nextAuth callback URL: http://localhost:3000/api/auth/callback/keycloak
Now that we have the client registered with Keycloak we can add its credentials in our Next.js application.
Let's rename .env.example file to .env
We assign CLIENT_ID and CLIENT_SECRET to the values find in Settings and in the Credentials section respectively of our just created Keycloak client.
The ISSUER we set to the host of our Keycloak instance.
Those values will then be used by the build in NextAuth.js provider for Keycloak which can be found in pages/api/auth/[...nextauth].ts
Now that we have finished all configurations, we can start up our frontend.
Now we can log in as long as we hold an NFT of the collection we specified in the NFT Collection Configuration Section.
You made it, you've built login with NFTs with Keycloak and Next.js! Share your progress in our discord channel or on Twitter, then we can celebrate together 🤟
