Signup with Server Action

This form uses asServerAction to handle submissions on the server with automatic field error mapping.

Live form

Try username admin or email taken@example.com to see field errors.

Server action

"use server";

export const signupAction = asServerAction(
  async (prevState, formData) => {
    const username = formData.get("username");

    if (username === "admin") {
      return {
        status: "error",
        fieldErrors: {
          username: "This handle is reserved.",
        },
      };
    }

    return {
      status: "success",
      data: { userId: "user_99a8f" },
    };
  }
);