Firebase Auth集成报HTTP 400错误 排查sync.js代码问题

• 已确认排除Firebase初始化配置错误：onAuthStateChanged可正常输出未登录状态日志，说明SDK初始化、基础网络连通性正常，400错误为客户端请求参数/逻辑不符合接口规则导致，无需调整Firebase控制台配置。

高频问题点及对应修复 #

1. 表单提交未拦截默认行为 #

这是该场景下占比最高的问题原因：如果登录/注册/密码重置表单的提交事件回调中没有调用e.preventDefault()，点击按钮时浏览器会触发原生表单提交，直接把表单数据以form-urlencoded格式提交到当前auth.html路径，同时打断Firebase SDK的异步请求流程，最终发往Firebase的请求要么缺参、要么请求头格式错误，直接返回400。
修复方式：
在所有绑定表单提交、认证按钮点击的事件处理函数第一行加入拦截逻辑，同时移除form标签上多余的action属性：

form.addEventListener('submit', async (e) => {
  // 第一行拦截默认提交行为
  e.preventDefault()
  // 后续再写Firebase认证逻辑
})

2. 传入认证方法的参数格式错误 #

检查sync.js中所有Firebase Auth方法的入参，以下几种写法都会直接触发400：

• 未取输入框的实际value值，直接把DOM元素对象作为email/password参数传入
• 邮箱值未做首尾去空处理，带入了多余的空格、换行符
• 传入的密码长度不足6位（Firebase Auth默认强制密码最少6位）
• 调用signInWithCustomToken时传入了空值、前端自行生成的非合规字符串，而非服务端签发的标准JWT格式customToken
• 调用密码重置方法时传入的邮箱不符合RFC邮箱格式规范
  修复方式：所有入参在传入认证方法前先做取值、去空、格式校验，参考写法：

const emailInput = document.querySelector('#login-email')
const pwdInput = document.querySelector('#login-password')
const email = emailInput.value.trim()
const password = pwdInput.value
// 前置校验不通过直接阻断
if (!email.includes('@') || password.length < 6) {
  alert('请输入有效邮箱，密码长度不能少于6位')
  return
}
// 校验通过再调用SDK方法
const res = await signInWithEmailAndPassword(auth, email, password)

3. SDK引入/实例化写法不兼容 #

sync.js为module类型脚本，如果混用了Firebase v8旧版全局写法和v9+模块化写法，会导致SDK序列化请求参数时缺失必填字段，触发400。
修复方式：统一使用v9+模块化引入规则，所有认证方法统一从firebase/auth导入，全链路使用同一个auth实例，不要重复初始化：

// sync.js顶部统一引入SDK
import { initializeApp } from "firebase/app";
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signInWithCustomToken,
  onAuthStateChanged,
  signOut,
  sendPasswordResetEmail
} from "firebase/auth";

// 初始化
const app = initializeApp(/* 你的firebaseConfig */);
const auth = getAuth(app);
// 后续所有认证方法调用都传入这个auth实例，不要重复调用getAuth生成新实例

4. 全局请求逻辑修改了Firebase请求 #

如果页面其他脚本或sync.js中写了全局fetch/XHR拦截器，修改了Firebase Auth接口请求的Content-Type请求头、请求体内容，会导致服务端无法解析参数返回400，临时禁用自定义请求拦截逻辑即可定位。

修复验证标准 #

触发认证操作时，观察浏览器网络面板中发往Firebase身份认证服务的请求：

• 请求Payload为结构化JSON，包含正确的email、password等字段，不是表单格式的转义字符串
• 请求返回200状态码，onAuthStateChanged可正确捕获到登录后的用户信息，即为修复完成

内容的提问来源于stack exchange，提问作者Kevin Taz Manda