NextJs + Supabase "submit with auth userid"

Question

I am trying to post article with inserting user.id to "posts table (id column)". Trying so many times, but I can not insert the user.id!!

Here is my code now.

"use client";
import { useState } from "react";
import supabase from "@/utils/supabase/client";

export function Edit() {
  const [body, setBody] = useState("");

  const handleSubmit = async (e: { preventDefault: () => void }) => {
    e.preventDefault();

    const { data, error } = await supabase.from("posts").insert([{ body }]);
    if (data) {
      setBody("");
      window.location.reload();
    }
    if (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit} className="flex flex-col text-black">
        <label htmlFor="postsBody" className="text-white">
          Note Title:
        </label>
        <input
          id="postsBody"
          className="mt-5"
          type="text"
          value={body}
          onChange={(e) => setBody(e.target.value)}
          required
        />
        <button
          type="submit"
          className="bg-white p-3 rounded mt-5 text-black font-bold"
        >
          Add Contents
        </button>
      </form>
    </div>
  );
}

Please teach me how to fix this code to achive my purpose!!

Answer 1

Include user.id to your statement.

You can start from here:

export function Edit() {
  const [body, setBody] = useState("");
  const [userId, setUserId] = useState(null);

  useEffect(() => {
    setUserId(supabase.auth.session()?.user?.id);
  }, [supabase.auth.session()]);