NextAuth: How to implement Custom Provider?

Question

Following the NextAuth.js docs I managed to implement login with github, which seemed to be pretty straightforward.

pages/auth/[...nextauth].js

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export const authOptions = {
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],

};
export default NextAuth(authOptions);

and then wrap the app in SessionProvider and you are good to go.

import { SessionProvider } from "next-auth/react";
import { Session } from "next-auth";
import type { AppProps } from "next/app";
import "../styles/globals.css";

export default function App({
  Component,
  pageProps,
}: AppProps<{
  session: Session;
}>) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

Now I am trying to make a use of Custom Provider, but didn't figure out how to implement.
As it describes in docs

 if your provider supports OpenID Connect and the /.well-known/openid-configuration 
 endpoint contains support for the grant_type: authorization_code, you only need to
 pass the URL to that configuration file and define some basic fields like name and type.

And the code example

{
  id: "google",
  name: "Google",
  type: "oauth",
  wellKnown: "https://accounts.google.com/.well-known/openid-configuration",
  authorization: { params: { scope: "openid email profile" } },
  idToken: true,
  checks: ["pkce", "state"],
  profile(profile) {
    return {
      id: profile.sub,
      name: profile.name,
      email: profile.email,
      image: profile.picture,
    }
  },
}

I don't understand this line
wellKnown: "https://accounts.google.com/.well-known/openid-configuration",

Does this configuration work also for github just changing accounts.google.com to github or how do I get it for Custom Provider github login?

My Question is, how can I expose wellKnow url for github or for other Custom Provider?

Here is what I tried so far
pages/auth/[...nextauth].js

import NextAuth from "next-auth";

export const authOptions = {
  providers: [
    {
      id: "github",
      name: "Github",
      type: "oauth",
      wellKnown: "https://accounts.google.com/.well-known/openid-configuration", // should it be just "https://accounts.github.com/.well-known..."
      authorization: { params: { scope: "openid email profile" } },
      idToken: true,
      checks: ["pkce", "state"],
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture,
        };
      },
    },
  ],
};
export default NextAuth(authOptions);

Any help will be appreciated

Answer 1

Try this it worked for me.

For github authorization url, userinfo and token url I followed https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps

[...nextauth].ts

export default NextAuth({
providers: [
    {
      id: 'Github',
      name: 'Github',
      type: 'oauth',
      authorization: 'https://github.com/login/oauth/authorize',
      token: 'https://github.com/login/oauth/access_token',
      userinfo: 'https://api.github.com/user',
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
      profile(profile) {
        console.log('profile ', profile)
        return {
          id: profile.id,
          name: profile?.name,
        }
      },
    },
  ],
  secret: process.env.NEXTAUTH_SECRET,
  debug: true,
  session: {
    maxAge: 30 * 24 * 60 * 60, // 30 days
    updateAge: 24 * 60 * 60, // 24 hours
  },
  jwt: {
    maxAge: 60 * 60 * 24 * 30,
  },
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      console.log('user', user, account, profile)
      return true
    },
    async redirect({ url, baseUrl }) {
      return baseUrl
    },
    async session({ session, token, user }) {
      return session
    },
    async jwt({ token, user, account, profile, isNewUser }) {
      if (account?.accessToken) {
        token.accessToken = account.accessToken
      }
      return token
    },
  },
})