From bee7aec6be8481326fe8b5e9a29649ce1d298a47 Mon Sep 17 00:00:00 2001
From: Anya Zhang <azhang97@ucsc.edu>
Date: Fri, 10 May 2024 23:32:05 -0700
Subject: [PATCH] authorization code, handleLoginSuccess runs
---
app/account/page.tsx | 0
app/loginPage/AuthContext.tsx | 31 +++++++++++++++++++++++++++++++
app/loginPage/page.tsx | 32 +++++++++++++++++++++++---------
components/navbar.tsx | 15 +++++++++++++--
4 files changed, 67 insertions(+), 11 deletions(-)
create mode 100644 app/account/page.tsx
create mode 100644 app/loginPage/AuthContext.tsx
diff --git a/app/account/page.tsx b/app/account/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/loginPage/AuthContext.tsx b/app/loginPage/AuthContext.tsx
new file mode 100644
index 0000000..165b414
--- /dev/null
+++ b/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>
+ );
+};
diff --git a/app/loginPage/page.tsx b/app/loginPage/page.tsx
index cdc66b2..c949d0a 100644
--- a/app/loginPage/page.tsx
+++ b/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;
\ No newline at end of file
diff --git a/components/navbar.tsx b/components/navbar.tsx
index a49d750..0f667b8 100644
--- a/components/navbar.tsx
+++ b/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>