Supbase install

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.49.1",
     "@tailwindcss/vite": "^4.0.9",
     "axios": "^1.8.1",
     "firebase": "^11.3.1",

src/App.tsx

@@ -1,37 +1,31 @@
 import { useContext } from 'react';
 import { BrowserRouter as Router, Route, Routes,  } from 'react-router-dom';
 import NavBar from './components/Navbar';
-
-import { UserContext } from './UserContext';
+import Register from './pages/Register';
+import Login from "./pages/Login";
+import PrivateRoute from "./components/PrivateRoute";
 
 function App() {
-  const userContext = useContext(UserContext);
-  if (!userContext) {
-    return <div>Error: UserContext is not provided</div>;
-  }
-  const { user, login, logout } = userContext;
+
+  // const { user, login, logout } = userContext;
 
   return (
   <div>
-    <Router>
-      <div>
-      <NavBar />  
-      </div>
-      {/* <div>
-        {user ? (
-          <div>
-            <p>Welcome, {user.name}</p>
-            <button onClick={logout}>Logout</button>
-          </div>
-        ) : (
-          <button onClick={login}>
-            Login with Google
-          </button>
-        )}
-      </div> */}
-    </Router>
+   <Router>
+      <Routes>
+        <Route path="/" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        <Route
+          path="/Home"
+          element={
+            <PrivateRoute>
+              <NavBar />
+            </PrivateRoute>
+          }
+        />
 
-
+      </Routes>
+    </Router>
     </div>
   );
 }

src/UserContext.tsx

@@ -1,60 +1,60 @@
-import { createContext, useState, useEffect, ReactNode } from 'react';
-import { signInWithGoogle, signOutFromGoogle } from './firebaseConfig';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-}
-
-interface UserContextType {
-  user: User | null;
-  login: () => void;
-  logout: () => void;
-}
-
-const UserContext = createContext<UserContextType | undefined>(undefined);
-
-const UserProvider = ({ children }: { children: ReactNode }) => {
-  const [user, setUser] = useState<User | null>(null);
-
-  useEffect(() => {
-    const storedUser = localStorage.getItem('user');
-    if (storedUser) {
-      setUser(JSON.parse(storedUser));
-    }
-  }, []);
-
-  const login = async () => {
-    try {
-      const result = await signInWithGoogle();
-      const userData = {
-        id: result.user.uid,
-        name: result.user.displayName || '',
-        email: result.user.email || ''
-      };
-      setUser(userData);
-      localStorage.setItem('user', JSON.stringify(userData));
-    } catch (error) {
-      console.error('Error logging in with Google:', error);
-    }
-  };
-
-  const logout = async () => {
-    try {
-      await signOutFromGoogle();
-      setUser(null);
-      localStorage.removeItem('user');
-    } catch (error) {
-      console.error('Error logging out:', error);
-    }
-  };
-
-  return (
-    <UserContext.Provider value={{ user, login, logout }}>
-      {children}
-    </UserContext.Provider>
-  );
-};
-
-export { UserContext, UserProvider };
+// import { createContext, useState, useEffect, ReactNode } from 'react';
+
+
+// interface User {
+//   id: string;
+//   name: string;
+//   email: string;
+// }
+
+// interface UserContextType {
+//   user: User | null;
+//   login: () => void;
+//   logout: () => void;
+// }
+
+// const UserContext = createContext<UserContextType | undefined>(undefined);
+
+// const UserProvider = ({ children }: { children: ReactNode }) => {
+//   const [user, setUser] = useState<User | null>(null);
+
+//   useEffect(() => {
+//     const storedUser = localStorage.getItem('user');
+//     if (storedUser) {
+//       setUser(JSON.parse(storedUser));
+//     }
+//   }, []);
+
+//   const login = async () => {
+//     try {
+//       const result = await signInWithGoogle();
+//       const userData = {
+//         id: result.user.uid,
+//         name: result.user.displayName || '',
+//         email: result.user.email || ''
+//       };
+//       setUser(userData);
+//       localStorage.setItem('user', JSON.stringify(userData));
+//     } catch (error) {
+//       console.error('Error logging in with Google:', error);
+//     }
+//   };
+
+//   const logout = async () => {
+//     try {
+//       await signOutFromGoogle();
+//       setUser(null);
+//       localStorage.removeItem('user');
+//     } catch (error) {
+//       console.error('Error logging out:', error);
+//     }
+//   };
+
+//   return (
+//     <UserContext.Provider value={{ user, login, logout }}>
+//       {children}
+//     </UserContext.Provider>
+//   );
+// };
+
+// export { UserContext, UserProvider };