fix(console): white screen post sign in (#265)

apps/console/src/app.tsx

@@ -30,23 +30,34 @@ import { RequiredProviderApiKeyModalProvider } from "./lib/providers/RequiredPro
 import { OrgMembersPage } from "./pages/organizations/OrgMembersPage";
 import { OrgSettingsPage } from "./pages/organizations/OrgSettingsPage";
 import { OrgApiKeysPage } from "./pages/organizations/OrgApiKeysPage";
-import { useCurrentOrganization } from "./lib/hooks/useCurrentOrganization";
 import { PromptEditView } from "./features/editor/PromptEditView";
 import { EditorProvider } from "./lib/providers/EditorContext";
 import { PromptTesterProvider } from "./lib/providers/PromptTesterContext";
 import { PromptVersionsView } from "./components/prompts/views/PromptVersionsView";
 import { PromptMetricsView } from "./components/prompts/views/PromptMetricsView";
 import { Suspense } from "react";
 import { FullScreenLoader } from "./components/common/FullScreenLoader";
-import { ProjectsPage } from "./pages/projects/ProjectsPage";
 import { OrgPage } from "./pages/projects/OrgPage";
+import { useCurrentOrganization } from "./lib/hooks/useCurrentOrganization";
 
 initSuperTokens();
 
 if (HOTJAR_SITE_ID && HOTJAR_VERSION) {
   hotjar.initialize(Number(HOTJAR_SITE_ID), Number(HOTJAR_VERSION));
 }
 
+const RootHandler = () => {
+  const { organizationId, isLoading } = useCurrentOrganization();
+
+  if (isLoading) {
+    return <FullScreenLoader />;
+  }
+
+  if (organizationId) {
+    return <Navigate to={`/orgs/${organizationId}`} />;
+  }
+};
+
 export function App() {
   return (
     <div className="relative h-full">
@@ -76,6 +87,8 @@ export function App() {
                 </SessionAuth>
               }
             >
+              <Route index element={<RootHandler />} />
+
               <Route
                 path="/invitations/:token/accept"
                 element={

apps/console/src/lib/hooks/useCurrentOrganization.tsx

@@ -30,7 +30,7 @@ export const useCurrentOrganization = ({
     }
   }, [currentOrgId, organizations, setCurrentOrgId]);
 
-  const { data, isLoading } = useQuery({
+  const { data, isLoading, isSuccess, error, isError } = useQuery({
     queryKey: [
       "currentOrganization",
       currentOrgId,
@@ -54,6 +54,9 @@ export const useCurrentOrganization = ({
     organization: data?.organization,
     organizationId: data?.organization?.id,
     isLoading,
+    isSuccess,
+    isError,
+    error,
     currentOrgId,
     selectOrg,
   };

apps/console/src/lib/hooks/useOrganizations.tsx

@@ -3,13 +3,16 @@ import { gqlClient } from "../graphql";
 import { GET_ORGANIZATIONS } from "~/graphql/definitions/queries/organizations";
 
 export const useOrganizations = () => {
-  const { data, isLoading } = useQuery({
+  const { data, isLoading, isSuccess, isError, error } = useQuery({
     queryKey: ["organizations"],
     queryFn: async () => gqlClient.request(GET_ORGANIZATIONS),
   });
 
   return {
     organizations: data?.organizations,
     isLoading,
+    isSuccess,
+    isError,
+    error,
   };
 };

apps/console/src/lib/utils/sign-out.ts

@@ -4,6 +4,5 @@ import { trackEvent } from "./analytics";
 export async function signOut() {
   trackEvent("user_logout");
   await supertokensSignOut();
-  localStorage.removeItem("currentOrgId");
   window.location.href = "/login";
 }

apps/console/src/pages/auth/LogoutPage.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { FullScreenLoader } from "~/components/common/FullScreenLoader";
 import { signOut } from "~/lib/utils/sign-out";
 
 export const LogoutPage = () => {
@@ -10,5 +11,5 @@ export const LogoutPage = () => {
     _signOut();
   }, []);
 
-  return <p>Signing out...</p>;
+  return <FullScreenLoader />;
 };