NextJS中使用next-auth集成Facebook登录报错求助

结合你提供的代码和Facebook登录的常见踩坑点，从以下几个方向逐一排查：

1. 环境变量配置检查 #

• 确认.env.local文件里的FACEBOOK_CLIENT_ID和FACEBOOK_CLIENT_SECRET是从Meta开发者平台完整复制的，没有多余空格或拼写错误
• 修改环境变量后必须重启Next.js开发服务器，否则新变量不会生效
• 可临时在[...nextauth.js]中打印变量验证（测试后删除）：

  console.log(process.env.FACEBOOK_CLIENT_ID, process.env.FACEBOOK_CLIENT_SECRET)
  

2. Meta开发者平台的OAuth配置 #

这是最容易出错的环节：

• 进入Meta应用的「Facebook登录」→「设置」，在「有效的OAuth重定向URI」中添加本地开发地址：http://localhost:3000/api/auth/callback/facebook（如果开发端口不是3000，替换为对应端口）
• 确认应用状态为「开发中」（生产环境才需要提交审核）
• 确保已给应用添加「Facebook登录」产品，且启用了OAuth 2.0

3. NextAuth代码补全 #

• 明确指定登录Provider：将登录按钮的点击事件改为明确指定Facebook，避免自动匹配出错：

  onClick={() => signIn('facebook')}
  

• 添加SessionProvider：在_app.js（或_app.tsx）中用SessionProvider包裹整个应用，这是NextAuth正常工作的必要条件：

  import { SessionProvider } from "next-auth/react"
  
  export default function App({ Component, pageProps: { session, ...pageProps } }) {
    return (
      <SessionProvider session={session}>
        <Component {...pageProps} />
      </SessionProvider>
    )
  }
  

4. 测试用户权限配置 #

开发环境下，你的Facebook账号需要添加到Meta应用的「测试用户」列表（在Meta平台「角色」→「测试用户」中添加），否则会因应用未审核被拒绝登录

内容的提问来源于stack exchange，提问作者Atal Shrivastava