Ionic/Vue/Firebase中signInWithEmailAndPassword在iOS下Promise不resolve问题

问题重现 #

基于Ionic 7 Vue开发的应用，使用Firebase Auth做用户管理：

• 浏览器和Android端可正常完成用户登录；
• iOS设备/模拟器中，输入错误账号密码时，catch分支能正常触发并输出错误信息；
• 输入正确账号密码时，Firebase控制台显示登录已完成，但signInWithEmailAndPassword的Promise始终不resolve，try块内的console.log完全不执行，Xcode无任何错误输出。

可能的原因及解决步骤 #

1. 确认Firebase iOS配置完整性 #

检查GoogleService-Info.plist是否已正确添加到iOS项目，且文件中的Bundle ID与Firebase控制台配置完全一致。配置文件缺失或参数不匹配，会导致Auth回调无法正常触发。

2. 配置iOS ATS（App Transport Security）规则 #

确保Firebase相关域名被ATS允许，可在Info.plist中添加如下配置（若默认配置未覆盖的话）：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <false/>
  <key>NSExceptionDomains</key>
  <dict>
    <key>firebaseio.com</key>
    <dict>
      <key>NSIncludesSubdomains</key>
      <true/>
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <false/>
    </dict>
    <key>googleapis.com</key>
    <dict>
      <key>NSIncludesSubdomains</key>
      <true/>
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <false/>
    </dict>
  </dict>
</dict>

3. 改用Auth状态监听替代Promise回调 #

iOS端可能存在Promise回调被阻塞的情况，改用Firebase Auth的状态监听处理登录成功逻辑更可靠：

import { onAuthStateChanged } from "firebase/auth";

// 在组件初始化阶段添加状态监听
onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log("Successfully logged in with Firebase, UID: "+user.uid);
    // 此处处理登录成功后的业务逻辑，如页面跳转、用户信息存储等
  } else {
    // 用户已退出登录的处理逻辑
  }
});

// 登录函数保留原有错误捕获逻辑，无需依赖Promise返回值
const signInUser = async (email: string, password: string) => {
    try{
        await signInWithEmailAndPassword(auth, email, password);
    }        
    catch(error){
        const errorCode = error.code;
        const errorMessage = error.message;
        console.error("Error Code: " + errorCode + " - Error Message: " + errorMessage);
    }
}

4. 同步Capacitor iOS项目配置 #

运行以下命令重新同步Capacitor配置，确保iOS项目与前端代码配置一致：

npx cap sync ios

同时检查capacitor.config.ts中的server配置，若设置了hostname或iosScheme，需确认参数正确，避免影响网络请求回调。

5. 调试Promise回调状态 #

给signInWithEmailAndPassword的Promise添加.then()回调，验证是否能触发：

const signInUser = async (email: string, password: string) => {
    try{
        const res = await signInWithEmailAndPassword(auth, email, password)
            .then(res => {
                console.log("Then callback triggered, UID: "+res.user.uid);
                return res;
            });
        console.log("Successfully logged in with Firebase, UID: "+res.user.uid);
    }        
    catch(error){
        const errorCode = error.code;
        const errorMessage = error.message;
        console.error("Error Code: " + errorCode + " - Error Message: " + errorMessage);
    }
}

若.then()能触发但await后续代码不执行，需检查登录函数的调用上下文，确保是在Vue的setup或methods等正确环境中执行，避免在原生线程中调用导致阻塞。

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