Next.js Discord

Discord Forum

Unknown error with Supabase Auth

Unanswered
Gharial posted this in #help-forum
Open in Discord
GharialOP
Filling out the form and clicking sign up redirects me to an /error page. Now this is probably what is meant to happen when encountering an error, but I have no clue what the error could be.
This is the code for sign up using supabase auth:
"use server";

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

import { createClient } from "@/lib/supabase/server";

export async function login(formData: FormData) {
  const supabase = await createClient();

  // type-casting here for convenience
  // in practice, you should validate your inputs
  const data = {
    email: formData.get("email") as string,
    password: formData.get("password") as string,
  };

  const { error } = await supabase.auth.signInWithPassword(data);

  if (error) {
    redirect("/error");
  }

  revalidatePath("/", "layout");
  redirect("/");
}

export async function signup(formData: FormData) {
  const supabase = await createClient();

  // type-casting here for convenience
  // in practice, you should validate your inputs
  const data = {
    email: formData.get("email") as string,
    password: formData.get("password") as string,
    // username: formData.get("username") as string,
  };

  const { error } = await supabase.auth.signUp(data);

  if (error) {
    console.error(error?.message);
    redirect("/error");
  }

  revalidatePath("/", "layout");
  redirect("/");
}

Which is used by the client when clicking submit:
  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    setLoading(true);
    e.preventDefault();
    const formData = new FormData(e.currentTarget);

    try {
      const result = await signup(formData);
      alert("Signup successful!");
      console.log("User:", result);
    } catch (err) {
      if (err instanceof Error) {
        console.error(err.message);
      }
      console.error("Unknown error occurred");
    } finally {
      setLoading(false);
    }
  };

9 Replies

Asian black bear
redirect and the other navigation methods throw Next-specific errors. You are intercepting it yourself via the try/catch block which is why Next doesn't perform the navigation as the error doesn't bubble up.
@Asian black bear `redirect` and the other navigation methods throw Next-specific errors. You are intercepting it yourself via the try/catch block which is why Next doesn't perform the navigation as the error doesn't bubble up.
GharialOP
I may be misunderstanding. I'm not sure what you mean when you say it does not perform the navigation when it navigates me to /error. This is expected behaviour when Supabase auth encounters an error since its written in the signup function:
  const { error } = await supabase.auth.signUp(data);

  if (error) {
    redirect("/error");
  }

The issue is I have no idea what this error could be, it does not tell me.
I tried using unstable_rethrow but no luck
  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    setLoading(true);
    e.preventDefault();
    const formData = new FormData(e.currentTarget);

    try {
      const result = await signup(formData);
      alert("Signup successful!");
      console.log("User:", result);
    } catch (err) {
      unstable_rethrow(err);
      if (err instanceof Error) {
        console.error(err.message);
      }
      console.error("Unknown error occurred");
    } finally {
      setLoading(false);
    }
  };
Wait Im silly Im only looking at the browser console when Im using a server function
I think its because email and password are giving undefined values
GharialOP
yh i fixed it