无法在Vercel生产中验证Spotify。

Question

我做了一个spotify克隆，它有一个登录主页。用户最初被引导到登录页面(localhost:3000/login(，一旦用户点击登录按钮，他们就会被带到spotify身份验证回调url(从spotify端，我们可以使用谷歌、脸书或电子邮件等登录(，一旦该用户登录(成功验证(，spotify就会提供一个令牌，用于检查该用户是否通过了客户端的身份验证。如果成功，用户将进入主页(其中包含所有音乐(。spotify仪表板采用重定向url进行身份验证，在我的情况下，它是->http://localhost:3000/api/auth/callback/spotify

此工作流程在本地工作和运行时运行良好(localhost:3000(。

在vercel中托管时，

1. 我在vercel中创建了一个没有envs 的项目

2. 我拿走了我的https://sp-app.vercel.app它是域，并添加到我的env中的NEXTAUTH_URL，还添加了NEXT_PUBLIC_CLIENT_SECRET、NEXT_PULLIC_CLIENT _ID和JWT_SECRET

3. 前往spotify仪表板并编辑重定向urlhttps://sp-app.vercel.app/api/auth/callback/spotify并保存

4. 从vercel重新部署了该应用程序(它给了我一个deployent url，但没关系(，并点击了域-->sp-app.vercel.app

5. 登录页面来了，一旦我点击登录按钮，它就会加载并停留在登录页面本身。它既没有移动到我的主页，也没有进行身份验证，但同样的代码在本地运行良好。

要理解的代码：登录按钮：

{providers !== null && Object.values(providers).map((provider) => (
<div key={provider.name}>
<button onClick={()=>signIn(provider.id, {callbackUrl:"/"})}
>Login with {provider.name}</button>
</div>
}
export async function getServerSideProps(){
const providers = await getProviders(); //getProviders is imported from next-auth
return {
props:{
providers,
}
}
}

中间件：

export async function middleware(req){
const token = await getToken({req,secret:process.env.JWT_SECRET});
const {pathname} = req.nextUrl;
//Allow the request if,
// (1) Its a request for next-auth session & provider fetching
// (2) The token exists
if(pathname.includes('/api/auth') || token){
return NextResponse.next();
}
//Redirect to login if no token or requesting a protected route
if(!token && pathname !== "/login"){
return NextResponse.redirect("/login");
}
}

当我检查"网络"选项卡时，我得到了一个会话，它应该让我登录并重定向到主页，但它在vercel部署中不起作用。

Answer 1

嘿，所以首先要确保NEXTAUTH_URL环境变量是正确的。还要检查重定向URI(来自Spotify开发者面板(是否正确。

之后，将此secureCookie代码添加到_middleware.js文件中的getToken函数中。所以这个函数最终应该是这样的：

const token = await getToken({
req,
secret: process.env.JWT_SECRET,
secureCookie:
process.env.NEXTAUTH_URL?.startsWith("https://") ??
!!process.env.VERCEL_URL,
});

让我知道这是否有效。我也有同样的问题，这对我很有效。