Frontend - Next.js

Intro

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.

Create the frontend

We will need Node.js and yarn or npm

1. We will clone the project and install all dependencies

git clone https://github.com/walt-id/waltid-nft-auth-keycloak-nextjs.git

2. Change directories

cd waltid-nft-auth-keycloak-nextjs

3. Install dependencies

yarn install

Create Keycloak client

1. 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

Connect Keycloak & Frontend

Now that we have the client registered with Keycloak we can add its credentials in our Next.js application.

1. Let's rename .env.example file to .env

2. 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.

3. 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

Running the Project

Now that we have finished all configurations, we can start up our frontend.

yarn dev

Now we can log in as long as we hold an NFT of the collection we specified in the NFT Collection Configuration Section.

What is next

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 🤟