Protected routes

src/App.jsx

@@ -1,11 +1,26 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import {
+	BrowserRouter as Router,
+	Routes,
+	Route,
+	Navigate,
+} from 'react-router-dom';
 
 import { Home, Layout, List, ManageList, About } from './views';
 
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
 
 import { useStateWithStorage } from './utils';
 
+function PrivateRoute({ children }) {
+	const { user, loading } = useAuth();
+
+	if (loading) {
+		return <div>Loading...</div>;
+	}
+
+	return user ? children : <Navigate to="/" />;
+}
+
 export function App() {
 	const [listPath, setListPath] = useStateWithStorage(
 		'tcl-shopping-list-path',
@@ -38,12 +53,18 @@ export function App() {
 					<Route path="/about" element={<About />} />
 					<Route
 						path="/list"
-						element={<List data={data} lists={lists} listPath={listPath} />}
+						element={
+							<PrivateRoute>
+								<List data={data} lists={lists} listPath={listPath} />
+							</PrivateRoute>
+						}
 					/>
 					<Route
 						path="/manage-list"
 						element={
-							<ManageList listPath={listPath} userId={userId} data={data} />
+							<PrivateRoute>
+								<ManageList listPath={listPath} userId={userId} data={data} />
+							</PrivateRoute>
 						}
 					/>
 				</Route>

src/api/useAuth.jsx

@@ -29,15 +29,19 @@ export const SignOutButton = () => (
  */
 export const useAuth = () => {
 	const [user, setUser] = useState(null);
+	const [loading, setLoading] = useState(true);
 
 	useEffect(() => {
-		auth.onAuthStateChanged((user) => {
+		const unsubscribe = auth.onAuthStateChanged((user) => {
 			setUser(user);
+			setLoading(false);
 			if (user) {
 				addUserToDatabase(user);
 			}
 		});
+
+		return () => unsubscribe();
 	}, []);
 
-	return { user };
+	return { user, loading };
 };

src/views/About.jsx

@@ -37,7 +37,7 @@ export function About() {
 					</li>
 					<li>
 						Share your list with friends, family, colleagues or whomever you
-						wish.
+						wish
 					</li>
 				</ol>
 			</section>