Using custom provider in next-auth v5.

[sukalov]

I want to migrate my app to next-auth v5 (while on early stage). So I used my old custom OAuth provider (particularly, lichess oauth) , but it doesn't work. I digged into auth/core/providers to make mine similar, but it hasn't helped either. And there is not so much information about using custom providers in v5.. So, if someone here could suggest how I can try fix it, i'd highly appreciate!

My lichess-provider that worked well in next-auth-v4:

import { Provider } from 'next-auth/providers'

export default function LichessProvider(options: any): Provider {
	return {
		id: 'lichess',
		name: 'Lichess',
		type: 'oauth',
		version: '2.0',
		authorization: {
			url: 'https://lichess.org/oauth/',
			params: {
				scope: 'email:read',
			},
		},
		token: {
			url: 'https://lichess.org/api/token',

			async request({ client, params, checks, provider }) {
				const response = await client.oauthCallback(provider.callbackUrl, params, checks, {
					exchangeBody: {
						client_id: options.clientId,
					},
				})
				return {
					tokens: response,
				}
			},
		},
		userinfo: {
			url: 'https://lichess.org/api/account',
			params: {
				scope: 'email:read',
			},
		},

		profile(data: any) {
			return {
				id: data.id,
				username: data.username,
				name: `${data.profile.firstName} ${data.profile.lastName}`,
			}
		},

		checks: ['pkce', 'state'],
		options,
	}
}

and it just received clientId and clientSecret later:

// ...
export const options: NextAuthOptions = {
	callbacks: {
		async session({ session, token, user }: MySessionProps) {
			session.user.username = token.sub as string
			return session
		},
	},
	providers: [
		LichessProvider({
			clientId: 'process.env.LICHESS_CLIENT_ID',
			clientSecret: process.env.LICHESS_CLIENT_SECRET,
		}),
	]
}

now I tried loooots of ways. but im stuck with same error:

error {
  error: 'invalid_request',
  error_description: 'client_id required (choose any)'
}
[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror
[auth][cause]: Error: TODO: Handle OAuth 2.0 response body error
    at handleOAuth (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/actions/callback/oauth/callback.js:88:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Module.callback (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/actions/callback/index.js:33:41)
    at async AuthInternal (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/lib/index.js:42:24)
    at async Auth (webpack-internal:///(rsc)/./node_modules/next-auth/node_modules/@auth/core/index.js:123:29)
    at async /Users/matvey/Documents/mkt/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:63251
[auth][details]: {
  "provider": "lichess"
}

and this is where i get redirection to error:

If any questions, I'd be happy to answer. Any thoughts — highly welcomed!

[ndom91]

First thing I noticed is that you're passing the string process.env.CLIENT_ID instead of the actual variable, please remove the single quotes around that in your next-auth options and try again 🙏

[sukalov]

Well, yep, but basically it can be any string for lichess, so it's not a big deal. When i tried, there was a hardcoded string of my app name

[ndom91]

Gotcha, just going off the error message that the client_id wasn't passed to Lichess for whatever reason 🤔

I think the token request callback doens't have a client parameter anymore. See UserInfoEndpointHandler type (next-auth/packages/core/src/providers/oauth.ts:87).

In general, you could also check out making a custom provider v5 docs and/or the todoist provider as an example (next-auth/packages/core/src/providers/todoist.ts)

If Lichess sticks to the spec, I think you shuold be able to simplify this to something like this more or less:

export default function LichessProvider(
  options: OAuthUserConfig<Record<string, any>>
): OAuthConfig<Record<string, any>> {
  return {
    id: "lichess",
    name: "Lichess",
    type: "oauth",
	authorization: {
		url: 'https://lichess.org/oauth/',
		params: {
			scope: 'email:read',
		},
	},    
	token: "https://lichess.org/api/token",
    userinfo: "https://lichess.org/api/account",
    profile(data: any) {
		return {
			id: data.id,
			username: data.username,
			name: `${data.profile.firstName} ${data.profile.lastName}`,
		}
	  },
    },
    style: {
      logo: "/lichess.svg",
      bg: "#0075C9",
      text: "#fff",
    },
    options,
  }
}

[sukalov]

Yea, I've started same with something like this using same docs. And as the error with client_id appeared, i started adding it to the provider here and there.
idk It feels like building custom open ID provider is much easier than OAuth in v5, but there is only example cor custom oid in the docs

P.S. still, there is no problem with missing client id in v4

[SaddamMohsen]

The problem emerged from here
LichessProvider(options: any): // this type must be speciefied
you can add new file and add this code to at
`import { OAuthConfig } from 'next-auth/providers';

export type OAuthProviderOptions = Pick<OAuthConfig, 'client_id' | 'client_secret'>;`

then import this type where you create the provider
and replace
LichessProvider(options: any): //replace any with OAuthProviderOptions
hope this lately answer help you