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

Create the frontend app

We will need Node.js and yarn or npm

1. Clone the project

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

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 SSIProvider. We can leave the third parameter in the SSIProvider 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

yarn dev

//  or 

npm run dev