NextAuth.js Integration

The NextAuth.js integration with Didit provides a streamlined way to add secure human authentication to your Next.js application.

Examples & Resources

Didit with NextAuth.js demo https://nextauth.didit.me (opens in a new tab)
Source code for the demo https://github.com/didit-protocol/template-nextauth (opens in a new tab)

Prerequisites

A Next.js application with NextAuth.js installed. If you haven't set up NextAuth.js yet, follow the official guide (opens in a new tab).
A Didit Business Console (opens in a new tab) account.

Set up Didit

Log in to your Didit Business Console (opens in a new tab).
Navigate to Applications in the left sidebar.
Click Create Application.
Enter a name for your application.
For Redirect URI, enter: http://localhost:3000/auth/callback/didit for development, or your production callback URL: https://{YOUR_DOMAIN}/auth/callback/didit.
Click Create.
On the application details page, note the following values - you'll need them for NextAuth.js configuration:
- Client ID
- Client Secret

Configure NextAuth.js

Create your NextAuth.js configuration file (e.g., auth.ts):

import NextAuth from "next-auth"
import "next-auth/jwt"
import type { Provider } from "next-auth/providers"
 
 
// Configure Didit provider
const diditProvider: Provider = {
  id: "didit",
  name: "Didit",
  type: "oauth",
  authorization: {
    url: process.env.DIDIT_IS_STAGING === "true"
      ? "https://auth.staging.didit.me"
      : "https://auth.didit.me",
    params: { scope: "openid names document_detail" },
  },
  token: {
    url: process.env.DIDIT_IS_STAGING === "true"
      ? "https://apx.staging.didit.me/auth/v2/token"
      : "https://apx.didit.me/auth/v2/token",
  },
  userinfo: {
    url: process.env.DIDIT_IS_STAGING === "true"
      ? "https://apx.staging.didit.me/auth/v2/users/retrieve/"
      : "https://apx.didit.me/auth/v2/users/retrieve/",
  },
  issuer: process.env.DIDIT_IS_STAGING === "true"
    ? "https://auth.staging.didit.me/"
    : "https://auth.didit.me/",
  clientId: process.env.DIDIT_CLIENT_ID,
  clientSecret: process.env.DIDIT_CLIENT_SECRET,
  checks: ["state", "pkce"],
  profile(profile) {
    return {
      user_data: profile,
      user_id: profile.user_id,
      name: profile.names?.full_name,
      email: profile.email?.email,
      image: profile.picture,
    }
  },
  style: {
    logo: "/didit.png",
  }
}

Add the environment variables to your .env.local file:

AUTH_SECRET=your_nextauth_secret # npx auth secret
DIDIT_CLIENT_ID=your_client_id
DIDIT_CLIENT_SECRET=your_client_secret
DIDIT_IS_STAGING=false

Add the didit provider to your NextAuth configuration list of providers:

export const { handlers, auth, signIn, signOut } = NextAuth({
  debug: !!process.env.AUTH_DEBUG,
  trustHost: true,
  providers: [diditProvider],
  basePath: "/auth",
  session: { strategy: "jwt" },
  callbacks: {
    authorized({ request, auth }) {
      const { pathname } = request.nextUrl
      if (pathname === "/middleware-example") return !!auth
      return true
    },
    jwt({ token, trigger, session }) {
      if (trigger === "update") token.name = session.user.name
      return token
    },
    async session({ session, token }) {
      if (token?.accessToken) session.accessToken = token.accessToken
      return session
    },
  },
})

Features

PKCE Flow: Implements secure PKCE (Proof Key for Code Exchange) authentication
Staging Support: Configurable staging/production environments
Flexible Storage: Uses memory storage for development and Vercel KV for production
JWT Sessions: Implements JWT-based session management
TypeScript Support: Includes type definitions for enhanced development experience

Troubleshooting

Common issues:
- Ensure your callback URL matches exactly: /auth/callback/didit
- Verify all environment variables are properly set
- Confirm the scope values

Auth0 Sign In Demo