NextAuth：如何实现自定义Provider？

Question

按照NextAuth.js 文档，我成功地实现了登录 github，这似乎非常简单。

页面/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);

然后将应用程序包装起来SessionProvider，就可以开始了。

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

现在我正在尝试使用Custom Provider，但不知道如何实现。
正如文档中所描述的

 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.

以及代码示例

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

我不明白这一行
wellKnown: "https://accounts.google.com/.well-known/openid-configuration",

此配置是否也适用于github仅更改accounts.google.com为github或如何获取它以进行自定义提供程序 github 登录？

我的问题是，如何wellKnow url向 github 或其他公开Custom Provider？

这是我到目前为止尝试过的
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);

任何帮助将不胜感激

Answer 1

试试这个，它对我有用。

对于 github 授权 url、用户信息和令牌 url，我遵循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
    },
  },
})