Firebase Authentication弱网环境下登录卡顿及超时优化咨询

问题 #

我开发的Web应用使用Firebase SDK 9.20.0的Firebase Authentication组件及FirebaseUI 6.0.2，在网络连接不佳时遇到认证问题：

• 网络良好时一切正常：用户可登录，启用持久化后重新进入无需再次输入凭证；
• 完全无网时也能正常工作：应用会立即使用持久化凭证登录用户；
• 但网络连接不佳时，重新登录耗时极长，似乎需等待超时后才允许用户登录。

我猜测完全无网时会直接使用本地持久化数据，而检测到网络时会尝试检查服务器端变更，仅在超时触发后才使用本地数据。请问是否有办法缩短或绕过该超时？

以下是初始化Firebase Auth及Firebase UI的代码：

// Firebase core
import firebase from "firebase/compat/app";
const firebaseapp = firebase.initializeApp({
  apiKey, authDomain, databaseURL, projectId, storageBucket, messagingSenderId, appId, measurementId
});

// App-check
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
initializeAppCheck(firebaseapp, {
  provider: new ReCaptchaV3Provider(process.env.VUE_APP_reCAPTCHAPublicKey),

  // Optional argument. If true, the SDK automatically refreshes App Check tokens as needed.
  isTokenAutoRefreshEnabled: true
});

// Auth + FirebaseUI
import { getAuth, EmailAuthProvider } from "firebase/auth";
import * as firebaseui from 'firebaseui';
const auth = getAuth(firebaseapp);
const b_ui = new firebaseui.auth.AuthUI(auth);
const b_uiConfig = {
    signInSuccessUrl: '',
    signInOptions: [ { provider: EmailAuthProvider.PROVIDER_ID } ],
    'credentialHelper': firebaseui.auth.CredentialHelper.NONE //to avoid showing credentialhelper
};
b_ui.start("#firebaseui-auth-container", b_uiConfig);

解决方案 #

1. 优先使用本地缓存凭证，后台异步验证 #

设置Auth的staleWhileRevalidate参数，让SDK优先使用本地持久化的凭证，同时在后台异步检查服务器端状态，不会阻塞用户登录流程：

const auth = getAuth(firebaseapp);
// 开启本地缓存优先模式
auth.settings.staleWhileRevalidate = true;

2. 缩短凭证刷新超时时间 #

手动设置Auth的网络请求超时，减少网络不佳时的等待时长：

const auth = getAuth(firebaseapp);
// 将token刷新超时设置为5秒（可根据需求调整）
auth.settings.tokenRefreshTimeout = 5000;

超时后SDK会自动 fallback 到本地缓存的凭证。

3. 自定义登录触发逻辑，跳过不必要的检查 #

先手动检查本地用户状态，仅在无有效本地用户时才启动FirebaseUI：

const auth = getAuth(firebaseapp);
// 监听本地用户状态
auth.onAuthStateChanged((user) => {
  if (user) {
    // 直接使用本地用户，跳转至应用主页
    window.location.href = '/dashboard';
  } else {
    // 无本地用户时启动登录界面
    const b_ui = new firebaseui.auth.AuthUI(auth);
    b_ui.start("#firebaseui-auth-container", b_uiConfig);
  }
}, () => {
  // 状态监听出错时直接启动登录界面
  const b_ui = new firebaseui.auth.AuthUI(auth);
  b_ui.start("#firebaseui-auth-container", b_uiConfig);
});

4. 临时禁用App Check自动刷新（谨慎操作） #

App Check的自动刷新在网络不佳时可能阻塞Auth流程，若业务允许，可临时禁用：

initializeAppCheck(firebaseapp, {
  provider: new ReCaptchaV3Provider(process.env.VUE_APP_reCAPTCHAPublicKey),
  isTokenAutoRefreshEnabled: false // 禁用自动刷新
});

注意：禁用后App Check token过期需手动处理，可能影响其他Firebase服务访问，需评估业务影响。

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