Merge pull request #39 from the-collab-lab/jo-home-page

Protect routes and create welcome page

src/App.jsx

@@ -6,6 +6,10 @@ import { useAuth, useShoppingListData, useShoppingLists } from './api';
 
 import { useStateWithStorage } from './utils';
 
+import ProtectedRoutes from './utils/ProtectedRoutes';
+
+import Login from './views/Login';
+
 export function App() {
 	/**
 	 * This custom hook takes the path of a shopping list
@@ -45,24 +49,29 @@ export function App() {
 	return (
 		<Router>
 			<Routes>
-				<Route path="/" element={<Layout />}>
-					<Route
-						index
-						element={
-							<Home user={user} data={lists} setListPath={setListPath} />
-						}
-					/>
-					<Route
-						path="/list"
-						element={
-							<List data={data} listPath={listPath} listName={listName} />
-						}
-					/>
-					<Route
-						path="/manage-list"
-						element={<ManageList listPath={listPath} user={user} data={data} />}
-					/>
+				<Route element={<ProtectedRoutes user={user} />}>
+					<Route path="/" element={<Layout />}>
+						<Route
+							index
+							element={
+								<Home user={user} data={lists} setListPath={setListPath} />
+							}
+						/>
+						<Route
+							path="/list"
+							element={
+								<List data={data} listPath={listPath} listName={listName} />
+							}
+						/>
+						<Route
+							path="/manage-list"
+							element={
+								<ManageList listPath={listPath} user={user} data={data} />
+							}
+						/>
+					</Route>
 				</Route>
+				<Route element={<Login user={user} />} path="/login" />
 			</Routes>
 		</Router>
 	);

src/api/useAuth.jsx

@@ -33,16 +33,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

@@ -0,0 +1,9 @@
+import { Outlet, Navigate } from 'react-router-dom';
+import { useAuth } from '../api/useAuth';
+
+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

@@ -0,0 +1,33 @@
+import { useAuth } from '../api/useAuth';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function Login() {
+	const { user, signIn } = useAuth();
+	const navigate = useNavigate();
+
+	useEffect(() => {
+		if (user) {
+			navigate('/');
+		}
+	}, [user]);
+
+	return (
+		<div className="flex justify-center items-center h-screen">
+			<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/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>
+		</div>
+	);
+}
+
+export default Login;