NextAuth.js: create a custom OAuth provider

Hello World! In this post I going to explain how to create in NextAuth.js a Custom provider. Auth provider in NextAuth.js are OAuth definition that allow yours users to sign in with their favorite existing logins.

NextAuth.js contains several built-in providers where it just needs to have as parameter the client id and the client secret (Facebook, Google etc.)

Prerequisites

For those unfamiliar with the services, I reccomend reading the following links:

• https://auth0.com/intro-to-iam/what-is-openid-connect-oidc
• https://auth0.com/intro-to-iam/what-is-oauth-2

Let's start!

1. Create [...nextauth].ts

In pages at the path api/auth create the [...nextauth].tsx file

2. Create Authentication Provider

Here a custom provider has been created for authorization for ClickUp, a project management tool:

const clickUpProvider: OAuthConfig<any> = {
  id: 'clickup',
  name: 'clickUp Report',
  version: '2.0',
  type: 'oauth',
  authorization: 'https://app.clickup.com/api',
  token: 'https://api.clickup.com/api/v2/oauth/token'
  userinfo: 'https://api.clickup.com/api/v2/user',
  clientId: process.env.CLIENT_ID,
  clientSecret: process.env.CLIENT_SECRET,
  checks: ['state'],
  profile: (profile: any) => {
    console.log('profile', profile)
    return {
      id: profile.user.id.toString(),
      name: profile.user.username,
      email: profile.user.email
    }
  },
}

Now let's see the fields:

• id: identication provider
• name: project name
• authorization: nextAuth.js will use it to redirect to the provider's login page
• token: nextAuth.js will use it to get the token
• userInfo: nextAuth.js will use it to get the user profile
• clientId and clientSecret: keys generated from clickUp provider. I reccomend to insert them in .env files
• callback: set the profile info (default values are id, name, email and picture)

3. Insert the custom provider in AuthOptions

After the provider object is created, you insert it into the "providers" array of authOptions.

export const authOptions: AuthOptions = {
  providers: [
    clickUpProvider,
  ],
...
}

export default NextAuth(authOptions)

I recommend to read the doc for more info: https://next-auth.js.org/configuration/providers/oauth#using-a-custom-provider