SvelteKit中通过Firebase校验登录后在load()内重定向问题

问题根源 #

你用onAuthStateChanged()在server端的load()函数里校验用户状态是行不通的——这个API是Firebase Auth的客户端专属接口，依赖浏览器环境的用户会话，server端运行时没有浏览器上下文，根本没法正确获取登录状态，这就是为什么已登录还会进入未登录分支的原因。

另外，server端重定向不能用客户端的window.location这类方法，必须用SvelteKit提供的redirect()函数抛出异常，否则不会生效。

正确解决方案 #

我们需要换用Firebase Admin SDK在server端验证客户端传来的ID Token，同时通过Cookie传递Token，确保server端能拿到用户的登录凭证。

步骤1：初始化Firebase Admin SDK

在server端单独的文件里初始化Admin SDK（比如src/lib/server/firebase.js）：

import { initializeApp, cert, getApps } from 'firebase-admin/app';
import { getAuth } from 'firebase-admin/auth';

// 从环境变量读取Admin服务账号信息
const serviceAccount = JSON.parse(process.env.FIREBASE_ADMIN_SERVICE_ACCOUNT);

// 避免重复初始化
if (!getApps().length) {
  initializeApp({
    credential: cert(serviceAccount)
  });
}

export const adminAuth = getAuth();

步骤2：在+layout.server.js中实现校验与重定向

import { adminAuth } from '$lib/server/firebase';
import { redirect } from '@sveltejs/kit';

export async function load({ cookies, url }) {
  // 定义不需要校验的页面：登录/注册页
  const isAuthExcludedPage = url.pathname === '/login' || url.pathname === '/register';

  // 从Cookie获取客户端传来的Firebase ID Token
  const idToken = cookies.get('firebase_id_token');

  // 无Token的情况
  if (!idToken) {
    if (!isAuthExcludedPage) {
      // 非登录/注册页，直接重定向到登录页
      throw redirect(303, '/login');
    }
    return { user: null };
  }

  try {
    // 验证Token有效性
    const decodedToken = await adminAuth.verifyIdToken(idToken);
    // 可选：获取完整用户信息
    const user = await adminAuth.getUser(decodedToken.uid);
    
    // 将用户信息传给客户端组件
    return { 
      user: {
        uid: user.uid,
        email: user.email,
        displayName: user.displayName
      }
    };
  } catch (error) {
    // Token无效（过期/篡改），清除无效Cookie
    cookies.delete('firebase_id_token', { path: '/' });
    
    if (!isAuthExcludedPage) {
      throw redirect(303, '/login');
    }
    return { user: null };
  }
}

步骤3：客户端登录后存储ID Token到Cookie

在登录页面（比如src/routes/login/+page.svelte）的登录逻辑里，成功登录后把ID Token存到Cookie：

import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from '$lib/firebase'; // 客户端的Firebase初始化
import { cookies } from '@sveltejs/kit';

async function handleLogin(email, password) {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    // 获取ID Token
    const idToken = await userCredential.user.getIdToken();
    
    // 存储到Cookie，配置安全属性
    cookies.set('firebase_id_token', idToken, {
      path: '/',
      maxAge: 60 * 60 * 24 * 7, // 有效期7天
      secure: import.meta.env.PROD, // 生产环境启用HTTPS
      httpOnly: true, // 防止XSS攻击
      sameSite: 'strict'
    });
    
    // 登录成功后跳转到首页或之前的页面
    window.location.href = '/';
  } catch (error) {
    console.error('登录失败:', error);
  }
}

关键说明 #

• 用Admin SDK验证Token是server端校验用户身份的标准方式，避免了客户端伪造登录状态的风险。
• server端load()函数里必须通过throw redirect()触发重定向，这是SvelteKit规定的server端重定向方式，能确保页面渲染前完成跳转，不会出现先加载内容再重定向的问题。
• Cookie的httpOnly属性能有效防止XSS攻击，secure属性在生产环境必须开启，保证Token仅通过HTTPS传输。

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