The States Nobody Designs

There are more than two. Signed in and signed out are the obvious pair. The ones that cause bugs are the others.

Unknown. The page has loaded and the application does not yet know who you are. This renders as a flash of the wrong thing: a sign-in button appearing for half a second to somebody who is signed in, or worse, a protected page flashing before it redirects.

Expiring. The credential is still present but no longer valid, and you will not find out until the next request fails.

Signed out elsewhere. Another tab signed out. This tab still shows a signed-in interface.

Model it as a union, not two booleans. You did this in React and again in TypeScript: unknown | signed-out | signed-in. Then a component cannot accidentally treat unknown as signed-out, because the type will not let it.

The unknown state is not a loading spinner over the whole application either. It usually means rendering the parts that do not depend on identity and holding only the parts that do.