You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Chrome多标签页下Firebase Auth登录流程异常问题排查

Firebase Auth + SvelteKit 多标签页登录流程中断问题

我正在开发一个基于SvelteKit框架的Web应用,使用Firebase Auth的signInWithRedirect方法实现登录功能。但在Chrome多标签页环境下运行时,登录流程偶尔会出现中断的情况。仅能在Chrome和Brave浏览器中复现该问题,Edge浏览器中无法复现。

复现步骤

  • 创建全新SvelteKit项目:执行npm create svelte@latest my-test
  • 执行npm install安装项目依赖
  • 执行npm install firebase安装Firebase SDK
  • 创建包含Auth模块的Firebase新项目,或使用现有已配置Auth的项目
  • 将Firebase的配置信息粘贴到+page.svelte文件的const firebaseConfig常量中
  • 执行npm run dev启动开发服务器
  • 在Chrome浏览器中打开多个该应用的标签页,在不同标签页反复点击登录/退出按钮

可通过浏览器开发者工具的Network标签页查看更多请求相关信息,一段时间后登录流程会出现中断。

问题

请问这是我的代码存在问题,还是Firebase Auth或浏览器的Bug?

代码示例

<script lang="ts">
    import { signOut, getAuth, signInWithRedirect, GoogleAuthProvider, onAuthStateChanged, type User } from "firebase/auth";
    import { initializeApp, getApp } from "firebase/app";
    import { getFirestore } from "firebase/firestore";

    const firebaseConfig = {
        // 在此粘贴Firebase配置信息
        // 在此粘贴Firebase配置信息
        // 在此粘贴Firebase配置信息
        // 在此粘贴Firebase配置信息
        // 在此粘贴Firebase配置信息
        // 在此粘贴Firebase配置信息
    };

    async function handleSignout() {
        await signOut(auth);
    }

    async function handleSignin() {
        await signInWithRedirect(auth, new GoogleAuthProvider())
    }

    function createFirebaseApp() {
        try {
            return getApp();
        } catch {
            return initializeApp(firebaseConfig);
        }
    }

    // 初始化Firebase
    const app = createFirebaseApp();
    const auth = getAuth(app);
    const db = getFirestore(app);

    let user: User|null;
    
    onAuthStateChanged(auth, (data) => {
        user = data;
    })

</script>

<h1>Auth bug replication</h1>
<p>To replicate the bug, open multiple tabs and log in and out several times. After a while, the flow breaks. I could replicate the bug in Chrome and Brave, but not Edge.</p>

<div>
    {#if user}
        <span>{user.displayName}</span>
        <input type="button" value="Sign out" on:click={handleSignout} />
    {:else}
        <input type="button" value="Sign in with Google" on:click={handleSignin} />
    {/if}
</div>

内容的提问来源于stack exchange,提问作者Isak Regnström

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.13 17:33:21