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
相关产品推荐
相关产品推荐

