如何防止刷新页面时Auth0会话Cookie被清除？

你遇到的问题本质是Auth0 SPA SDK未正确处理页面刷新时的会话恢复，同时缺少必要的持久化配置导致会话状态无法保留。以下是具体修复步骤：

1. 完善Auth0客户端配置 #

在createAuth0Client中添加关键配置项，确保会话状态持久化并支持长期会话：

// authService.js
import { createAuth0Client } from "@auth0/auth0-spa-js";
import { user, isAuthenticated, popupOpen } from "./store";
import config from "../auth_config";

async function createClient() {
  let auth0Client = await createAuth0Client({
    domain: config.domain,
    clientId: config.clientId,
    // 将会话数据存储到本地存储，避免刷新页面丢失
    cacheLocation: 'localstorage',
    // 启用刷新令牌，维持长期会话（需在Auth0控制台开启对应权限）
    useRefreshTokens: true,
    // 配置授权回调地址，必须与Auth0控制台设置一致
    authorizationParams: {
      redirect_uri: window.location.origin,
      scope: 'openid profile email'
    }
  });
  return auth0Client;
}

async function handleRedirectCallback(client) {
  const result = await client.handleRedirectCallback();
  // 回调处理完成后更新本地状态
  user.set(await client.getUser());
  isAuthenticated.set(true);
  return result;
}

async function loginWithPopup(client, options) {
  let c = await client.loginWithPopup(options);
  user.set(await client.getUser());
  isAuthenticated.set(true);
}

function logout(client) {
  return client.logout({
    logoutParams: { returnTo: window.location.origin }
  });
}

// 导出新增的回调处理函数
export default { createClient, loginWithPopup, logout, handleRedirectCallback };

2. 更新Layout初始化逻辑 #

修改+layout.svelte，先处理Auth0的登录回调，再初始化本地状态：

// +layout.svelte
<script>
  import { onMount } from "svelte";
  import auth from "../authService";
  import { isAuthenticated, user } from "../store";

  let auth0Client;

  onMount(async () => {
    auth0Client = await auth.createClient();
    
    // 检查并处理Auth0登录后的回调请求
    if (window.location.search.includes('code=') && window.location.search.includes('state=')) {
      await auth.handleRedirectCallback(auth0Client);
      // 清除URL中的回调参数，避免重复处理
      window.history.replaceState({}, document.title, window.location.pathname);
    }
    
    // 最后同步Auth0会话状态到本地存储
    isAuthenticated.set(await auth0Client.isAuthenticated());
    user.set(await auth0Client.getUser());
  });

  // 推荐改用loginWithRedirect替代popup，适配SvelteKit路由并避免跨域问题
  async function login() {
    await auth0Client.loginWithRedirect();
  }

  async function logout() {
    await auth.logout(auth0Client);
  }
</script>

{#if $isAuthenticated}
  <a class="nav-link" href="/#" on:click|preventDefault="{logout}">Log Out</a>
{:else}
  <a class="nav-link" href="/#" on:click|preventDefault="{login}">Log In</a>
{/if}

<slot />

3. 验证Auth0控制台配置 #

确保你的Auth0应用设置中：

• Allowed Callback URLs包含你的应用地址（如http://localhost:5173）
• Allowed Logout URLs包含你的应用地址
• Allowed Web Origins包含你的应用地址
• 开启Allow Refresh Tokens（对应代码中的useRefreshTokens: true配置）

完成以上修改后，页面刷新时Auth0 SDK会从本地存储读取会话数据，或通过刷新令牌自动恢复会话，isAuthenticated状态将正确保持，不会出现刷新后登出的问题。

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