Multiple apps, subdomains of shared domain, SSO

I’m using React 18.2, vite 4.3.4 and auth0-react 2.1.0. I’m fairly new to auth0. I’m trying to adopt it company-wise to control access to a number of customer-facing apps.

My problem is similar to 78614, with small changes.

I’m trying to have a “global” app on <> that only does login and then allows people to select from a range of sub-apps. The apps are located at sub-domains like <>, <>,… The “global” app is the only app registered with auth0.

In this “global” app, I’m doing things like this, in main.jsx:

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

      redirect_uri: window.location.origin,
    <App />

When I run locally, apps are on localhost:3000, localhost:3001, … and login works perfectly well. If I even have login / logout buttons on each individual app, I can do the global SSO from anywhere.

However, as soon as I deploy these, the only app that seems to log in is the “global” one on <>. In the sub-apps, if I run

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

const log = console.log

function App() {
  const auth = useAuth0()
  if(auth.isAuthenticated) {
    log("I'm in!")
    log('User:', auth.user)
  } else {
    log("I'm OUT!")

it will always print “I’m OUT!”.

If I add login buttons to say <>, I will be able to also log in app1, but this will be an independent login from the “global” app, and logging out of one does not log me out of the other(s). In short, this is the opposite of what I want here.

I saw many hints at SSO, including in auth0’s web site, but these are all relating to logging an individual app via Google, or Facebook or similar providers. This is not what I’m looking for. I’m looking for SSO in my own structure, via this “global” app.

What am I doing wrong? Code? Dashboard configuration?
Why does it work on localhost but not deployed?