One state for React, Vue and Svelte users.

export const $session = atom<Session>(null)
export const $signedIn = computed($session, (session) => !!session)
export async function signOut() {
  await api.signOut()
  $session.set(null)
}

import { useStore } from '@nanostores/react'
export function Account() {
  const session = useStore($session)
  return <span>{session?.name ?? 'Guest'}</span>
}

<script setup lang="ts">
import { useStore } from '@nanostores/vue'
const session = useStore($session)
</script>

<template>
  <span>{{ session?.name ?? 'Guest' }}</span>
</template>

<script lang="ts">
  // `$` is reserved here, so the store is renamed on import.
  import { $session as session } from './session'
</script>

<span>{$session?.name ?? 'Guest'}</span>

$session.subscribe((session) => {
  for (const el of document.querySelectorAll('[data-user-name]')) {
    el.textContent = session?.name ?? 'Guest'
  }
})
document.querySelector('#sign-out')?.addEventListener('click', signOut)