trying to fix protected route data fetch problem and only one more problem somewhere in the

packages/web/pages/_app.tsx

@@ -26,13 +26,15 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
 
   return (
-    <RecoilRoot>
-      <SiteLayout>
-        <AuthProvider>{getLayout(<Component {...pageProps} />)}</AuthProvider>
+    <AuthProvider>
+      <RecoilRoot>
+        <SiteLayout>
+          {getLayout(<Component {...pageProps} />)}
 
-        <Toaster position="top-center" />
-      </SiteLayout>
-    </RecoilRoot>
+          <Toaster position="top-center" />
+        </SiteLayout>
+      </RecoilRoot>
+    </AuthProvider>
   );
 }
 

packages/web/pages/s/index.tsx

@@ -16,20 +16,13 @@ import ViewConvo from "../../components/MainTabsOrPages/ViewConvo";
 import MainRecoilDataHandler from "../../recoil/MainRecoilDataHandler";
 import { useAuth } from "../../contexts/authContext";
 import AudioHandler from "../../components/Audio/AudioHandler";
+import toast from "react-hot-toast";
+import ProtectedRoute from "../../contexts/ProtectedRoute";
 
 export default function Me() {
-  // TODO: if not authenticated, take user away
-  const { currUser } = useAuth();
-  useEffect(() => {
-    if (!currUser) {
-      console.log("not authenticated...routing from dashboard to teams home");
-      router.push("/teams/login");
-      return;
-    }
-  }, []);
-
   // figure out what content to render from here
   const router = useRouter();
+
   const currPage = router.query.page;
   const currConvo = router.query.convoId;
 
@@ -128,15 +121,17 @@ export default function Me() {
 Me.getLayout = function (content: ReactElement) {
   return (
     <div className="flex flex-col">
-      <MainRecoilDataHandler />
+      <ProtectedRoute>
+        <MainRecoilDataHandler />
 
-      <KeyboardShortcutHandler />
+        <KeyboardShortcutHandler />
 
-      <Header />
+        <Header />
 
-      {content}
+        {content}
 
-      <AudioHandler />
+        <AudioHandler />
+      </ProtectedRoute>
     </div>
   );
 };