Conform + Next.js 15: How to prevent a form getting reset when the Server Action returns an error?

[sundaray]

Hello,
I'm encountering an issue in my Next.js app, where the form is getting reset after I get back a form-level error message from the Server Action. This is a poor user experience imo.

What do I want?
I want the form fields to preserve their values when I get back a form-level error.

Environment:

@conform-to/react: ^1.8.0
@conform-to/zod: ^1.8.0
react: ^19.0.0
react-dom: ^19.0.0
next: 15.3.4 (using next dev --turbo)

Minimal Reproducible Example:

Here is the complete code for my Server Action and the Sign-in form.

1. Server Action (app/credentials-signin-action.ts)

"use server";

import { redirect } from "next/navigation";
import { parseWithZod } from "@conform-to/zod";
import { Effect, Match, pipe, Logger } from "effect";
import { SignInEmailPasswordFormSchema } from "@/lib/schema";

import { getAccountStatus } from "@/lib/auth/credentials/get-account-status";
import { verifyPassword } from "@/lib/auth/credentials/verify-password";
import { createUserSession } from "@/lib/auth/session/create-user-session";
import { getUserRole } from "@/lib/auth/shared/get-user-role";

/************************************************
 *
 * Sign in with email and password
 *
 ************************************************/

export async function signInWithEmailAndPassword(
  next: string,
  prevState: unknown,
  formData: FormData
) {
  const submission = parseWithZod(formData, {
    schema: SignInEmailPasswordFormSchema,
  });

  if (submission.status !== "success") {
    return submission.reply();
  }

  const { email, password } = submission.value;

  // Define an Effect
  const program = Effect.gen(function* () {
    const accountStatus = yield* getAccountStatus(email);

    yield* pipe(
      Match.value(accountStatus),
      Match.tag("VerifiedAccount", () => Effect.void),
      Match.tag("NoAccount", "UnverifiedAccount", () =>
        Effect.fail({
          _tag: "CreateAccount" as const,
          message: "Account doesn't exist. Sign up to create an account.",
        })
      ),
      Match.exhaustive
    );

    yield* verifyPassword(email, password);

    const role = yield* getUserRole(email);

    yield* createUserSession(email, role);
  });

  const handledErrors = {
    UserNotFoundError: () =>
      Effect.succeed(
        submission.reply({
          formErrors: ["Account doesn't exist. Sign up to create an account."],
        })
      ),
    PasswordNotSetError: () =>
      Effect.succeed(
        submission.reply({
          formErrors: ["Account doesn't exist. Sign up to create an account."],
        })
      ),
    InvalidPasswordError: () =>
      Effect.succeed(
        submission.reply({ formErrors: ["Incorrect email or password."] })
      ),
    DatabaseError: () =>
      Effect.succeed(
        submission.reply({
          formErrors: ["Database error. Please try again."],
        })
      ),
    ConfigError: () =>
      Effect.succeed(
        submission.reply({
          formErrors: ["Configuration error. Please try again."],
        })
      ),
    EncryptionError: () =>
      Effect.succeed(
        submission.reply({
          formErrors: ["Encryption error. Please try again."],
        })
      ),
    InvalidPayloadError: () =>
      Effect.succeed(
        submission.reply({
          formErrors: ["Invalid payload error. Please try again."],
        })
      ),
    UserSessionCreationError: () =>
      Effect.succeed(
        submission.reply({
          formErrors: ["Failed to create user session. Please try again."],
        })
      ),
    PasswordVerificationError: () =>
      Effect.succeed(
        submission.reply({
          formErrors: ["Failed to verify password. Please try again."],
        })
      ),
  };

  // Handle the success and failure channels of the Effect.
  const handledProgram = pipe(
    program,

    // Since Effect.map() only runs on success, we use it to handle a successful login by redirecting the user.
    Effect.map(() => ({ status: "success" as const })),

    Effect.catchTag("CreateAccount", (error) =>
      Effect.succeed(submission.reply({ formErrors: [error.message] }))
    ),

    Effect.catchTags(handledErrors),

    Effect.provide(Logger.pretty)
  );

  const result = await Effect.runPromise(handledProgram);

  if (result.status === "success") {
    redirect(next);
  } else {
    return result;
  }
}

(Please note: I am using Effect-TS in my application, which is why you see the JavaScript generator syntax.)

2. Sign-in Form (components/auth/credentials-signin-form.tsx)

"use client";

import { useState, useActionState } from "react";
import Link from "next/link";
import { useForm, getInputProps, getFormProps } from "@conform-to/react";
import { parseWithZod } from "@conform-to/zod";

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Icons } from "@/components/icons";
import { FormErrorMessage } from "@/components/auth/form-error-message";
import { FormFieldErrorMessage } from "@/components/auth/form-field-error-message";

import { signInWithEmailAndPassword } from "@/app/credentials-signin-action";
import { SignInEmailPasswordFormSchema } from "@/lib/schema";

export function CredentialsSignInForm({ next }: { next: string }) {
  const boundSignInWithEmailAndPassword = signInWithEmailAndPassword.bind(
    null,
    next
  );

  const [lastResult, formAction, isPending] = useActionState(
    boundSignInWithEmailAndPassword,
    undefined
  );

  const [form, fields] = useForm({
    lastResult,
    // Validate when field loses focus
    shouldValidate: "onBlur",
    // Re-validate as user types
    shouldRevalidate: "onInput",
    onValidate({ formData }) {
      return parseWithZod(formData, {
        schema: SignInEmailPasswordFormSchema,
      });
    },
  });

  const [isPasswordVisible, setIsPasswordVisible] = useState(false);

  function togglePasswordVisibility() {
    setIsPasswordVisible((prevState) => !prevState);
  }

  return (
    <form {...getFormProps(form)} action={formAction}>
      {form.errors && <FormErrorMessage error={form.errors[0]} />}
      <div className={`grid gap-1 ${form.errors ? "mt-4" : ""}`}>
        <div>
          <Label htmlFor="email">Email</Label>
          <Input
            {...getInputProps(fields.email, { type: "email" })}
            className="mt-2"
          />
          <FormFieldErrorMessage
            id={fields.email.errorId}
            name={fields.email.name}
            errors={fields.email.errors}
          />
        </div>
        <div>
          <div className="flex items-center justify-between">
            <Label htmlFor="password">Password</Label>
            <div className="text-sm">
              <Link
                href="/forgot-password"
                className="font-medium text-sky-600 hover:underline hover:underline-offset-2"
              >
                Forgot password?
              </Link>
            </div>
          </div>
          <div className="relative">
            <Input
              {...getInputProps(fields.password, {
                type: isPasswordVisible ? "text" : "password",
              })}
              className="mt-2"
            />
            <button
              type="button"
              onClick={togglePasswordVisibility}
              aria-label={isPasswordVisible ? "Hide password" : "Show password"}
              aria-pressed={isPasswordVisible}
              className="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-lg text-gray-500 outline-offset-0 transition-colors hover:text-gray-600 focus:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
            >
              {isPasswordVisible ? (
                <Icons.eyeOff size={16} strokeWidth={2} aria-hidden="true" />
              ) : (
                <Icons.eye size={16} strokeWidth={2} aria-hidden="true" />
              )}
            </button>
          </div>
          <FormFieldErrorMessage
            id={fields.password.errorId}
            name={fields.password.name}
            errors={fields.password.errors}
          />
        </div>
        <Button
          type="submit"
          disabled={isPending}
          className="h-10 rounded-full"
        >
          {isPending ? (
            <>
              <Icons.loader className="size-3 animate-spin" />
              Signing in...
            </>
          ) : (
            "Sign in"
          )}
        </Button>
        <div className="mt-6 text-center text-sm font-medium">
          <span className="text-gray-500">Don&apos;t have an account? </span>
          <Link
            href="/signup"
            className="text-sky-600 transition-colors hover:underline hover:underline-offset-2"
          >
            Sign up
          </Link>
        </div>
      </div>
    </form>
  );
}

Key Debugging Findings:

When I log the value of lastResult, it contains the initialValue property, which contains the email and password values:

But when I log the object returned by getInputProps(fields.email, { type: "email" }), it is missing the defaultValue property:

Is the reason the form fields are not preserving their values when the form receives an error as there is no defaultValue being passed?

Github Repo
Here is the GitHub repo link for my Next.js app.

[edmundhung]

What you are seeing is caused by the new form-reset behavior in React 19, which Conform doesn't fully support yet. We are actively working on an improved useForm hook and expect to ship it in the next couple of weeks. In the meantime, try the workaround here: #681 (comment)