From 51151bc7bd3693998b4055873a50ea33645f24ab Mon Sep 17 00:00:00 2001
From: Jibola Paul <harjibbolar26@gmail.com>
Date: Tue, 30 Jul 2024 14:10:43 +0100
Subject: [PATCH 1/6] fix: auth.config redirect url

---
 src/config/auth.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/config/auth.config.ts b/src/config/auth.config.ts
index 71f7e4b7c..5121d4088 100644
--- a/src/config/auth.config.ts
+++ b/src/config/auth.config.ts
@@ -69,14 +69,14 @@ export default {
       return { ...token, ...response };
     },
     async redirect({ url, baseUrl }) {
-      if (url === "/auth/login") {
+      if (url === "/login") {
         return baseUrl;
       }
       return "/register/organisation";
     },
   },
   pages: {
-    signIn: "/auth/login",
+    signIn: "/login",
   },
   trustHost: true,
 } satisfies NextAuthConfig;

From 64a8730b83f928b7c1c4cd6967f2453398d53e6c Mon Sep 17 00:00:00 2001
From: Jibola Paul <harjibbolar26@gmail.com>
Date: Tue, 30 Jul 2024 18:15:43 +0100
Subject: [PATCH 2/6] fix: navbar popfile iamge

---
 src/components/card/user-card.tsx           |  7 +++--
 src/components/layouts/navbar/index.tsx     | 32 ++++-----------------
 src/components/layouts/rootLayout/index.tsx | 31 ++++++++++++++++++++
 src/config/auth.config.ts                   | 10 ++++---
 src/utils/googleAuth.ts                     | 19 ++++++++++--
 5 files changed, 63 insertions(+), 36 deletions(-)
 create mode 100644 src/components/layouts/rootLayout/index.tsx

diff --git a/src/components/card/user-card.tsx b/src/components/card/user-card.tsx
index 1d46b02c8..0f1d5165c 100644
--- a/src/components/card/user-card.tsx
+++ b/src/components/card/user-card.tsx
@@ -1,3 +1,4 @@
+import { Avatar, AvatarImage } from "@radix-ui/react-avatar";
 import { AnimatePresence, motion } from "framer-motion";
 import { signOut } from "next-auth/react";
 import { useEffect, useState } from "react";
@@ -6,7 +7,7 @@ import { useUser } from "~/hooks/user/use-user";
 import { cn } from "~/lib/utils";
 import { Button } from "../ui/button";
 
-const UserCard = ({ email }: { email: string }) => {
+const UserCard = ({ image }: { image: string | undefined }) => {
   const { updateUser } = useUser();
   const [isLogout, setIsLogout] = useState(false);
 
@@ -39,7 +40,9 @@ const UserCard = ({ email }: { email: string }) => {
           "grid size-9 place-items-center rounded-full bg-orange-500 text-xl font-medium text-white sm:text-2xl sm:font-bold",
         )}
       >
-        {email[0]}
+        <Avatar className="rounded-full">
+          <AvatarImage src={image} className="rounded-full" />
+        </Avatar>
       </Button>
       <AnimatePresence>
         {isLogout && (
diff --git a/src/components/layouts/navbar/index.tsx b/src/components/layouts/navbar/index.tsx
index a78994c54..3d3c42a8a 100644
--- a/src/components/layouts/navbar/index.tsx
+++ b/src/components/layouts/navbar/index.tsx
@@ -7,11 +7,11 @@ import { useEffect, useState } from "react";
 import UserCard from "~/components/card/user-card";
 import Logo from "~/components/common/logo";
 import { cn } from "~/lib/utils";
-import { NAV_LINKS } from "./links";
 import MobileNav from "./mobile-navbar";
 
 const Navbar = () => {
   const [scrolling, setIsScrolling] = useState<boolean>(false);
+
   const { data: session } = useSession();
 
   const handleScrollEvent = () => {
@@ -37,40 +37,18 @@ const Navbar = () => {
           `relative mx-auto flex w-full max-w-[1200px] items-center gap-x-4 transition-all duration-500 md:justify-between`,
           scrolling ? "py-2" : "py-4 md:py-9",
           session?.user?.email && "justify-between",
+          // user.email && "justify-between",
+          session?.user?.email && "justify-between",
         )}
       >
         <MobileNav />
 
         <Logo />
-        <div className="hidden w-full items-center justify-center gap-x-4 md:flex lg:gap-x-8 xl:gap-x-16">
-          {NAV_LINKS.map((item, index) => {
-            return (
-              <Link
-                key={index}
-                href={item.link}
-                className="p-3 text-[16px] font-medium text-neutral-dark-1 transition-all duration-300 hover:text-primary"
-              >
-                {item.route}
-              </Link>
-            );
-          })}
-        </div>
         {session?.user?.email ? (
-          <UserCard email={session?.user?.email} />
+          <UserCard image={session?.user?.image as string } />
         ) : (
           <div className="w-fullx hidden items-center justify-end gap-x-4 justify-self-end md:flex lg:gap-x-8">
-            <Link
-              href="/login"
-              className="grid h-[44px] place-items-center whitespace-nowrap rounded-md border border-primary px-4 text-primary lg:px-8"
-            >
-              Log in
-            </Link>
-            <Link
-              href="/register"
-              className="grid h-[44px] place-items-center whitespace-nowrap rounded-md border border-primary bg-primary px-4 text-white lg:px-8"
-            >
-              Get Started
-            </Link>
+            <Link href="/login"></Link>
           </div>
         )}
       </div>
diff --git a/src/components/layouts/rootLayout/index.tsx b/src/components/layouts/rootLayout/index.tsx
new file mode 100644
index 000000000..b2f440ae6
--- /dev/null
+++ b/src/components/layouts/rootLayout/index.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+import { Suspense } from "react";
+
+import Footer from "~/components/layouts/footer";
+import Navbar from "~/components/layouts/navbar";
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      <div className="mx-auto w-5/6">
+        <Suspense>{children}</Suspense>
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <SessionProvider>
+      <Layout>{children}</Layout>
+    </SessionProvider>
+  );
+}
diff --git a/src/config/auth.config.ts b/src/config/auth.config.ts
index 5121d4088..3d354fb49 100644
--- a/src/config/auth.config.ts
+++ b/src/config/auth.config.ts
@@ -59,14 +59,16 @@ export default {
       return false;
     },
     async jwt({ token, user, account }) {
-      if (account && account.provider !== "google") {
-        return { ...token, ...user };
-      }
       const response: ApiResponse = (await googleAuth(
         account as Profile,
       )) as ApiResponse;
+      if (account && account.provider !== "google") {
+        return { ...token, ...response.data };
+      }
+      /* eslint-disable-next-line no-console */
+      console.log("Google Auth Response:", response.data);
 
-      return { ...token, ...response };
+      return { ...token, ...user };
     },
     async redirect({ url, baseUrl }) {
       if (url === "/login") {
diff --git a/src/utils/googleAuth.ts b/src/utils/googleAuth.ts
index 2b0cd0817..24a0d335d 100644
--- a/src/utils/googleAuth.ts
+++ b/src/utils/googleAuth.ts
@@ -22,11 +22,24 @@ const googleAuth = async (profile: Profile) => {
       id_token: profile.id_token,
     });
 
+    return response?.data;
+  } catch (error) {
     return {
-      response,
+      status: "error " + error,
+      status_code: 500,
+      message: "Google authentication failed",
+      data: {
+        id_token: "",
+        user: {
+          id: "",
+          email: "",
+          fullname: "",
+          avatar_url: "",
+          expires_in: "",
+          role: "",
+        },
+      },
     };
-  } catch (error) {
-    return error;
   }
 };
 

From b7e14d850ef0fdd0e6753eede6295f9bbc9c325d Mon Sep 17 00:00:00 2001
From: Jibola Paul <harjibbolar26@gmail.com>
Date: Tue, 30 Jul 2024 18:16:43 +0100
Subject: [PATCH 3/6] fix: eslint error

---
 src/components/layouts/navbar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layouts/navbar/index.tsx b/src/components/layouts/navbar/index.tsx
index 3d3c42a8a..94848b35d 100644
--- a/src/components/layouts/navbar/index.tsx
+++ b/src/components/layouts/navbar/index.tsx
@@ -45,7 +45,7 @@ const Navbar = () => {
 
         <Logo />
         {session?.user?.email ? (
-          <UserCard image={session?.user?.image as string } />
+          <UserCard image={session?.user?.image as string} />
         ) : (
           <div className="w-fullx hidden items-center justify-end gap-x-4 justify-self-end md:flex lg:gap-x-8">
             <Link href="/login"></Link>

From b30c3bcf27c9ec132455bd7e3a502718968a5e06 Mon Sep 17 00:00:00 2001
From: Jibola Paul <harjibbolar26@gmail.com>
Date: Tue, 30 Jul 2024 19:17:47 +0100
Subject: [PATCH 4/6] fix: mobile responsiveness for authenticated user with
 profile iamge

---
 src/components/layouts/navbar/index.tsx       | 33 +++++++++--
 .../layouts/navbar/mobile-navbar.tsx          | 57 +++++++++++--------
 2 files changed, 61 insertions(+), 29 deletions(-)

diff --git a/src/components/layouts/navbar/index.tsx b/src/components/layouts/navbar/index.tsx
index 94848b35d..ff1d2f4d0 100644
--- a/src/components/layouts/navbar/index.tsx
+++ b/src/components/layouts/navbar/index.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import UserCard from "~/components/card/user-card";
 import Logo from "~/components/common/logo";
 import { cn } from "~/lib/utils";
+import { NAV_LINKS } from "./links";
 import MobileNav from "./mobile-navbar";
 
 const Navbar = () => {
@@ -37,18 +38,42 @@ const Navbar = () => {
           `relative mx-auto flex w-full max-w-[1200px] items-center gap-x-4 transition-all duration-500 md:justify-between`,
           scrolling ? "py-2" : "py-4 md:py-9",
           session?.user?.email && "justify-between",
-          // user.email && "justify-between",
-          session?.user?.email && "justify-between",
         )}
       >
         <MobileNav />
 
         <Logo />
+        <div className="hidden w-full items-center justify-center gap-x-4 md:flex lg:gap-x-8 xl:gap-x-16">
+          {NAV_LINKS.map((item, index) => {
+            return (
+              <Link
+                key={index}
+                href={item.link}
+                className="p-3 text-[16px] font-medium text-neutral-dark-1 transition-all duration-300 hover:text-primary"
+              >
+                {item.route}
+              </Link>
+            );
+          })}
+        </div>
         {session?.user?.email ? (
-          <UserCard image={session?.user?.image as string} />
+          <div className="hidden md:flex">
+            <UserCard image={session?.user?.image as string} />
+          </div>
         ) : (
           <div className="w-fullx hidden items-center justify-end gap-x-4 justify-self-end md:flex lg:gap-x-8">
-            <Link href="/login"></Link>
+            <Link
+              href="/login"
+              className="grid h-[44px] place-items-center whitespace-nowrap rounded-md border border-primary px-4 text-primary lg:px-8"
+            >
+              Log in
+            </Link>
+            <Link
+              href="/register"
+              className="grid h-[44px] place-items-center whitespace-nowrap rounded-md border border-primary bg-primary px-4 text-white lg:px-8"
+            >
+              Get Started
+            </Link>
           </div>
         )}
       </div>
diff --git a/src/components/layouts/navbar/mobile-navbar.tsx b/src/components/layouts/navbar/mobile-navbar.tsx
index 085eb7be0..5576723b9 100644
--- a/src/components/layouts/navbar/mobile-navbar.tsx
+++ b/src/components/layouts/navbar/mobile-navbar.tsx
@@ -2,17 +2,19 @@
 import "./menu.css";
 
 import { motion, stagger, useAnimate } from "framer-motion";
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
-import { useUser } from "~/hooks/user/use-user";
+import UserCard from "~/components/card/user-card";
+// import { useUser } from "~/hooks/user/use-user";
 import { cn } from "~/lib/utils";
 import { NAV_LINKS } from "./links";
 
 export default function MobileNav() {
   const [open, setOpen] = useState(false);
   const [scope, animate] = useAnimate();
-  const { user } = useUser();
+  const { data: session } = useSession();
 
   // the stagger effect
   const staggerList = stagger(0.1, { startDelay: 0.25 });
@@ -25,7 +27,7 @@ export default function MobileNav() {
       "ul",
       {
         width: open ? 180 : 0,
-        height: open && user.email ? 140 : open ? 250 : 0,
+        height: open && session?.user?.email ? 200 : open ? 250 : 0,
         opacity: open ? 1 : 0,
       },
       {
@@ -103,29 +105,34 @@ export default function MobileNav() {
               </Link>
             </motion.li>
           ))}
-          <motion.li key={NAV_LINKS.length + 1}>
-            <Link
-              href="/login"
-              className={cn(
-                "grid max-w-[100px] place-items-center whitespace-nowrap rounded-md border border-primary px-2 py-2 text-sm text-primary",
-                user?.email ? "hidden" : "",
-              )}
-            >
-              Log in
-            </Link>
-          </motion.li>
 
-          <motion.li key={NAV_LINKS.length + 2}>
-            <Link
-              href="/register"
-              className={cn(
-                "grid max-w-[100px] place-items-center whitespace-nowrap rounded-md border border-primary bg-primary px-2 py-2 text-sm text-white",
-                user?.email ? "hidden" : "",
-              )}
-            >
-              Get Started
-            </Link>
-          </motion.li>
+          {!session?.user?.email && (
+            <>
+              <motion.li key={NAV_LINKS.length + 1}>
+                <Link
+                  href="/login"
+                  className="grid max-w-[100px] place-items-center whitespace-nowrap rounded-md border border-primary px-2 py-2 text-sm text-primary"
+                >
+                  Log in
+                </Link>
+              </motion.li>
+
+              <motion.li key={NAV_LINKS.length + 2}>
+                <Link
+                  href="/register"
+                  className="grid max-w-[100px] place-items-center whitespace-nowrap rounded-md border border-primary bg-primary px-2 py-2 text-sm text-white"
+                >
+                  Get Started
+                </Link>
+              </motion.li>
+            </>
+          )}
+
+          {session?.user?.email && (
+            <motion.li key={NAV_LINKS.length + 3}>
+              <UserCard image={session.user.image as string} />
+            </motion.li>
+          )}
         </ul>
       </div>
     </>

From dbb5bd11cd5582c1b0f693a8b8898db607069b4c Mon Sep 17 00:00:00 2001
From: Jibola Paul <harjibbolar26@gmail.com>
Date: Tue, 30 Jul 2024 20:05:44 +0100
Subject: [PATCH 5/6] fix eslint error

---
 src/app/layout.tsx                      | 4 +++-
 src/components/layouts/navbar/index.tsx | 3 +--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 38fe4626a..3c252bb27 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,8 @@ import { Inter } from "next/font/google";
 
 import "./globals.css";
 
+import { SessionProvider } from "next-auth/react";
+
 import Providers from "~/components/providers";
 import { Toaster } from "~/components/ui/toaster";
 
@@ -22,7 +24,7 @@ export default function RootLayout({
       <body className={inter.className}>
         <div className="mx-auto w-full">
           <Providers />
-          {children}
+          <SessionProvider>{children}</SessionProvider>
           <Toaster />
         </div>
       </body>
diff --git a/src/components/layouts/navbar/index.tsx b/src/components/layouts/navbar/index.tsx
index f9fbafc49..e1f51c2d0 100644
--- a/src/components/layouts/navbar/index.tsx
+++ b/src/components/layouts/navbar/index.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
@@ -62,7 +63,6 @@ const Navbar = () => {
             <UserCard image={session?.user?.image as string} />
           </div>
         ) : (
-        {!user.email && (
           <div className="w-fullx hidden items-center justify-end gap-x-4 justify-self-end md:flex lg:gap-x-8">
             <Link
               href="/login"
@@ -78,7 +78,6 @@ const Navbar = () => {
             </Link>
           </div>
         )}
-        {user.email && <UserCard email={user.email} />}
       </div>
     </nav>
   );

From a2ed41943fd1304a00a1dfcd3bc4f4147ab381e6 Mon Sep 17 00:00:00 2001
From: Jibola Paul <harjibbolar26@gmail.com>
Date: Wed, 31 Jul 2024 00:49:33 +0100
Subject: [PATCH 6/6] fix: remove comment

---
 src/components/layouts/navbar/mobile-navbar.tsx | 5 -----
 src/config/auth.config.ts                       | 2 --
 2 files changed, 7 deletions(-)

diff --git a/src/components/layouts/navbar/mobile-navbar.tsx b/src/components/layouts/navbar/mobile-navbar.tsx
index 5576723b9..d9c76ac65 100644
--- a/src/components/layouts/navbar/mobile-navbar.tsx
+++ b/src/components/layouts/navbar/mobile-navbar.tsx
@@ -7,7 +7,6 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 
 import UserCard from "~/components/card/user-card";
-// import { useUser } from "~/hooks/user/use-user";
 import { cn } from "~/lib/utils";
 import { NAV_LINKS } from "./links";
 
@@ -16,12 +15,8 @@ export default function MobileNav() {
   const [scope, animate] = useAnimate();
   const { data: session } = useSession();
 
-  // the stagger effect
   const staggerList = stagger(0.1, { startDelay: 0.25 });
 
-  // create the animations that will be applied
-  // whenever the open state is toggled
-
   useEffect(() => {
     animate(
       "ul",
diff --git a/src/config/auth.config.ts b/src/config/auth.config.ts
index 3d354fb49..44b26a17c 100644
--- a/src/config/auth.config.ts
+++ b/src/config/auth.config.ts
@@ -65,8 +65,6 @@ export default {
       if (account && account.provider !== "google") {
         return { ...token, ...response.data };
       }
-      /* eslint-disable-next-line no-console */
-      console.log("Google Auth Response:", response.data);
 
       return { ...token, ...user };
     },