NextAuth集成Spotify认证时SpotifyProvider导入失败求助

问题描述 #

使用NextAuth v4实现Spotify认证时，运行应用出现错误：Error: Module not found: Can't resolve 'next-auth/providers/spotify'。已尝试重装next-auth、清理node_modules、修改导入语句，但问题未解决。

认证代码 #

import NextAuth from "next-auth";
import SpotifyProvider from "next-auth/providers/spotify";

async function refreshAccessToken(token) {
  try {
    const response = await fetch("https://accounts.spotify.com/api/token", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization: `Basic ${Buffer.from(
          `${process.env.SPOTIFY_CLIENT_ID}:${process.env.SPOTIFY_CLIENT_SECRET}`
        ).toString("base64")}`,
      },
      body: new URLSearchParams({
        grant_type: "refresh_token",
        refresh_token: token.refreshToken,
      }),
    });

    const refreshedTokens = await response.json();

    if (!response.ok) {
      throw refreshedTokens;
    }

    return {
      ...token,
      accessToken: refreshedTokens.access_token,
      accessTokenExpires: Date.now() + refreshedTokens.expires_in * 1000, // 1 hour
      refreshToken: refreshedTokens.refresh_token ?? token.refreshToken, // Some APIs may not return a new refresh token
    };
  } catch (error) {
    console.error("Error refreshing access token", error);
    return { ...token, error: "RefreshAccessTokenError" };
  }
}

export default NextAuth({
  providers: [
    SpotifyProvider({
      clientId: process.env.SPOTIFY_CLIENT_ID,
      clientSecret: process.env.SPOTIFY_CLIENT_SECRET,
      authorization:
        "https://accounts.spotify.com/authorize?scope=user-read-private user-read-email",
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        return {
          accessToken: account.access_token,
          accessTokenExpires: Date.now() + account.expires_in * 1000, // 1 hour
          refreshToken: account.refresh_token,
        };
      }

      if (Date.now() > token.accessTokenExpires) {
        return await refreshAccessToken(token);
      }

      return token;
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken;
      session.error = token.error;
      return session;
    },
  },
});

package.json内容 #

{
  "dependencies": {
    "dotenv": "^16.4.7",
    "mongoose": "^8.12.2",
    "next": "^13.2.0",
    "next-auth": "^4.24.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "name": "music-player-backend",
  "version": "1.0.0",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

解决方法 #

问题核心是NextAuth v4将第三方认证提供者拆分到独立的npm包中，默认的next-auth包不包含SpotifyProvider，必须单独安装对应的提供者包：

• 安装Spotify提供者包
  在项目根目录运行命令：

  npm install @next-auth/providers-spotify
  

• 保留原导入语句
  无需修改代码中的导入语句，import SpotifyProvider from "next-auth/providers/spotify" 在安装包后即可正常识别。

• 验证安装
  安装完成后，重启开发服务器（npm run dev），模块找不到的错误即可解决。

之前的操作无效是因为只重装了next-auth本身，没有安装对应的Spotify提供者依赖，导致Node.js无法找到该模块路径。

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