cameleer-saas/ui/src/auth/OrgResolver.tsx

import { useEffect } from 'react';
import { useLogto } from '@logto/react';
import { Spinner } from '@cameleer/design-system';
import { useMe } from '../api/hooks';
import { useOrgStore } from './useOrganization';
import { fetchConfig } from '../config';

/**
 * Fetches /api/me and populates the org store with tenant-to-org mapping.
 * Also reads OAuth2 scopes from the access token and stores them.
 * Renders children once resolved.
 */
export function OrgResolver({ children }: { children: React.ReactNode }) {
  const { data: me, isLoading, isError } = useMe();
  const { getAccessToken } = useLogto();
  const { setOrganizations, setCurrentOrg, setScopes, currentOrgId } = useOrgStore();

  // Effect 1: Org population — runs when /api/me data loads
  useEffect(() => {
    if (!me) return;

    // Map tenants: logtoOrgId is the org ID for token scoping, id is the DB UUID
    const orgEntries = me.tenants.map((t) => ({
      id: t.logtoOrgId,
      name: t.name,
      slug: t.slug,
      tenantId: t.id,
    }));
    setOrganizations(orgEntries);

    // Auto-select if single tenant and no org selected yet
    if (orgEntries.length === 1 && !currentOrgId) {
      setCurrentOrg(orgEntries[0].id);
    }
  }, [me]);

  // Effect 2: Scope fetching — runs when me loads OR when currentOrgId changes
  useEffect(() => {
    if (!me) return;

    // Read scopes from access tokens:
    // - org-scoped resource token → tenant-level scopes (apps:manage, observe:read, etc.)
    // - global resource token → platform-level scopes (platform:admin)
    fetchConfig().then(async (config) => {
      if (!config.logtoResource) return;

      const extractScopes = (token: string | undefined): string[] => {
        if (!token) return [];
        try {
          const payload = JSON.parse(atob(token.split('.')[1]));
          return ((payload.scope as string) ?? '').split(' ').filter(Boolean);
        } catch {
          return [];
        }
      };

      try {
        const [orgToken, globalToken] = await Promise.all([
          currentOrgId
            ? getAccessToken(config.logtoResource, currentOrgId).catch(() => undefined)
            : Promise.resolve(undefined),
          getAccessToken(config.logtoResource).catch(() => undefined),
        ]);

        const merged = new Set([
          ...extractScopes(orgToken),
          ...extractScopes(globalToken),
        ]);
        setScopes(merged);
      } catch {
        setScopes(new Set());
      }
    });
  }, [me, currentOrgId]);

  if (isLoading) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
        <Spinner />
      </div>
    );
  }

  if (isError) {
    return null;
  }

  return <>{children}</>;
}