refactor: useHydratedSession instead of built-in useSession

keep-ui/app/ai/ai.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Card, List, ListItem, Title, Subtitle } from "@tremor/react";
 import { useAIStats, usePollAILogs } from "utils/hooks/useAI";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { toast } from "react-toastify";
 import { useEffect, useState, useRef, FormEvent } from "react";

keep-ui/app/alerts/ViewAlertModal.tsx

@@ -3,7 +3,7 @@ import Modal from "@/components/ui/Modal"; // Ensure this path matches your proj
 import { Button, Icon, Switch, Text } from "@tremor/react";
 import { toast } from "react-toastify";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import "./ViewAlertModal.css";
 import React, { useState } from "react";

keep-ui/app/alerts/alert-assign-ticket-modal.tsx

@@ -4,7 +4,7 @@ import { Button, TextInput, Text } from "@tremor/react";
 import { PlusIcon } from "@heroicons/react/20/solid";
 import { useForm, Controller, SubmitHandler } from "react-hook-form";
 import { Providers } from "./../providers/providers";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { AlertDto } from "./models";
 import Modal from "@/components/ui/Modal";

keep-ui/app/alerts/alert-associate-incident-modal.tsx

@@ -2,7 +2,7 @@ import Modal from "@/components/ui/Modal";
 import { Button, Divider, Title } from "@tremor/react";
 import Select from "@/components/ui/Select";
 import { CreateOrUpdateIncidentForm } from "@/features/create-or-update-incident";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useApiUrl } from "utils/hooks/useConfig";

keep-ui/app/alerts/alert-change-status-modal.tsx

@@ -9,7 +9,7 @@ import Select, {
 import { useState } from "react";
 import { AlertDto, Status } from "./models";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { toast } from "react-toastify";
 import {
   CheckCircleIcon,

keep-ui/app/alerts/alert-create-incident-ai-modal.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import Modal from "@/components/ui/Modal";
 import { Callout, Button, Title, Card } from "@tremor/react";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { toast } from "react-toastify";
 import Loading from "../loading";
 import { AlertDto } from "./models";

keep-ui/app/alerts/alert-dismiss-modal.tsx

@@ -17,7 +17,7 @@ import "react-quill/dist/quill.snow.css";
 import { AlertDto } from "./models";
 import { format, set, isSameDay, isAfter, addMinutes } from "date-fns";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { usePresets } from "utils/hooks/usePresets";
 import { useAlerts } from "utils/hooks/useAlerts";
 import { toast } from "react-toastify";

keep-ui/app/alerts/alert-menu.tsx

@@ -12,7 +12,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { IoNotificationsOffOutline } from "react-icons/io5";
 
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import Link from "next/link";
 import { ProviderMethod } from "app/providers/providers";

keep-ui/app/alerts/alert-note-modal.tsx

@@ -7,7 +7,7 @@ const ReactQuill =
 import "react-quill/dist/quill.snow.css";
 import { Button } from "@tremor/react";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { AlertDto } from "./models";
 import Modal from "@/components/ui/Modal";
 

keep-ui/app/alerts/alert-presets.tsx

@@ -4,7 +4,7 @@ import Modal from "@/components/ui/Modal";
 import { Button, Subtitle, TextInput, Switch, Text } from "@tremor/react";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { toast } from "react-toastify";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { usePresets } from "utils/hooks/usePresets";
 import { useTags } from "utils/hooks/useTags";
 import { useRouter } from "next/navigation";

keep-ui/app/alerts/alert-push-alert-to-server-modal.tsx

@@ -7,7 +7,7 @@ import {
   FieldValues,
 } from "react-hook-form";
 import Modal from "@/components/ui/Modal";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { useProviders } from "utils/hooks/useProviders";
 import ImageWithFallback from "@/components/ImageWithFallback";

keep-ui/app/alerts/alert-run-workflow-modal.tsx

@@ -3,7 +3,7 @@ import { AlertDto } from "./models";
 import Modal from "@/components/ui/Modal";
 import { useWorkflows } from "utils/hooks/useWorkflows";
 import { useState } from "react";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { toast } from "react-toastify";
 import { useRouter } from "next/navigation";

keep-ui/app/alerts/alert-tab-modal.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import Modal from "@/components/ui/Modal";
 import { Button, TextInput } from "@tremor/react";
 import { AlertsRulesBuilder } from "app/alerts/alerts-rules-builder";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 
 interface AlertTabModalProps {
@@ -114,8 +114,8 @@ const AlertTabModal = ({
             !newTabName
               ? "Tab name is required"
               : !newTabFilter
-              ? "Tab filter is required (notice you need to click 'enter' to apply the filter)"
-              : ""
+                ? "Tab filter is required (notice you need to click 'enter' to apply the filter)"
+                : ""
           }
         >
           Add Tab

keep-ui/app/alerts/alert-tabs.tsx

@@ -5,7 +5,7 @@ import AlertTabModal from "./alert-tab-modal";
 import { evalWithContext } from "./alerts-rules-builder";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 interface Tab {
   id?: string;
   name: string;

keep-ui/app/auth-provider.tsx

@@ -1,11 +1,24 @@
 "use client";
 
+import { Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 
+declare global {
+  interface Window {
+    __NEXT_AUTH_SESSION__?: any;
+  }
+}
+
 type Props = {
   children?: React.ReactNode;
+  session?: Session | null;
 };
 
-export const NextAuthProvider = ({ children }: Props) => {
-  return <SessionProvider>{children}</SessionProvider>
+export const NextAuthProvider = ({ children, session }: Props) => {
+  // Hydrate session on mount
+  if (typeof window !== "undefined" && !!session) {
+    window.__NEXT_AUTH_SESSION__ = session;
+  }
+
+  return <SessionProvider>{children}</SessionProvider>;
 };

keep-ui/app/dashboard/[id]/dashboard.tsx

@@ -1,20 +1,29 @@
 "use client";
-import {useParams} from "next/navigation";
-import {ChangeEvent, useEffect, useState} from "react";
+import { useParams } from "next/navigation";
+import { ChangeEvent, useEffect, useState } from "react";
 import GridLayout from "../GridLayout";
 import WidgetModal from "../WidgetModal";
-import {Button, Card, Icon, Subtitle, TextInput} from "@tremor/react";
-import {GenericsMetrics, LayoutItem, Threshold, WidgetData, WidgetType} from "../types";
-import {Preset} from "app/alerts/models";
-import {FiEdit2, FiSave} from "react-icons/fi";
-import {useSession} from "next-auth/react";
-import {useDashboards} from "utils/hooks/useDashboards";
-import {useApiUrl} from "utils/hooks/useConfig";
+import { Button, Card, Icon, Subtitle, TextInput } from "@tremor/react";
+import {
+  GenericsMetrics,
+  LayoutItem,
+  Threshold,
+  WidgetData,
+  WidgetType,
+} from "../types";
+import { Preset } from "app/alerts/models";
+import { FiEdit2, FiSave } from "react-icons/fi";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
+import { useDashboards } from "utils/hooks/useDashboards";
+import { useApiUrl } from "utils/hooks/useConfig";
 import "./../styles.css";
-import {toast} from "react-toastify";
-import {GenericFilters} from "@/components/filters/GenericFilters";
-import {useDashboardPreset} from "utils/hooks/useDashboardPresets";
-import {MetricsWidget, useDashboardMetricWidgets} from '@/utils/hooks/useDashboardMetricWidgets';
+import { toast } from "react-toastify";
+import { GenericFilters } from "@/components/filters/GenericFilters";
+import { useDashboardPreset } from "utils/hooks/useDashboardPresets";
+import {
+  MetricsWidget,
+  useDashboardMetricWidgets,
+} from "@/utils/hooks/useDashboardMetricWidgets";
 
 const DASHBOARD_FILTERS = [
   {
@@ -33,7 +42,7 @@ const DashboardPage = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [layout, setLayout] = useState<LayoutItem[]>([]);
   const [widgetData, setWidgetData] = useState<WidgetData[]>([]);
-  const {widgets: allMetricWidgets} = useDashboardMetricWidgets(true);
+  const { widgets: allMetricWidgets } = useDashboardMetricWidgets(true);
   const [editingItem, setEditingItem] = useState<WidgetData | null>(null);
   const [dashboardName, setDashboardName] = useState(decodeURIComponent(id));
   const [isEditingName, setIsEditingName] = useState(false);
@@ -59,7 +68,9 @@ const DashboardPage = () => {
   const closeModal = () => setIsModalOpen(false);
 
   const handleAddWidget = (
-    name: string, widgetType: WidgetType, preset?: Preset ,
+    name: string,
+    widgetType: WidgetType,
+    preset?: Preset,
     thresholds?: Threshold[],
     metric?: MetricsWidget,
     genericMetrics?: GenericsMetrics
@@ -69,10 +80,25 @@ const DashboardPage = () => {
       i: uniqueId,
       x: (layout.length % 12) * 2,
       y: Math.floor(layout.length / 12) * 2,
-      w: widgetType === WidgetType.GENERICS_METRICS ? 12 : widgetType === WidgetType.METRIC ? 6 : 3,
-      h: widgetType === WidgetType.GENERICS_METRICS ? 20 : widgetType === WidgetType.METRIC ? 8 : 3,
+      w:
+        widgetType === WidgetType.GENERICS_METRICS
+          ? 12
+          : widgetType === WidgetType.METRIC
+            ? 6
+            : 3,
+      h:
+        widgetType === WidgetType.GENERICS_METRICS
+          ? 20
+          : widgetType === WidgetType.METRIC
+            ? 8
+            : 3,
       minW: widgetType === WidgetType.GENERICS_METRICS ? 10 : 2,
-      minH: widgetType === WidgetType.GENERICS_METRICS ? 15 : widgetType === WidgetType.METRIC ? 7 : 3,
+      minH:
+        widgetType === WidgetType.GENERICS_METRICS
+          ? 15
+          : widgetType === WidgetType.METRIC
+            ? 7
+            : 3,
       static: false,
     };
     const newWidget: WidgetData = {
@@ -82,15 +108,15 @@ const DashboardPage = () => {
       name,
       widgetType,
       genericMetrics,
-      metric
+      metric,
     };
     setLayout((prevLayout) => [...prevLayout, newItem]);
     setWidgetData((prevData) => [...prevData, newWidget]);
   };
 
   const handleEditWidget = (id: string, update?: WidgetData) => {
     let itemToEdit = widgetData.find((d) => d.i === id) || null;
-    console.log(itemToEdit, update)
+    console.log(itemToEdit, update);
     if (itemToEdit && update) {
       setEditingItem({ ...itemToEdit, ...update });
     } else {

keep-ui/app/deduplication/DeduplicationSidebar.tsx

@@ -24,7 +24,7 @@ import {
   InformationCircleIcon,
 } from "@heroicons/react/24/outline";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { KeyedMutator } from "swr";
 
 interface ProviderOption {

keep-ui/app/deduplication/DeduplicationTable.tsx

@@ -25,7 +25,7 @@ import DeduplicationSidebar from "app/deduplication/DeduplicationSidebar";
 import { TrashIcon, PauseIcon, PlusIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
 import { useApiUrl } from "utils/hooks/useConfig";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 
 const columnHelper = createColumnHelper<DeduplicationRule>();
 

keep-ui/app/extraction/create-or-update-extraction-rule.tsx

@@ -13,7 +13,7 @@ import {
   Switch,
   Badge,
 } from "@tremor/react";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { FormEvent, useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useApiUrl } from "utils/hooks/useConfig";

keep-ui/app/extraction/extractions-table.tsx

@@ -18,7 +18,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { MdRemoveCircle, MdModeEdit } from "react-icons/md";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { useMappings } from "utils/hooks/useMappingRules";
 import { toast } from "react-toastify";

keep-ui/app/frigade-provider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as Frigade from "@frigade/react";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 export const FrigadeProvider = ({
   children,
 }: {
@@ -14,7 +14,7 @@ export const FrigadeProvider = ({
       userId={
         session?.user.email === "keep"
           ? undefined
-          : session?.user.email ?? session?.user.name
+          : (session?.user.email ?? session?.user.name)
       }
       theme={{
         colors: {

keep-ui/app/incidents/[id]/activity/incident-activity.tsx

@@ -11,7 +11,7 @@ import {
   usePollIncidentComments,
 } from "@/utils/hooks/useIncidents";
 import { useAlerts } from "@/utils/hooks/useAlerts";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { IncidentActivityItem } from "./ui/IncidentActivityItem";
 import { IncidentActivityComment } from "./ui/IncidentActivityComment";
 import { useMemo } from "react";

keep-ui/app/incidents/[id]/activity/ui/IncidentActivityComment.tsx

@@ -2,7 +2,7 @@ import { IncidentDto } from "@/entities/incidents/model";
 import { AuditEvent } from "@/utils/hooks/useAlerts";
 import { useApiUrl } from "@/utils/hooks/useConfig";
 import { TextInput, Button } from "@tremor/react";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { useState, useCallback, useEffect } from "react";
 import { toast } from "react-toastify";
 import { KeyedMutator } from "swr";

keep-ui/app/incidents/[id]/alerts/incident-alert-menu.tsx

@@ -1,6 +1,6 @@
 import { Icon } from "@tremor/react";
 import { AlertDto } from "app/alerts/models";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { toast } from "react-toastify";
 import { useApiUrl } from "utils/hooks/useConfig";
 import { useIncidentAlerts } from "utils/hooks/useIncidents";

keep-ui/app/layout.tsx

@@ -7,11 +7,13 @@ import { TopologyPollingContextProvider } from "@/app/topology/model/TopologyPol
 import { FrigadeProvider } from "./frigade-provider";
 import { getConfig } from "@/shared/lib/server/getConfig";
 import { ConfigProvider } from "./config-provider";
-import "./globals.css";
-import "react-toastify/dist/ReactToastify.css";
 import { PHProvider } from "./posthog-provider";
 import dynamic from "next/dynamic";
 import ReadOnlyBanner from "./read-only-banner";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/pages/api/auth/[...nextauth]";
+import "./globals.css";
+import "react-toastify/dist/ReactToastify.css";
 
 const PostHogPageView = dynamic(() => import("@/shared/ui/PostHogPageView"), {
   ssr: false,
@@ -29,12 +31,14 @@ type RootLayoutProps = {
 
 export default async function RootLayout({ children }: RootLayoutProps) {
   const config = getConfig();
+  const session = await getServerSession(authOptions);
+
   return (
     <html lang="en" className={`bg-gray-50 ${mulish.className}`}>
       <body className="h-screen flex flex-col lg:grid lg:grid-cols-[fit-content(250px)_30px_auto] lg:grid-rows-1 lg:has-[aside[data-minimized='true']]:grid-cols-[0px_30px_auto]">
         <ConfigProvider config={config}>
           <PHProvider>
-            <NextAuthProvider>
+            <NextAuthProvider session={session}>
               <TopologyPollingContextProvider>
                 <FrigadeProvider>
                   {/* @ts-ignore-error Server Component */}

keep-ui/app/maintenance/create-or-update-maintenance-rule.tsx

@@ -10,7 +10,7 @@ import {
   Select,
   SelectItem,
 } from "@tremor/react";
-import { useSession } from "next-auth/react";
+import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { FormEvent, useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useApiUrl } from "utils/hooks/useConfig";