fix bug on logout journey

sagho0or · sagho0or · commit b7ab1ffbe9e1 · 2024-09-09T15:24:55.000+01:00
diff --git a/src/app/(pages)/api/auth/checkLogin/route.ts b/src/app/(pages)/api/auth/checkLogin/route.ts
diff --git a/src/app/(pages)/api/auth/checkToken/route.ts b/src/app/(pages)/api/auth/checkToken/route.ts
diff --git a/src/app/(pages)/api/auth/login/verify/otp/route.ts b/src/app/(pages)/api/auth/login/verify/otp/route.ts
@@ -17,7 +17,7 @@ export async function POST(req: NextRequest) {
         firstName: 'Saghar',
         role: UserRole.Admin,
         lastLogin: new Date(),
-        token: 'mockAuthToken',
+        token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6InNhZ2hhciBmYWRhZWkiLCJpYXQiOjE1MTYyMzkwMjJ9.B5SGLT-b7aweYbaUMVD7gjivCQTM9atFeKUlW8Fo2yU',
         refreshToken: 'mockRefreshAuthToken'
         
     }
diff --git a/src/app/(pages)/api/remove-tockens/route.ts b/src/app/(pages)/api/remove-tockens/route.ts
@@ -21,6 +21,7 @@ export async function POST() {
     secure: true,
     sameSite: 'strict'
   });
+  
 
   return response;
 }
diff --git a/src/app/(pages)/api/user/account/userprofile/route.ts b/src/app/(pages)/api/user/account/userprofile/route.ts
@@ -13,9 +13,7 @@ export async function GET(req: NextRequest) {
         lastName: 'Fadaei',
         firstName: 'Saghar',
         role: UserRole.Admin,
-        lastLogin: new Date(),
-        token: 'string',
-        refreshToken: 'string'
+        lastLogin: new Date()
         
     }
     return NextResponse.json({ message: 'get user information successfully', data }, { status: 200 });
diff --git a/src/app/clientWrapper.tsx b/src/app/clientWrapper.tsx
@@ -3,8 +3,8 @@ import React, { useEffect, useState } from "react";
 import isMobileView from "@/app/utils/isMobileView";
 import Header from "@/app/components/Header/webHeader";
 import { usePathname } from "next/navigation";
-import Menu from "./components/SafeLLM/Menu";
 import { useShowInnerComponent } from "./ShowInnerComponentContext";
+import Menu from "./components/SafeLLM/Menu";
 
 const pages = {
   '/dashboard': 'Dashboard',
diff --git a/src/app/components/Chat/WebChat/index.tsx b/src/app/components/Chat/WebChat/index.tsx
@@ -9,7 +9,7 @@ export default function WebChatComponent({ initialChatId }: any) {
     
     return (
         <Sidebar isSidebarOpen={isSidebarOpen} setIsSidebarOpen={setIsSidebarOpen}>
-            <div className="flex flex-col w-full">
+            <div className="flex flex-col w-full flex-1">
                 <div className="flex-grow p-4 overflow-y-auto"  ref={chatBoxRef}>
                     {messages.map((message, index) => (
                         <div key={index} className={`my-2 ${message.sender === "user" ? "text-right" : "text-left"}`}>
@@ -33,7 +33,7 @@ export default function WebChatComponent({ initialChatId }: any) {
                     ))}
                     <div ref={messagesEndRef} />
                 </div>
-                <div className="p-4 border-t border-gray-300">
+                <div className="p-4 border-t border-gray-300 mt-auto">
                     <input
                         type="text"
                         value={userInput}
diff --git a/src/app/components/Header/webHeader/index.tsx b/src/app/components/Header/webHeader/index.tsx
@@ -1,44 +1,35 @@
-import { GetServerSideProps } from 'next';
-import { parseCookies } from 'nookies';
+"use client"
 import HeaderItems from "@/app/components/Header/webHeader/headerItems";
 import Link from "next/link";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import IButton from "@/app/components/Common/Button";
 import { UserProfileResponseInterface } from "@/store/userProfile/interface";
 import getUserProfileService from "@/app/services/getUserProfile.service";
 
-// SSR function to check login status
-export const getServerSideProps: GetServerSideProps = async (ctx) => {
-    const cookies = parseCookies(ctx);
-    const token = cookies['auth-token']; // Get the auth-token from cookies
-    
-    if (!token) {
-        // If the user is not logged in, redirect to login page
-        return {
-            redirect: {
-                destination: '/login',
-                permanent: false,
-            },
-        };
-    }
+export default function Header() {
 
-    // Fetch user profile if token exists
-    const userProfile = await getUserProfileService(false);
+    const [userProfile, setUserProfile] = useState<UserProfileResponseInterface>();
 
-    return {
-        props: { userProfile },
-    };
-}
+    const isLogin = localStorage.getItem('isLogin');
+
+    useEffect(() => {
+        
+        if (isLogin) {
+            getUserProfileService(false).then((res: any) => {
+                setUserProfile(res)
+            })
+        }
+    }, []);
 
-export default function Header({ userProfile }: { userProfile: UserProfileResponseInterface }) {
     return (
         <div className={"fixed w-full z-50"}>
             <div className={"flex justify-between items-center h-18 bg-white px-16"}>
-                <Link href={"/"} className={'h-full flex'}>
+                <Link href={"/"} className={'h-full flex'} >
                     <img src={"/safellm.svg"} alt={"SafeLLM"} />
+
                 </Link>
                 <HeaderItems />
-                {userProfile ?
+                {isLogin ?
                     <div className={'flex gap-6 items-center justify-center'}>
                         <Link href={"/profile"}>
                             <h5>Profile</h5>
@@ -62,4 +53,5 @@ export default function Header({ userProfile }: { userProfile: UserProfileRespon
             </div>
         </div>
     );
-}
+
+}
diff --git a/src/app/components/Login/Forms/OtpForm/index.tsx b/src/app/components/Login/Forms/OtpForm/index.tsx
@@ -69,7 +69,7 @@ export default function OtpForm(props: OTPFormProps) {
                                    className={'ml-2'}
                                    onComplete={() => setTimerCompleted(true)}
                                    renderer={counterProps =>
-                                       <div> {counterProps.seconds} : {counterProps.minutes} </div>}/>
+                                       <div> {counterProps.minutes} :  {counterProps.seconds}</div>}/>
                         <span> {' Seconds '} )</span>
                     </div>
                 }
diff --git a/src/app/components/Login/index.tsx b/src/app/components/Login/index.tsx
@@ -36,20 +36,35 @@ export default function LoginComponent() {
     }
   }, [loginStates.isDone]);
 
+
   useEffect(() => {
-    if (loginOtpStates.isDone) {
-      setUserProfile(loginOtpStates.response.data);
-      axios.post("/api/set-tokens", {
-        token: loginOtpStates.response.data.token,
-        refreshToken: loginOtpStates.response.data.refresh_token
-      });
-      if (loginOtpStates.response.data.lastLogin == null) {
-        router.push('/security'); 
-      } else {
-        router.push('/'); 
+    const handleLogin = async () => {
+      if (loginOtpStates.isDone) {
+        try {
+  
+          await axios.post("/api/set-tokens", {
+            token: loginOtpStates.response.data.token,
+            refreshToken: loginOtpStates.response.data.refresh_token
+          });
+  
+          setUserProfile(loginOtpStates.response.data);
+          debugger;
+          localStorage.setItem('isLogin', loginOtpStates.response.data.token);
+  
+          if (loginOtpStates.response.data.lastLogin == null) {
+            router.push('/security');
+          } else {
+            router.push('/');
+          }
+        } catch (error) {
+          console.error("Error setting tokens or during redirect:", error);
+        }
       }
-    }
+    };
+  
+    handleLogin();
   }, [loginOtpStates.isDone]);
+  
 
   async function acceptMobileForm(email: string, password: string) {
     //api call for mobile number & password
diff --git a/src/app/components/SafeLLM/Menu.tsx b/src/app/components/SafeLLM/Menu.tsx
@@ -8,6 +8,8 @@ import logout from '@/app/services/logout';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '@/store/store';
 import { fetchChatHistoryListRequest } from '@/store/chat/history/list/slice';
+import { resetLoginOtpState } from '@/store/auth/login/otp/slice';
+import { loginReset } from '@/store/auth/login/form/slice';
 
 const allowedRolesManagement = ['admin', 'developer', 'management'];
 
@@ -50,9 +52,14 @@ const Menu = ({ currentPath, setShowInnerComponent }: { currentPath: string, set
         Router.push(path);
     }
 
-    function logoutFuc() {
-        logout();
-        Router.push('/')
+    
+    const logoutFuc = async () => {
+        await logout();
+        dispatch(resetLoginOtpState());
+        dispatch(loginReset());
+        localStorage.removeItem('isLogin');
+        localStorage.removeItem('userProfile');
+        Router.push('/');
     }
 
     const handleScroll = (e: React.UIEvent<HTMLUListElement>) => {
diff --git a/src/app/components/Sidebar/index.tsx b/src/app/components/Sidebar/index.tsx
@@ -11,6 +11,8 @@ import { useDispatch, useSelector } from "react-redux";
 import { fetchChatHistoryListRequest } from "@/store/chat/history/list/slice";
 import { useParams } from "next/navigation";
 import toast, { Toaster } from "react-hot-toast";
+import { resetLoginOtpState } from "@/store/auth/login/otp/slice";
+import { loginReset } from "@/store/auth/login/form/slice";
 const allowedRolesManagement = ['admin', 'developer', 'management'];
 
 
@@ -81,11 +83,16 @@ export default function Sidebar(props: SidebarInterface) {
 
     }, [chatHistory]);
 
-    function logoutFunc() {
-        logout();
-        Router.push('/')
+    const logoutFunc = async () => {
+        await logout();
+        dispatch(resetLoginOtpState());
+        dispatch(loginReset());
+        
+        localStorage.removeItem('isLogin');
+        localStorage.removeItem('userProfile');
+        Router.push('/');
     }
-
+      
     const handleScroll = (e: React.UIEvent<HTMLUListElement>) => {
         const bottom = e.currentTarget.scrollHeight - e.currentTarget.scrollTop === e.currentTarget.clientHeight;
         if (bottom && hasMore && !isLoading) {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import type { Metadata } from 'next';
 import '@/styles/globals.css';
 import ReduxProvider from './reduxProvider';
@@ -7,6 +7,7 @@ import IToastNotif from '@/app/utils/toast-notif';
 import ClientWrapper from "./clientWrapper";
 import 'react-tooltip/dist/react-tooltip.css'
 import { ShowInnerComponentProvider } from "./ShowInnerComponentContext";
+import Loading from '@/app/loading';
 
 export const metadata: Metadata = {
     title: 'SafeLLM Wind',
@@ -42,7 +43,7 @@ export default function RootLayout({
                 <meta name="twitter:card" content="summary_large_image" />
                 {/* <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://apis.google.com; object-src 'none';" /> */}
                 <meta name="referrer" content="no-referrer" />
-                <meta http-equiv="X-Content-Type-Options" content="nosniff" />
+                {/* <meta http-equiv="X-Content-Type-Options" content="nosniff" /> */}
                 <meta name="description" content="It is Boilerplate for LLM products" />
                 <meta name="robots" content="index, follow" />
 
@@ -54,7 +55,9 @@ export default function RootLayout({
                     <ReCaptchaProvider reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}>
                         <IToastNotif />
                         <ShowInnerComponentProvider>
-                            <ClientWrapper>{children}</ClientWrapper>
+                            <Suspense fallback={<Loading />}>
+                                <ClientWrapper>{children}</ClientWrapper>
+                            </Suspense>إ
                         </ShowInnerComponentProvider>
                     </ReCaptchaProvider>
                 </ReduxProvider>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,33 +1,22 @@
-'use client'
-import { useEffect, useState } from "react";
+"use client";
 import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
-export default function Home() {
-  const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null);
-  const router = useRouter();
-
-  useEffect(() => {
-    async function checkLoginStatus() {
-      try {
-        const response = await fetch("/api/auth/checkLogin");
-        const data = await response.json();
-
-        if (data.isLogin) {
-          setIsLoggedIn(true);
-          router.push("/chat");
+export default async function Home() {
+    const router = useRouter();
+    
+    useEffect(() => {
+      const checkLogin = async () => {
+        const token = localStorage.getItem('isLogin');
+        if (token) {
+          router.push('/chat');
         } else {
-          setIsLoggedIn(false);
-          router.push("/login");
+          router.push('/login');
         }
-      } catch (error) {
-        console.error("Error checking login status:", error);
-        setIsLoggedIn(false);
-        router.push("/login");
-      }
-    }
-
-    checkLoginStatus();
-  }, []);
-
-  return <>{isLoggedIn === null ? <p>Checking login status...</p> : null}</>;
+      };
+      checkLogin();
+    }, []);
+  
+    return null;
 }
+
diff --git a/src/app/services/getUserProfile.service.ts b/src/app/services/getUserProfile.service.ts
@@ -4,10 +4,9 @@ import { getUserProfileLoading } from "@/store/userProfile/slice";
 function getUserProfileService(reload: boolean) {
     return new Promise(async (resolve, reject) => {
         try {
-            const response = await fetch("/api/auth/checkLogin");
-            const loginData = await response.json();
+            const isLogin = localStorage.getItem('isLogin');
 
-            if (!loginData.isLogin) {
+            if (!isLogin) {
                 reject('User is not logged in');
                 return;
             }
diff --git a/src/app/services/logout.ts b/src/app/services/logout.ts
@@ -6,6 +6,8 @@ export default async function logout() {
 
         await axios.post('/api/remove-tockens'); 
 
+        localStorage.removeItem("isLogin");
+        localStorage.removeItem("userProfile");
         console.log("Logged out successfully");
     } catch (error) {
         console.error("Logout failed", error);
diff --git a/src/store/auth/login/form/slice.ts b/src/store/auth/login/form/slice.ts
@@ -40,6 +40,13 @@ const loginSlice = createSlice({
       state.isDone = false;
       state.hasError = true;
     },
+    loginReset(state) {
+      state.isLoading = false;
+      state.isDone = false;
+      state.hasError = false;
+      state.response = '';
+      state.data= null;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(HYDRATE, (state, action: any) => {
@@ -51,5 +58,5 @@ const loginSlice = createSlice({
   },
 });
 
-export const { loginLoading, loginSuccess, loginFailure } = loginSlice.actions;
+export const { loginLoading, loginSuccess, loginFailure, loginReset} = loginSlice.actions;
 export default loginSlice.reducer;
diff --git a/src/store/auth/login/otp/slice.ts b/src/store/auth/login/otp/slice.ts
diff --git a/src/store/axios.ts b/src/store/axios.ts
diff --git a/src/store/userProfile/interface.ts b/src/store/userProfile/interface.ts

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export async function POST(req: NextRequest) {`
`17`	`17`	`firstName: 'Saghar',`
`18`	`18`	`role: UserRole.Admin,`
`19`	`19`	`lastLogin: new Date(),`
`20`		`- token: 'mockAuthToken',`
	`20`	`+ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6InNhZ2hhciBmYWRhZWkiLCJpYXQiOjE1MTYyMzkwMjJ9.B5SGLT-b7aweYbaUMVD7gjivCQTM9atFeKUlW8Fo2yU',`
`21`	`21`	`refreshToken: 'mockRefreshAuthToken'`
`22`	`22`
`23`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@ export async function POST() {`
`21`	`21`	`secure: true,`
`22`	`22`	`sameSite: 'strict'`
`23`	`23`	`});`
	`24`	`+`
`24`	`25`
`25`	`26`	`return response;`
`26`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@ export default function OtpForm(props: OTPFormProps) {`
`69`	`69`	`className={'ml-2'}`
`70`	`70`	`onComplete={() => setTimerCompleted(true)}`
`71`	`71`	`renderer={counterProps =>`
`72`		`- <div> {counterProps.seconds} : {counterProps.minutes} </div>}/>`
	`72`	`+ <div> {counterProps.minutes} : {counterProps.seconds}</div>}/>`
`73`	`73`	`<span> {' Seconds '} )</span>`
`74`	`74`	`</div>`
`75`	`75`	`}`