remove local storage path after sign out

src/api/useAuth.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { auth } from './config.js';
 import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 import { addUserToDatabase } from './firebase.js';
+import { useStateWithStorage } from '../utils/hooks.js';
 
 /**
  * A button that signs the user in using Google OAuth. When clicked,
@@ -24,7 +25,11 @@ export const SignInButton = ({ styles }) => (
 export const SignOutButton = () => (
 	<button
 		type="button"
-		onClick={() => auth.signOut() && window.location.reload()}
+		onClick={() =>
+			auth.signOut() &&
+			window.location.reload() &&
+			useStateWithStorage('tcl-shopping-list-path', null)
+		}
 		className="m-0 bg-accent text-black font-bold hover:text-black hover:bg-third  "
 	>
 		Sign Out

src/views/List.jsx

@@ -6,6 +6,7 @@ import { useVoiceToText } from '../utils';
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import AddBoxRoundedIcon from '@mui/icons-material/AddBoxRounded';
 import KeyboardVoiceIcon from '@mui/icons-material/KeyboardVoice';
+import { SignInButton } from '../api';
 
 export function List({ data, userId, path }) {
 	const [filterVal, setFilterVal] = useState('');
@@ -136,8 +137,9 @@ export function List({ data, userId, path }) {
 			) : (
 				<div className="flex flex-col h-[80vh]  my-8 p-8 rounded-3xl overflow-hidden mx-auto place-content-center items-center ">
 					<h2 className="text-center my-8 text-neutral text-6xl">
-						Please login or add items to your list
+						Please login to view items
 					</h2>
+					<SignInButton styles={'bg-neutral text-white btn-lg text-2xl'} />
 				</div>
 			)}
 		</>