cameleer-saas/ui/src/auth/useAuth.ts

import { useLogto } from '@logto/react';
import { useState, useEffect, useCallback } from 'react';

interface IdTokenClaims {
  sub?: string;
  email?: string;
  name?: string;
  username?: string;
  roles?: string[];
  organization_id?: string;
  [key: string]: unknown;
}

export function useAuth() {
  const { isAuthenticated, isLoading, getIdTokenClaims, signOut, signIn } = useLogto();
  const [claims, setClaims] = useState<IdTokenClaims | null>(null);

  useEffect(() => {
    if (isAuthenticated) {
      getIdTokenClaims().then((c) => setClaims(c as IdTokenClaims));
    } else {
      setClaims(null);
    }
  }, [isAuthenticated, getIdTokenClaims]);

  const username = claims?.username ?? claims?.name ?? claims?.email ?? claims?.sub ?? null;
  const roles = (claims?.roles as string[]) ?? [];
  const tenantId = (claims?.organization_id as string) ?? null;

  const logout = useCallback(() => {
    signOut(window.location.origin + '/login');
  }, [signOut]);

  return {
    isAuthenticated,
    isLoading,
    username,
    roles,
    tenantId,
    logout,
    signIn,
  };
}