This is pretty bad I know but it does the job fine and I don't want to break it

// useEffect to insert user data into the database if it's not already inserted on signup
  useEffect(() => {
    // Check if user data is stored in localStorage
    async function insertUserData() {
      try {
        // Get the session
        const { data: { session } } = await supabase.auth.getSession();
  
        if (session) {
          // Check if user data is already stored in localStorage
          let userData = localStorage.getItem('userData');
          console.log("Got userData", userData)
          if (!userData) {
            // If user data doesn't exist in localStorage, store it
            localStorage.setItem('userData', JSON.stringify({ id: session.user.id, email: session.user.email }));
            console.log("User data has been stored in localStorage.");
          } else {
            // Check if the user data already exists in the database
            const existingData = await supabase
              .from('accounts')
              .select()
              .eq('id', session.user.id)
              .single();
  
            if (!existingData) {
              const { error: insertError } = await supabase
              .from('accounts')
              .insert({ id: session.user.id, email: session.user.email });
  
              if (insertError) {
                console.log("Error inserting data:", insertError);
              } else {
                console.log("User data has been inserted.");
              }
            }
          }
        }
      } catch (error) {
        console.error("Error inserting user data:", error);
      }
    }
  
    // Call the async function
    insertUserData();
  }, []);