如何在Next-auth中获取当前会话对应的登录提供商信息

你需要先在Next-auth后端配置中将提供商信息注入会话对象，之后即可在前端组件中直接读取使用，具体操作如下：

步骤1：修改Next-auth配置文件 #

找到pages/api/auth/[...nextauth].js配置文件，追加jwt和session回调，将登录时的提供商信息存入会话：

import NextAuth from 'next-auth'
import TwitterProvider from 'next-auth/providers/twitter'
// 导入其他你需要的提供商，比如Facebook、Google等

export default NextAuth({
  providers: [
    // 你已配置的各登录提供商参数
    TwitterProvider({
      clientId: process.env.TWITTER_CLIENT_ID,
      clientSecret: process.env.TWITTER_CLIENT_SECRET,
    }),
    // 其余提供商配置
  ],
  callbacks: {
    async jwt(token, user, account) {
      // 首次登录时account对象会携带提供商信息，存入token
      if (account) {
        token.provider = account.provider
      }
      return token
    },
    async session(session, token) {
      // 将token中的提供商信息同步到session对象，供前端读取
      session.provider = token.provider
      return session
    }
  }
})

步骤2：前端组件读取提供商信息 #

配置完成后，你可以直接从useSession返回的session对象中获取provider字段，示例代码如下：

import { useSession } from "next-auth/client"

// 可选：配置提供商展示名称映射，可将标识转为友好的展示文本
const providerMap = {
  twitter: "Twitter",
  facebook: "Facebook",
  github: "GitHub",
  // 其余你用到的提供商映射
}

export default function Component() {
  const [session, loading] = useSession()

  if (loading) return <p>加载中...</p>

  if (session) {
    return (
      <div>
        <p>已登录，账号邮箱：{session.user.email}</p>
        <p>登录渠道：{providerMap[session.provider] || session.provider}</p>
      </div>
    )
  }

  return <a href="/api/auth/signin">前往登录</a>
}

注：session.provider返回的是你在配置中注册的提供商唯一标识，全部为小写格式。

内容的提问来源于stack exchange，提问作者M. Dev