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

Sodamide

Related - #52158068 – Gabon

I think that you have to add a folder called .well-known to your public folder and also add a file openid-configuration to that folder, which will return the config (probably in a JSON format) with your configuration. – Changeover

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
    },
  },
})

Coltish

Answer 2

wellKnown is a url that contain the data needed for nextAuth provider authentication. if you don't have wellKnown we need to pass all necessary data like authorizationUrl, tokenUrl and etc. but if you have wellKnown, just by passing it to provider, nextAuth will get all needed data from there.

Diverticulosis

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Bernadinebernadotte