React集成Firebase谷歌/脸书登录遇auth/invalid-continue-uri错误求助

问题描述 #

React应用集成Firebase Authentication后，邮箱/密码注册登录功能正常，但使用Google和Facebook登录时触发错误：

auth/invalid-continue-uri Firebase: The continue URL provided in the request is invalid. (auth/invalid-continue-uri)

已将Localhost添加到授权域，且启用了对应登录服务商，相关代码如下：

const googleLogin = async () => {  
  const provider = new GoogleAuthProvider();  
  signInWithPopup(auth, provider)
    .then((result) => {
      console.log("here");
      const credential = GoogleAuthProvider.credentialFromResult(result);
      const token = credential.accessToken;
      const user = result.user;
      console.log(token, user);
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log(errorCode, errorMessage);
      const email = error.customData.email;
      const credential = GoogleAuthProvider.credentialFromError(error);
    });
};

const facebookLogin = async () => {  
  const provider = new FacebookAuthProvider();  
  signInWithPopup(auth, provider)
    .then((result) => {
      const user = result.user;
      const credential = FacebookAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log(errorMessage);
      const email = error.customData.email;
      const credential = FacebookAuthProvider.credentialFromError(error);
    });
};

解决方案 #

以下是几个排查和修复的关键点：

• 检查登录提供商的重定向URL配置
  进入Firebase控制台 -> 认证 -> 登录方法，分别打开Google和Facebook提供商的设置页面，确保在「授权重定向URI」列表中添加了你的React应用运行地址（例如http://localhost:3000），注意要和实际运行地址完全一致，包括HTTP/HTTPS协议、端口号，不能有拼写错误。

• 确认Firebase初始化配置的正确性
  检查你的Firebase初始化代码中的authDomain字段，必须和Firebase项目的认证域名完全匹配（格式通常为[项目ID].firebaseapp.com或你自定义的域名），如果该字段配置错误，会导致重定向URL验证失败。

• 清除浏览器缓存与Cookie
  浏览器缓存的旧重定向会话数据可能引发该错误，尝试清除当前浏览器的缓存和Cookie后重新测试登录功能。

• 检查本地开发环境的地址一致性
  确保React应用实际运行的地址（比如localhost:3000）和你添加到Firebase授权域、重定向URL中的地址完全一致，包括是否使用HTTPS（如果本地启用了HTTPS，必须同步配置到Firebase）。

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