[SOLVED] Server action on NextJS always return an empty dictionary instead of actual return value

Server action on NextJS always return an empty dictionary instead of actual return value

I've cloned the Supabase Auth Template on Vercel (Supabase Starter) but I'm having issues with the signup messages

On the action.ts I've added a return statement

export const signUpAction = async (formData: FormData) => {
  const email = formData.get("email")?.toString();
  const password = formData.get("password")?.toString();
  const supabase = createClient();
  const origin = headers().get("origin");

  if (email !== process.env.ADMIN_EMAIL) {
    return { error: "Email not valid" };
  }

The page.tsx has

export default function Signup({ searchParams }: { searchParams: Message }) {
  if ("message" in searchParams) {
    return (
      <div className="w-full flex-1 flex items-center h-screen sm:max-w-md justify-center gap-2 p-4">
        <FormMessage message={searchParams} />
      </div>
    );
  }

where Message is a component in form-message.tsx

For some reason searchParams is always an empty dictionary {} even if I try to signup with email !== process.env.ADMIN_EMAIL (I've added a console.log inside the if and it correctly execute that part of the code)

I can't understand what's going on

Solution

The issue here, as I just found out, is that you must use encodedRedirect to redirect and pass the new message to the front end.

return encodedRedirect("error", "/sign-up", "Email not valid");

The function is written inside utils/utils

I just don't understand why they don't use in the first return

if (!email || !password) {
  return { error: "Email and password are required" };
}

to keep things consistent