使用@auth0/auth0-react实现React与NextJS跨应用登出同步问题

问题根源 #

当前登出不同步、令牌不一致的核心原因：

1. 手动清除localStorage会破坏Auth0 SDK的内部状态管理，且SDK默认不会主动监听其他标签页/应用的会话变化。
2. 仅调用logout()只会处理当前应用的本地会话，未触发Auth0全局会话的同步失效，导致其他应用/标签页仍保留有效会话。

解决方案 #

1. 配置Auth0 Provider启用全局会话监听 #

在React和Next.js的Auth0Provider中添加会话监听与刷新令牌配置，让应用能实时感知全局会话状态变化：

React应用配置

import { Auth0Provider } from '@auth0/auth0-react';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
  <Auth0Provider
    domain="你的Auth0域名"
    clientId="你的React应用Client ID"
    authorizationParams={{
      redirect_uri: window.location.origin,
      scope: "openid profile email"
    }}
    cacheLocation="localstorage" // 统一用localStorage存储会话数据
    useRefreshTokens={true} // 启用刷新令牌维持持久会话
    onSessionChange={(session) => {
      // 会话失效时自动跳转登录页
      if (!session) {
        window.location.href = '/login';
      }
    }}
  >
    <App />
  </Auth0Provider>
);

Next.js应用配置

import { Auth0Provider } from '@auth0/auth0-react';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Auth0Provider
      domain="你的Auth0域名"
      clientId="你的Next.js应用Client ID"
      authorizationParams={{
        redirect_uri: typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3001',
        scope: "openid profile email"
      }}
      cacheLocation="localstorage"
      useRefreshTokens={true}
      onSessionChange={(session) => {
        if (!session && typeof window !== 'undefined') {
          window.location.href = '/login';
        }
      }}
    >
      <Component {...pageProps} />
    </Auth0Provider>
  );
}

2. 修正登出逻辑，移除手动清除localStorage #

Auth0 SDK会自动处理会话存储的清理，手动清除会导致状态不一致，修改登出函数：

React应用登出函数

import { useAuth0 } from "@auth0/auth0-react";

const handleLogout = () => {
  const { logout } = useAuth0();
  logout({ 
    logoutParams: { 
      returnTo: window.location.origin
    } 
  });
};

Next.js应用登出函数

import { useAuth0 } from "@auth0/auth0-react";

const handleLogout = () => {
  const { logout } = useAuth0();
  logout({ 
    logoutParams: { 
      returnTo: "http://localhost:3001"
    } 
  });
};

3. Auth0控制台必要配置 #

• Allowed Logout URLs：在两个应用的Auth0设置页面，分别添加对方的域名（如http://localhost:3000和http://localhost:3001）到允许的登出跳转列表。
• Allowed Web Origins：如果两个应用使用不同的Client ID，需在Auth0控制台「高级设置」->「跨源认证」中启用跨源认证，并添加对方域名到允许列表。
• 第三方Cookie兼容：确保浏览器未阻止第三方Cookie（Auth0跨应用会话依赖此功能）；若需兼容阻止第三方Cookie的场景，可启用Auth0的「刷新令牌轮换」功能。

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