From 5f052a38e16bf7191287b1db76d49775a1b1d3cb Mon Sep 17 00:00:00 2001
From: = <=>
Date: Tue, 30 Jul 2024 16:41:19 +0100
Subject: [PATCH] Fix: Hide Login/Signup button when user is authenticated
---
src/app/layout.tsx | 4 +++-
src/components/card/user-card.tsx | 2 ++
src/components/layouts/navbar/index.tsx | 11 ++++++-----
3 files changed, 11 insertions(+), 6 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({
- {children}
+
{children}
diff --git a/src/components/card/user-card.tsx b/src/components/card/user-card.tsx
index d75b65cc1..1d46b02c8 100644
--- a/src/components/card/user-card.tsx
+++ b/src/components/card/user-card.tsx
@@ -1,4 +1,5 @@
import { AnimatePresence, motion } from "framer-motion";
+import { signOut } from "next-auth/react";
import { useEffect, useState } from "react";
import { useUser } from "~/hooks/user/use-user";
@@ -12,6 +13,7 @@ const UserCard = ({ email }: { email: string }) => {
const handleLogout = () => {
updateUser({ email: "", name: "" });
setIsLogout(false);
+ signOut({ callbackUrl: "/" });
};
const handleEscapeClick = (event: KeyboardEvent) => {
diff --git a/src/components/layouts/navbar/index.tsx b/src/components/layouts/navbar/index.tsx
index 91b9c3fdb..a78994c54 100644
--- a/src/components/layouts/navbar/index.tsx
+++ b/src/components/layouts/navbar/index.tsx
@@ -1,18 +1,18 @@
"use client";
+import { useSession } from "next-auth/react";
import Link from "next/link";
import { useEffect, useState } from "react";
import UserCard from "~/components/card/user-card";
import Logo from "~/components/common/logo";
-import { useUser } from "~/hooks/user/use-user";
import { cn } from "~/lib/utils";
import { NAV_LINKS } from "./links";
import MobileNav from "./mobile-navbar";
const Navbar = () => {
const [scrolling, setIsScrolling] = useState(false);
- const { user } = useUser();
+ const { data: session } = useSession();
const handleScrollEvent = () => {
if (window.scrollY > 1) {
@@ -36,7 +36,7 @@ const Navbar = () => {
className={cn(
`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",
- user.email && "justify-between",
+ session?.user?.email && "justify-between",
)}
>
@@ -55,7 +55,9 @@ const Navbar = () => {
);
})}
- {!user.email && (
+ {session?.user?.email ? (
+
+ ) : (
{
)}
- {user.email && }
);