Fixed: styling and refresh issue

src/api/useAuth.jsx

@@ -32,16 +32,33 @@ export const SignOutButton = () => (
  * @see https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data
  */
 export const useAuth = () => {
-	const [user, setUser] = useState(null);
+	const [user, setUser] = useState(() => {
+		const storedUser = localStorage.getItem('user');
+		return storedUser ? JSON.parse(storedUser) : null;
+	});
 
 	useEffect(() => {
-		auth.onAuthStateChanged((user) => {
-			setUser(user);
+		const unsubscribe = auth.onAuthStateChanged((user) => {
 			if (user) {
+				setUser(user);
+				localStorage.setItem('user', JSON.stringify(user));
 				addUserToDatabase(user);
+			} else {
+				setUser(null);
+				localStorage.removeItem('user');
 			}
 		});
+		return () => unsubscribe();
 	}, []);
 
-	return { user };
+	const signIn = async () => {
+		await signInWithPopup(auth, new GoogleAuthProvider());
+	};
+
+	const signOut = async () => {
+		await auth.signOut();
+		localStorage.removeItem('user');
+	};
+
+	return { user, signIn, signOut };
 };

src/utils/ProtectedRoutes.jsx

@@ -1,6 +1,9 @@
 import { Outlet, Navigate } from 'react-router-dom';
+import { useAuth } from '../api/useAuth';
 
-const ProtectedRoutes = ({ user }) => {
-	return user ? <Outlet /> : <Navigate to="/login" />; // Redirect to login if not authenticated
+const ProtectedRoutes = ({}) => {
+	const { user } = useAuth();
+	const isAuthenticated = user || localStorage.getItem('user');
+	return isAuthenticated ? <Outlet /> : <Navigate to="/login" />; // Redirect to login if not authenticated
 };
 export default ProtectedRoutes;

src/views/Login.jsx

@@ -1,8 +1,9 @@
-import { SignInButton, SignOutButton } from '../api/useAuth';
+import { useAuth } from '../api/useAuth';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-function Login({ user }) {
+function Login() {
+	const { user, signIn } = useAuth();
 	const navigate = useNavigate();
 
 	useEffect(() => {
@@ -13,13 +14,15 @@ function Login({ user }) {
 
 	return (
 		<div className="flex justify-center items-center h-screen">
-			<div className="bg-black text-white rounded-lg h-2/4 w-5/12">
-				<div className="flex justify-center items-center h-2/4">
-					<img src="grocerease.png" alt="Shopping app logo" />
+			<div className="bg-black text-white rounded-xl w-11/12 max-w-lg p-8 shadow-xl">
+				<div className="flex justify-center items-center mb-6">
+					<img src="grocerease-light.png" alt="Shopping app logo" />
 				</div>
-				<div className="flex justify-center items-center h-2/4">
-					<div className="bg-pink-400 w-2/4 rounded text-center">
-						<SignInButton />
+				<div className="flex justify-center items-center h-2/5">
+					<div className="flex justify-center items-center bg-pink-500 hover:bg-pink-500 hover:bg-opacity-80 w-2/4 h-1/4 rounded-xl p-2">
+						<button type="button" onClick={signIn}>
+							Sign In
+						</button>
 					</div>
 				</div>
 			</div>