React集成Firebase无密码登录遇auth/argument-error错误求助

你已在Firebase控制台完成Auth基础配置，且普通邮箱密码登录功能正常，但调用sendSignInLinkToEmail时触发auth/argument-error，可按以下步骤排查修复：

1. 补充必填的Action Code配置 #

sendSignInLinkToEmail的第三个配置参数必须包含handleCodeInApp: true，这是无密码登录的强制要求，缺少该参数会直接触发参数错误。

修正后的调用代码：

sendSignInLinkToEmail(auth, email, {
  url: "http://localhost:3000",
  handleCodeInApp: true // 必须添加此配置项
}).then(() => {
  console.log("登录链接已发送")
}).catch(error => {
  console.error("发送失败：", error)
})

2. 验证重定向URL的合法性 #

确保Firebase控制台Authentication -> 登录方法 -> 电子邮件链接中，已将http://localhost:3000添加到授权重定向URL列表，且URL格式无拼写错误（如多余斜杠、端口错误）。

3. 确认邮箱参数有效性 #

调用前检查email是否为合法格式且非空，避免传入无效值：

const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
if (!isValidEmail) {
  console.error("请输入有效的邮箱地址");
  return;
}

4. 完整无密码登录示例 #

替换你的handleSignUp函数为以下代码测试：

import { sendSignInLinkToEmail } from 'firebase/auth';
// ...其他导入代码

const handleSignUp = async () => {
  form.validate();
  const { email } = form.values;

  const actionCodeSettings = {
    url: "http://localhost:3000/verify-email", // 建议指定到专门的验证页面
    handleCodeInApp: true,
  };

  try {
    await sendSignInLinkToEmail(auth, email, actionCodeSettings);
    // 存储邮箱到本地，后续验证链接时使用
    window.localStorage.setItem('emailForSignIn', email);
    console.log("登录链接已发送至你的邮箱");
    navigate('/check-email');
  } catch (error) {
    console.error("发送失败：", { code: error.code, message: error.message });
  }
};

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