使用Next.js+Spotify开发登录页时providers无法接收数据报错

问题修复方案 #

错误原因 #

• 你使用Object.keys(providers)遍历拿到的是provider的键名字符串，不是完整的provider配置对象，所以读取.name属性时会抛出undefined相关报错
• map回调函数使用了花括号包裹逻辑但没有写return语句，按钮组件不会被正常返回渲染
• 登录按钮未绑定signIn触发方法，无法正常跳转授权流程
• 敏感配置项命名不规范，clientSecret属于后端敏感信息，不应该加NEXT_PUBLIC_前缀，会导致密钥暴露到前端

修复后代码 #

登录页代码

import React from 'react'
import { getProviders , signIn } from "next-auth/react"

function Login({ providers }) {
    return (
        <div>
            {/* 改用Object.values取provider对象，用圆括号隐式返回组件 */}
            {Object.values(providers).map((provider) => (
                <button key={provider.id} onClick={() => signIn(provider.id)}>
                    用{provider.name}账号登录
                </button>
            ))}
        </div>
    )
}

export default Login;

export async function getServerSideProps() {
    const providers = await getProviders()
    return {
        props : {
            providers,
        }
    }
}

[...nextauth].js 补充修正

首先补充顶部缺失的引入，同时修正clientSecret的环境变量命名：

import NextAuth from "next-auth"
import SpotifyProvider from "next-auth/providers/spotify"
// 此处补充你的LOGIN_URL常量定义

export default NextAuth({
    providers: [
        SpotifyProvider({
            clientId: process.env.NEXT_PUBLIC_CLIENT_ID,
            // clientSecret去掉NEXT_PUBLIC前缀，避免暴露到前端
            clientSecret: process.env.SPOTIFY_CLIENT_SECRET,
            authorization: LOGIN_URL,
        }),
    ],
})

修改完成后记得在你的.env环境变量文件里，把clientSecret对应的变量名改为SPOTIFY_CLIENT_SECRET即可。

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