ZBD Login with Next.js through NextAuth.js

​

Introduction

When creating Next.js applications with authentication support, NextAuth.js is always first in line for best solutions.

It’s a great library that supports any authentication provider, and thanks to the next-auth-zbd-provider NPM package it also supports ZBD Login out of the box.

The basic stack is as follows:

• Next.js
• NextAuth.js
• ZBD Login

To set up NextAuth, please refer to the official documentation or check the next-auth-zbd-starter source code repository for examples.

​

Configuring ZBD Login OAuth2 Provider

To add the ZBD OAuth2 provider to your NextAuth.js configuration, you need to install the next-auth-zbd-provider NPM package.

yarn add next-auth-zbd-provider

Once complete, import the provider getter function and pass it the appropriate parameters:

import { getZBDProvider } from "next-auth-zbd-provider";

const zbdConfig = getZBDProvider({
  clientId: process.env.AUTH_ZBD_ID,
  clientSecret: process.env.AUTH_ZBD_SECRET,
  apiKey: process.env.AUTH_ZBD_LIVE_KEY,
  scope: "user,wallet",
});

The getZBDProvider function takes the following parameters:

• clientId - The ZBD Project OAuth2 client ID (find it here)
• clientSecret - The ZBD Project OAuth2 client secret (find it here)
• apiKey - The ZBD Project Live API key (find it here)
• scope - The OAuth2 scopes you want to request from the user
  • Options: "user", or "user,wallet"

All of these parameters are required.

​

Getting OAuth2 + Live API Keys

To get the OAuth2 and Live API Key credentials from your ZBD Project, go to ZBD Dev Dashboard and click on the project you want to use. Pick the specific API and/or OAuth2 tabs accordingly, and find the necessary credentials:

​

Setting up OAuth2 Callbacks

When setting up ZBD OAuth2 you must not forget to enter the appropriate callback URL. This works with both your local and production development environments.

In this example, NextAuth expects a callback in the path. For example, your local environment would be http://localhost:3000/api/auth/callback/zbd. Therefore we must add this to the ZBD Dev Dashboard like so:

​

Adding ZBD Login provider to NextAuth.js

Now pass the ZBD provider to the NextAuth.js main configuration and you should be able to login with ZBD.

export const config = {
  secret: process.env.NEXTAUTH_SECRET,
  ...
  providers: [zbdConfig], // <-- ADD HERE (you may have other providers here already)
  ...
}

​

Try it yourself

You can try this yourself using the NextAuth.js + ZBD Login starter kit.