client/src/auth/useAuth.ts

import { useEffect, useState } from 'react'

export interface AuthUser {
  id: string
  name: string
  avatar?: string
  provider?: string
}

export interface AuthProvider {
  id: string
  label: string
}

export interface AuthInfo {
  providers: AuthProvider[]
  authRequired: boolean
  user: AuthUser | null
  collabToken: string | null
}

const FALLBACK: AuthInfo = { providers: [], authRequired: false, user: null, collabToken: null }

export function useAuth(): AuthInfo | null {
  const [auth, setAuth] = useState<AuthInfo | null>(null)
  useEffect(() => {
    let alive = true
    fetch('/api/auth/me')
      .then((r) => r.json() as Promise<AuthInfo>)
      .then((a) => alive && setAuth(a))
      .catch(() => alive && setAuth(FALLBACK))
    return () => {
      alive = false
    }
  }, [])
  return auth
}