Auth0同一tenant下2个React应用登录状态互相干扰如何解决

问题根因 #

Auth0的默认SSO会话是绑定在租户域名维度的，同一浏览器同一域名下只会留存一个活跃SSO会话。你在App B登录新账号时，会直接覆盖App A之前建立的租户级SSO会话，才会导致两个应用的登录状态互相干扰。

解决方案 #

方案1：配置独立会话存储（推荐，改造成本最低） #

在两个应用的@auth0/auth0-react初始化参数中，分别配置独立的会话标识，避免存储冲突：

• App A 配置示例：

<Auth0Provider
  domain="你的Auth0租户域名"
  clientId="App A专属clientID"
  audience="你的公共audience"
  // 配置应用独有的cookie名称
  cookieName="auth0_session_app_a"
  // 可选：使用localStorage持久化存储，刷新页面不会丢失会话
  cacheLocation="localstorage"
  // 开启刷新令牌，优先用自有令牌刷新会话，不依赖公共SSO会话
  useRefreshTokens={true}
>
  <AppA />
</Auth0Provider>

• App B 配置示例：

<Auth0Provider
  domain="你的Auth0租户域名"
  clientId="App B专属clientID"
  audience="你的公共audience"
  // 配置和App A不同的独有cookie名称
  cookieName="auth0_session_app_b"
  cacheLocation="localstorage"
  useRefreshTokens={true}
>
  <AppB />
</Auth0Provider>

注意：如果选择cacheLocation="localstorage"，需要做好前端XSS防护，避免存储的令牌被盗取。安全要求较高的场景可以保留默认的memory缓存，搭配useRefreshTokens={true}和独立cookie配置，同样可以实现会话隔离。

方案2：配置独立自定义域名 #

如果你的Auth0租户支持自定义域名，可以为两个应用分别配置不同的自定义域名，不同域名的SSO会话天然隔离，不需要修改前端代码即可实现登录状态互不干扰，缺点是需要额外的域名配置和租户权限支持。

方案3：关闭SSO自动登录 #

如果两款应用不需要跨应用SSO能力，可以在Auth0管理后台分别进入两个应用的设置页，关闭「SSO Auto Login」选项，同时在调用登录接口时传入prompt: "login"参数，强制应用校验自有会话，不会复用其他应用的登录状态。

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