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
@@ -43,22 +47,27 @@ 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} />}
-					/>
-					<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} />}
+						/>
+						<Route
+							path="/manage-list"
+							element={
+								<ManageList listPath={listPath} user={user} data={data} />
+							}
+						/>
+					</Route>
 				</Route>
+				<Route element={<Login user={user} />} path="/login" />
 			</Routes>
 		</Router>
 	);

src/utils/ProtectedRoutes.jsx

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

src/views/Login.jsx

@@ -0,0 +1,30 @@
+import { SignInButton, SignOutButton } from '../api/useAuth';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function Login({ user }) {
+	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-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>
+				<div className="flex justify-center items-center h-2/4">
+					<div className="bg-pink-400 w-2/4 rounded text-center">
+						<SignInButton />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default Login;