Svelte/SvelteKit中Firebase Auth认证状态持久化异常排查

核心原因 #

1. Firebase Auth初始化未区分客户端/服务端
   你仅在服务端目录初始化了Firebase，但Firebase Auth的会话持久化依赖浏览器localStorage，服务端实例无法访问客户端存储。刷新页面时，服务端渲染阶段可能误输出已登录状态，但客户端未初始化专属的Firebase Auth实例，无法读取本地会话，导致后续store被重置为未登录。

2. SSR与客户端状态不匹配
   SvelteKit服务端渲染时，无法直接获取客户端的Auth会话（存储在浏览器本地）。如果服务端渲染时错误设置authUser初始状态为已登录，客户端注水（hydrate）过程中，因未完成客户端Firebase Auth初始化，store会被重置为默认的未登录状态，就会出现“短暂显示已登录又变未登录”的闪烁问题。

3. 客户端Auth状态监听时机滞后
   若onAuthStateChanged在服务端代码中执行，客户端刷新后未在浏览器环境重新启动监听，无法及时捕获Firebase Auth自动恢复会话的事件，导致store状态未被正确更新。

解决步骤 #

1. 拆分客户端/服务端Firebase初始化

   • 服务端：保留src/lib/server/firebase.server.ts，用于服务端Auth验证（如校验ID Token）。
   • 客户端：新建src/lib/client/firebase.client.ts，专门在浏览器环境初始化Firebase Auth：

     import { initializeApp } from "firebase/app";
     import { getAuth } from "firebase/auth";
     
     const firebaseConfig = { /* 你的Firebase配置 */ };
     const app = initializeApp(firebaseConfig);
     export const auth = getAuth(app);
     

2. 在客户端启动Auth状态监听
   在src/routes/+layout.svelte中，用onMount确保监听逻辑仅在客户端运行：

<script>
  import { auth } from "$lib/client/firebase.client";
  import { authUser } from "$lib/stores/auth";
  import { onMount } from "svelte";

  onMount(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      $authUser = user;
    });
    return unsubscribe;
  });
</script>

3. 统一SSR与客户端初始状态
   在src/routes/+layout.server.ts中，通过Cookie验证用户身份，传递统一的初始状态：

import type { LayoutServerLoad } from "./$types";
import { auth } from "$lib/server/firebase.server";
import { cookies } from "@sveltejs/kit";

export const load: LayoutServerLoad = async () => {
  const sessionCookie = cookies.get("__session");
  if (!sessionCookie) return { user: null };

  try {
    const decodedClaims = await auth.verifySessionCookie(sessionCookie, true);
    return { user: decodedClaims };
  } catch (e) {
    return { user: null };
  }
};

在+layout.svelte中接收并同步初始状态：

<script>
  export let data;
  import { authUser } from "$lib/stores/auth";

  $authUser = data.user;
</script>

4. 优化store初始状态
   将authUser store初始值设为null，避免默认值干扰状态同步：

import { writable } from "svelte/store";
export const authUser = writable<firebase.User | null>(null);

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