openpanel/packages/devtools-ui/src/components/authenticated.tsx

import React from "react";
import { isAuthenticated } from "src/utils/auth";

export const Authenticated = ({
  children,
  fallback,
}: {
  children: React.ReactNode;
  fallback: React.ReactNode;
}) => {
  const [authenticated, setAuthenticated] = React.useState<
    "loading" | "success" | "error"
  >("loading");

  const checkAuth = React.useCallback(async () => {
    try {
      const authStatus = await isAuthenticated();
      if (authStatus) {
        setAuthenticated("success");
      } else {
        setAuthenticated("error");
      }
    } catch (_error) {
      setAuthenticated("error");
    }
  }, []);

  React.useEffect(() => {
    checkAuth();
  }, [checkAuth]);

  if (authenticated === "error") {
    return <>{fallback}</>;
  }

  if (authenticated === "success") {
    return <>{children}</>;
  }

  return null;
};