add updated code (#642)

Author: jeromehardaway

src/pages/login.tsx

@@ -20,44 +20,34 @@ type PageWithLayout = NextPage<LoginProps> & {
 
 const Login: PageWithLayout = () => {
     const mounted = useMount();
-    const { status } = useSession();
+    const { status, data: session } = useSession();
     const router = useRouter();
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
     const [isRedirecting, setIsRedirecting] = useState(false);
 
-    // Handle authenticated state with proper return type
-    useEffect((): (() => void) => {
-        const cleanup = (): void => undefined;
-
-        if (status === "authenticated" && !isRedirecting) {
+    useEffect(() => {
+        if (status === "authenticated" && session && !isRedirecting) {
             setIsRedirecting(true);
-            const timeout = setTimeout(() => {
-                router.push("/profile").catch(() => {
-                    setErrorMessage("Failed to redirect to profile. Please try refreshing the page.");
-                    setIsRedirecting(false);
-                });
-            }, 100);
-
-            return () => {
-                clearTimeout(timeout);
-            };
+            router.replace("/profile").catch((error) => {
+                console.error("Redirect error:", error);
+                setErrorMessage("Failed to redirect to profile. Please try refreshing the page.");
+                setIsRedirecting(false);
+            });
         }
-
-        return cleanup;
-    }, [status, router, isRedirecting]);
+    }, [status, session, router, isRedirecting]);
 
     const handleSignIn = useCallback(async () => {
         try {
             setErrorMessage(null);
             const result = await signIn("github", {
-                callbackUrl: "/profile",
-                redirect: true,
+                redirect: false,
             });
-            
+
             if (result?.error) {
                 setErrorMessage("Failed to sign in with GitHub. Please try again.");
             }
-        } catch {
+        } catch (error) {
+            console.error("Sign in error:", error);
             setErrorMessage("An unexpected error occurred. Please try again.");
         }
     }, []);
@@ -142,4 +132,4 @@ export const getStaticProps: GetStaticProps<LoginProps> = () => ({
     },
 });
 
-export default Login;
+export default Login;

src/pages/profile.tsx

@@ -6,37 +6,57 @@ import Layout01 from "@layout/layout-01";
 import Breadcrumb from "@components/breadcrumb";
 import ProfileBio from "@containers/profile/bio";
 import Spinner from "@ui/spinner";
-import { useUser } from "@contexts/user-context";
+import { useSession, signOut } from "next-auth/react";
 import { useMount } from "@hooks";
 
-type PageProps = NextPage & {
-    Layout: typeof Layout01;
+type PageProps = {
+    layout?: {
+        headerShadow: boolean;
+        headerFluid: boolean;
+        footerMode: string;
+    };
+};
+
+type PageWithLayout = NextPage<PageProps> & {
+    Layout?: typeof Layout01;
 };
 
-const Profile: PageProps = () => {
+const Profile: PageWithLayout = () => {
     const mounted = useMount();
-    const { isLoggedIn, logout } = useUser();
+    const { data: session, status } = useSession();
     const router = useRouter();
 
     useEffect(() => {
-        if (!isLoggedIn) {
-            void router.push("/login");
+        if (status === "unauthenticated") {
+            router.replace("/login").catch((error) => {
+                console.error("Redirect error:", error);
+            });
         }
-    }, [isLoggedIn, router]);
+    }, [status, router]);
 
-    if (!mounted) return null;
+    if (!mounted || status === "loading") {
+        return (
+            <div className="tw-fixed tw-bg-white tw-top-0 tw-z-50 tw-w-screen tw-h-screen tw-flex tw-justify-center tw-items-center">
+                <Spinner />
+            </div>
+        );
+    }
 
-    if (!isLoggedIn) {
+    if (!session) {
         return (
-            <div className="tw-fixed tw-bg-light-100 tw-top-0 tw-z-50 tw-w-screen tw-h-screen tw-flex tw-justify-center tw-items-center">
+            <div className="tw-fixed tw-bg-white tw-top-0 tw-z-50 tw-w-screen tw-h-screen tw-flex tw-justify-center tw-items-center">
                 <Spinner />
             </div>
         );
     }
 
-    const handleLogout = () => {
-        logout();
-        void router.push("/login");
+    const handleLogout = async () => {
+        try {
+            await signOut({ redirect: false });
+            await router.replace("/login");
+        } catch (error) {
+            console.error("Logout error:", error);
+        }
     };
 
     return (
@@ -63,7 +83,7 @@ const Profile: PageProps = () => {
 
 Profile.Layout = Layout01;
 
-export const getStaticProps: GetStaticProps = () => {
+export const getStaticProps: GetStaticProps<PageProps> = () => {
     return {
         props: {
             layout: {