Fix landpage loading

components/Layout.js

@@ -16,33 +16,11 @@ import Footer from "./Footer";
 import Head from "next/head";
 import Nav from "./Nav";
 import { ToastContainer } from "react-toastify";
-import { supabase } from "utils/supabaseClient";
 import { useAuth } from "utils/AuthContext";
-import { useEffect } from "react";
 
 const Layout = (props) => {
   const { user, signOut } = useAuth();
 
-  useEffect(() => {
-    const { data: authListener } = supabase.auth.onAuthStateChange(
-      (event, session) => {
-        if ((event === "SIGNED_OUT") | (event === "SIGNED_IN")) {
-          fetch("/api/auth", {
-            method: "POST",
-            headers: new Headers({ "Content-Type": "application/json" }),
-            credentials: "same-origin",
-            body: JSON.stringify({ event, session }),
-          }).then((res) => res.json());
-        }
-        if (event === "USER_UPDATED") {
-        }
-      }
-    );
-    return () => {
-      authListener.unsubscribe();
-    };
-  }, []);
-
   const toastStyle = {
     //Style your toast elements here
     success: "bg-accent",

utils/AuthContext.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
 
 import { supabase } from "utils/supabaseClient";
 
@@ -6,20 +6,47 @@ import { supabase } from "utils/supabaseClient";
 const AuthContext = createContext();
 
 export const AuthProvider = ({ children }) => {
-  // create state values for user data and loading
   const [user, setUser] = useState();
   const [loading, setLoading] = useState(true);
 
-  // create signUp, signIn, signOut functions
+  useEffect(() => {
+    // Check active sessions and sets the user
+    const session = supabase.auth.session();
+
+    setUser(session?.user ?? null);
+    setLoading(false);
+
+    // Listen for changes on auth state (logged in, signed out, etc.)
+    const { data: listener } = supabase.auth.onAuthStateChange(
+      async (event, session) => {
+        if ((event === "SIGNED_OUT") | (event === "SIGNED_IN")) {
+          fetch("/api/auth", {
+            method: "POST",
+            headers: new Headers({ "Content-Type": "application/json" }),
+            credentials: "same-origin",
+            body: JSON.stringify({ event, session }),
+          }).then((res) => res.json());
+        }
+        if (event === "USER_UPDATED") {
+        }
+        setUser(session?.user ?? null);
+        setLoading(false);
+      }
+    );
+
+    return () => {
+      listener?.unsubscribe();
+    };
+  }, []);
+
+  // Will be passed down to Signup, Login and Dashboard components
   const value = {
     signUp: (data) => supabase.auth.signUp(data),
     signIn: (data) => supabase.auth.signIn(data),
     signOut: () => supabase.auth.signOut(),
-    resetPassword: (data) => supabase.auth.api.resetPasswordForEmail(data),
     user,
   };
 
-  // use a provider to pass down the value
   return (
     <AuthContext.Provider value={value}>
       {!loading && children}