add auth to localstorage

src/components/DashboardPage/DashboardPage.tsx

@@ -7,17 +7,17 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 
 type Props = {
-  abilities: string[]
+  // abilities: string[]
 }
 const DashboardPage: React.FC<Props> = ({
-  abilities
+  // abilities
 }) => {
   const { t } = useTranslation("dashboard");
   const router = useRouter();
 
-  useEffect(()=> {
-    window.localStorage.setItem("abilities", JSON.stringify(abilities))
-  })
+  // useEffect(()=> {
+  //   window.localStorage.setItem("abilities", JSON.stringify(abilities))
+  // })
 
   return (
     <ThemeProvider theme={theme}>

src/components/DashboardPage/DashboardWrapper.tsx

@@ -5,9 +5,9 @@ import { Typography } from "@mui/material"
 import { I18nProvider, getServerI18n } from "@/i18n";
 import DashboardLoading from "./DashboardLoading";
 
-export type SessionWithAbilities = {
-    abilities: string[]
-} & Session | null
+// export type SessionWithAbilities = {
+//     abilities: string[]
+// } & Session | null
 
 interface SubComponents {
     Loading: typeof DashboardLoading;
@@ -22,13 +22,13 @@ const DashboardWrapper: React.FC<Props> & SubComponents = async ({
 }) => {
 
   const { t } = await getServerI18n("dashboard");
-  const session: SessionWithAbilities = await getServerSession(authOptions)
+//   const session: SessionWithAbilities = await getServerSession(authOptions)
 
     return (    
         <>
         <Typography variant="h4">{t("Dashboard")}</Typography>
             <DashboardPage
-                abilities={session ? session?.abilities : []}
+                // abilities={session ? session?.abilities : []}
             />
         </>
     )

src/components/LoginPage/LoginForm.tsx

@@ -6,7 +6,8 @@ import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import { TFunction } from "i18next";
-import { signIn } from "next-auth/react";
+import { Session } from "next-auth";
+import { getSession, signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
@@ -17,6 +18,10 @@ type LoginFields = {
   password: string;
 };
 
+type SessionWithAbilities = {
+  abilities: string[]
+} & Session | null
+
 // Error codes in https://next-auth.js.org/configuration/pages#sign-in-page
 const getHumanFriendlyErrorMessage = (
   t: TFunction,
@@ -53,8 +58,16 @@ const LoginForm: React.FC = () => {
       setServerError(res.error);
       return;
     }
+
+
+    // set auth to local storage
+    const session = await getSession() as SessionWithAbilities
+
+    // console.log(session)
+    window.localStorage.setItem("abilities", JSON.stringify(session?.abilities))
+
     const callbackUrl =
-      new URLSearchParams(window.location.search).get("callbackUrl") || "/";
+    new URLSearchParams(window.location.search).get("callbackUrl") || "/";
 
     router.push(callbackUrl);
   };
@@ -62,7 +75,7 @@ const LoginForm: React.FC = () => {
   useEffect(()=> {
       // clean abilities before login
       window.localStorage.removeItem("abilities")
-  })
+  }, [])
   
   return (
     <Stack