Next.js + Supabase集成LinkedIn OAuth遇错，求排查与解决方法

问题描述 #

原本基于GitHub OAuth完成Supabase与Next.js的登录集成，替换为LinkedIn OAuth时遇到以下问题：

• 点击登录按钮跳转至LinkedIn后，页面提示：

  Bummer, something went wrong. In five seconds, you will be redirected to: thisstringisthecallbackfromsupabase.supabase.co

• 浏览器控制台报错：

  Uncaught ReferenceError: require is not defined Uncaught Error:
  TrackingTwo requires an initialPageInstance POST
  https://api.linkedin.com/li/track 404 (Not Found)

• 尝试切换至Propeller Auth服务时，出现：

  Query deserialize error: missing field code

使用的登录组件代码如下：

'use client'
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
export default function AuthButton() {
    const supabase = createClientComponentClient();
    
    const handleSignIn = async () => {
        await supabase.auth.signInWithOAuth({
            provider: 'linkedin',
            // options: {
            //     redirectTo: 'http://localhost:3000/auth/callback'
            // }
        });
    };
     
    return (
        <button onClick={handleSignIn}>Sign in</button>
    );
}

已确认.env文件中的Client ID、Secret与Supabase后台LinkedIn提供商配置完全一致。

解决方案 #

一、Supabase原生集成修复步骤 #

1. 强制配置redirectTo参数

LinkedIn OAuth对回调地址的校验极为严格，必须与以下两处配置完全匹配：

• LinkedIn开发者应用的「OAuth 2.0」→「授权重定向URL」
• Supabase后台「Authentication」→「Providers」→「LinkedIn」中的「Redirect URL」

取消注释代码中的redirectTo配置，示例如下：

await supabase.auth.signInWithOAuth({
    provider: 'linkedin',
    options: {
        redirectTo: 'http://localhost:3000/auth/callback'
    }
});

2. 校验LinkedIn应用核心配置

• 确保LinkedIn应用已启用「OAuth 2.0」，并添加r_liteprofile和r_emailaddress权限（Supabase依赖这两个基础权限完成用户信息获取）
• 确认LinkedIn应用状态为「Live」（开发状态下仅添加的测试用户可完成登录）
• 重新复制Client ID/Secret，避免因多余空格、换行导致的配置错误

3. 解决控制台404与require错误

该错误源于LinkedIn追踪脚本的兼容性问题，可通过以下方式修复：

• 更新Next.js至最新稳定版本，确保客户端渲染环境兼容
• 清除浏览器缓存与Cookie后重新测试登录流程

二、Propeller Auth集成修复步骤 #

若切换至Propeller Auth出现missing field code错误，需检查：

• 确认Propeller Auth后台配置的LinkedIn回调地址与应用中传递的redirect_uri完全一致
• 在回调页面正确提取URL中的code参数，并传递至Propeller的验证接口
• 升级Propeller Auth SDK至最新版本，避免版本兼容问题

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