authorization code, handleLoginSuccess runs

app/loginPage/AuthContext.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, useState, ReactNode } from 'react';
+
+interface AuthContextType {
+  isLoggedIn: boolean;
+  login: () => void;
+  logout: () => void;
+}
+
+export const AuthContext = createContext<AuthContextType>({
+  isLoggedIn: false,
+  login: () => {},
+  logout: () => {},
+});
+
+export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  const login = () => {
+    setIsLoggedIn(true);
+  };
+
+  const logout = () => {
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

app/loginPage/page.tsx

@@ -1,8 +1,12 @@
 "use client";
-import { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { GoogleOAuthProvider, useGoogleLogin, googleLogout, TokenResponse} from "@react-oauth/google";
 import { jwtDecode } from "jwt-decode";
 import axios from "axios";
+import { AuthContext } from './AuthContext'; // Import AuthContext
+
+
+
 
 interface User {
   name: string;
@@ -17,15 +21,19 @@ const LoginPage = () => {
   )
 }
 
+
 const LoginComponent = () => {
   const [user, setUser] = useState<User | null>(null);
-
+  const { login, logout } = useContext(AuthContext); // Access login and logout functions from AuthContext
+
+
 
 
   useEffect(() => {
     console.log("LoginPage component mounted");
   }, []);
 
+
   const handleLoginSuccess = (tokenResponse: any) => {
     if ('code' in tokenResponse) {
       // Handle authorization code flow
@@ -46,37 +54,43 @@ const LoginComponent = () => {
         .catch(err => console.error('Backend login failed', err));
     }
 
+
   };
-  const login = useGoogleLogin({
+  const handleLogin = useGoogleLogin({
     flow: "auth-code",
-
-    onSuccess: (tokenResponse) => handleLoginSuccess,
+
+    onSuccess: (tokenResponse) => {
+      handleLoginSuccess(tokenResponse);
+      login(); // Call the login function from AuthContext
+      console.log('Logged in successfully');
+    },
     onError: (errorResponse) => console.error('Login Failed', errorResponse),
   });
   const handleLogout = () => {
     googleLogout();
     setUser(null);  // Clears the user state, effectively logging out the user
+    logout(); // Call the logout function from AuthContext
     console.log('Logged out successfully');
   };
   return (
     <div>
-      <button onClick={() => login()} className="hover:underline decoration-yellow-400 underline-offset-8 m-5 p-2 text-[#003C6C] font-medium text-xl">
+      <button onClick={() => handleLogin()} className="hover:underline decoration-yellow-400 underline-offset-8 m-5 p-2 text-[#003C6C] font-medium text-xl">
         Login with Google
       </button>
       {user && (
         <div>
           <img src={user.picture} alt="User profile" />
           <h2>Welcome, {user.name} - {user.email}</h2>
-          
+
         </div>
       )}
       <button onClick={handleLogout} className="hover:underline decoration-yellow-400 underline-offset-8 top-0 right-0 m-5 p-2 text-[#003C6C] font-medium text-xl">
             Logout
       </button>
     </div>
-    
+
   );
 };
 
-export default LoginPage;
 
+export default LoginPage;

components/navbar.tsx

@@ -1,6 +1,10 @@
 "use client";
+import React, { useContext } from 'react';
+import { AuthContext } from '../app/loginPage/AuthContext'; // Import AuthContext
+
 
 export default function Navbar({ height }: { height: string }) {
+    const { isLoggedIn } = useContext(AuthContext); // Access isLoggedIn state from AuthContext
     return (
         <nav className="bg-white fixed w-full  top-0 start-0  ">
             <div className="max-w-screen flex flex-wrap items-center justify-between mx-auto p-2.5">
@@ -10,6 +14,7 @@ export default function Navbar({ height }: { height: string }) {
                     </span>
                 </a>
 
+
                 <div className="" id="navbar-sticky">
                     <ul className="flex flex-col  md:p-0  md:flex-row md:border-0 font-medium text-2xl  pl-10  text-[#003C6C]">
                         <li>
@@ -25,9 +30,15 @@ export default function Navbar({ height }: { height: string }) {
                             </a>
                         </li>
                         <li>
-                            <a href="#" className="pl-4 pr-5">
-                                Account
+                          {isLoggedIn ? (
+                            <a href="/account" className="pl-4 pr-5">
+                              Account
+                            </a>
+                          ) : (
+                            <a href="/loginPage" className="pl-4 pr-5">
+                              Account
                             </a>
+                          )}
                             {/* pr-X dicates how far off right we want.  */}
                         </li>
                         <li>