Next.js 14状态返回方法咨询及Firebase登录接口报错求助

问题代码 #

用户提供的Firebase登录API路由代码：

"use state"
// firebase.js
import firebase from "firebase/app";
import "firebase/auth"; // Import the authentication module

export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).end(); // Method Not Allowed
  }

  const { email, password } = req.body;

  try {
    const userCredential = await firebase
      .auth()
      .signInWithEmailAndPassword(email, password);
    const user = userCredential.user;

    return res.status(200).json({ message: "Authentication successful", user });
  } catch (error) {
    return res.status(401).json({ message: "Authentication failed", error });
  }
}

错误截图 #

错误原因分析 #

1. Firebase SDK版本不兼容：代码使用v8及以前的命名空间导入方式，当前主流Firebase v9+采用模块化导入，旧写法无法正确初始化Auth实例
2. 未初始化Firebase应用：调用firebase.auth()前未初始化Firebase应用，导致Auth实例不存在
3. 安全风险：直接返回完整user对象，包含敏感信息，不符合安全规范

修复方案 #

步骤1：安装/更新Firebase依赖 #

确保安装最新版Firebase：

npm install firebase
# 或
yarn add firebase

步骤2：创建Firebase初始化配置文件 #

在项目中新建lib/firebase.js，配置并初始化Firebase应用：

// lib/firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// 从Firebase控制台获取你的项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);
// 获取Auth实例并导出
export const auth = getAuth(app);

步骤3：修改API路由代码（Pages Router） #

更新pages/api/login.js，使用模块化Firebase API：

// pages/api/login.js
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "../../lib/firebase";

export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ message: "Method Not Allowed" });
  }

  const { email, password } = req.body;

  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;

    // 仅返回必要的用户信息，避免敏感数据泄露
    return res.status(200).json({
      message: "Authentication successful",
      user: {
        uid: user.uid,
        email: user.email,
        displayName: user.displayName
      }
    });
  } catch (error) {
    // 根据Firebase错误码返回更具体的提示
    let errorMessage = "Authentication failed";
    switch (error.code) {
      case "auth/user-not-found":
        errorMessage = "用户不存在";
        break;
      case "auth/wrong-password":
        errorMessage = "密码错误";
        break;
      case "auth/invalid-email":
        errorMessage = "邮箱格式无效";
        break;
      default:
        errorMessage = error.message;
    }
    return res.status(401).json({ message: errorMessage, errorCode: error.code });
  }
}

额外：App Router写法（Next.js 14） #

如果使用App Router（app/api/login/route.js），需导出POST函数：

// app/api/login/route.js
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "@/lib/firebase";
import { NextResponse } from "next/server";

export async function POST(request) {
  const { email, password } = await request.json();

  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;

    return NextResponse.json({
      message: "Authentication successful",
      user: { uid: user.uid, email: user.email }
    }, { status: 200 });
  } catch (error) {
    let errorMessage = "Authentication failed";
    switch (error.code) {
      case "auth/user-not-found":
        errorMessage = "用户不存在";
        break;
      case "auth/wrong-password":
        errorMessage = "密码错误";
        break;
    }
    return NextResponse.json({ message: errorMessage }, { status: 401 });
  }
}

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