【Next.js】ログインフォームでuserがいなかった場合に、ログインページでエラーの内容が出ずハマった話

はじめに

ログインページでエラーの内容を出したかったけどハマったので記事にします

問題

use serverを使用して、formで認証機能を作成しているのですが、
入力した内容がDBになかった場合、ログインページにてエラーメッセージを出したかったのですが、
errorをうまく取得できなかったため、表示することができませんでした。

supabaseAuthして機能を実装しています

解決方法

typescript actions.ts

export async function login(_: State, formData: FormData): Promise<State> {
  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) {
    return { error: "ユーザーが存在しないか、メールアドレス／パスワードが誤っています" };
  }

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

これが完成系です
下記のコードでerrorの内容を返し、returnしました

typescript actions.ts

  const initialState: State = { error: "" };
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  if (error) {
    return { error: "ユーザーが存在しないか、メールアドレス／パスワードが誤っています" };
  }

それを呼び出し元で下記のように書いてあげます

typescript LoginForm.tsx

const [state, formAction] = useActionState<State, FormData>(login, initialState);

そうするとstateにてreturnしたerrorが保持されます

{state.error && <p className="text-red-500">{state.error}</p>}

こんな感じで書くとユーザーがいなかった場合やエラーが出た場合にメッセージが返ってきます

おわりに

ドキュメントを見るまでめちゃくちゃハマっていましたし、
たくさん調べても出てこなかったのですが、AIに聞いたことで、
こんなのがあるよ！というふうに教えてくれたので解決できました

参考