Next.js Discord

Discord Forum

Server Action Error

Answered
Havana posted this in #help-forum
Open in Discord
Avatar
HavanaOP
Uncaught Error: Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.


This happens when I used the server action.
note that this is my first time using server actions

here's a signup function that is located here src/actions/auth.ts with "use server;" at the top of that file
export async function signUp(values: z.infer<typeof signUpSchema>) {
    const origin = headers().get("origin");
    const email = values.email;
    const password = values.password;
    const cookieStore = cookies();
    const supabase = createClient(cookieStore);

    const { error } = await supabase.auth.signUp({
        email,
        password,
        options: {
            emailRedirectTo: `${origin}/api/auth/callback`,
        },
    });

    if (error) {
        return console.error("Could not authenticate user");
    }

    return console.log("✅ Signup successfully.");
}
Answered by Ray
try this
export default function Signup() {
    const form = useForm<z.infer<typeof signUpSchema>>({
        resolver: zodResolver(signUpSchema),
        defaultValues: {
            email: "",
            password: "",
            confirmPassword: "",
        },
    });

        const onSubmit = async (values: z.infer<typeof signUpSchema>) => {
            await signUp(values)
        }

    return (
        <Card>
            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)}>
                    <CardHeader>
                        <CardTitle className="mt-0">Signu
View full answer

10 Replies

Avatar
Ray
could you show the code where you use this action?
Avatar
HavanaOP
## src/components/auth/Signup.tsx
Image
Avatar
Ray
don't see issue here
Avatar
Ray
try this
export default function Signup() {
    const form = useForm<z.infer<typeof signUpSchema>>({
        resolver: zodResolver(signUpSchema),
        defaultValues: {
            email: "",
            password: "",
            confirmPassword: "",
        },
    });

        const onSubmit = async (values: z.infer<typeof signUpSchema>) => {
            await signUp(values)
        }

    return (
        <Card>
            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)}>
                    <CardHeader>
                        <CardTitle className="mt-0">Signu
Answer
Avatar
HavanaOP
it works!
but how?
can you please explain?
Avatar
Ray
because form.handleSubmit(data, event) passing a event class to the action
and class is not serializable by react
Avatar
HavanaOP
Thanks man, Appreciate your help.