Merge pull request #818 from nicksan222/fix/password-mismatch-flash

Fix password mismatch flash in authentication

Author: timbastin

src/components/ory/flowcomponents/Nodes/OryButton.tsx

@@ -8,7 +8,7 @@ import { useFormContext } from "react-hook-form";
 import type { OryNodeButtonProps } from "@ory/elements-react";
 import { FingerPrintIcon } from "@heroicons/react/24/outline";
 import { Button } from "@/components/ui/button";
-import { usePasswordMismatch } from "../PasswordField";
+import { usePasswordMismatch } from "@/hooks/usePasswordMismatch";
 
 export function OryButton({ node, buttonProps }: OryNodeButtonProps) {
   const label = node.meta.label?.text ?? "";

src/components/ory/flowcomponents/Nodes/OryRegistrationInput.tsx

@@ -3,24 +3,32 @@
 
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import type { OryNodeInputProps } from "@ory/elements-react";
 import { Label } from "@/components/ui/label";
-import {
-  CONFIRM_PASSWORD_LABEL,
-  PasswordField,
-  usePasswordMismatch,
-} from "../PasswordField";
+import { usePasswordMismatch } from "@/hooks/usePasswordMismatch";
+import { CONFIRM_PASSWORD_LABEL, PasswordField } from "../PasswordField";
 import { OryInput } from "./OryInput";
 
 export function OryRegistrationInput(props: OryNodeInputProps) {
   const { node, attributes, onClick } = props;
-  const { register } = useFormContext();
+  const {
+    register,
+    resetField,
+    formState: { isSubmitting },
+  } = useFormContext();
   const mismatch = usePasswordMismatch();
   const [confirmTouched, setConfirmTouched] = useState(false);
   const { value, name, autocomplete, maxlength, ...rest } = attributes;
 
+  useEffect(() => {
+    if (isSubmitting) {
+      resetField("confirmPassword");
+      setConfirmTouched(false);
+    }
+  }, [isSubmitting, resetField]);
+
   // Only the password field gets the extra confirmation field. Every other
   // node (email, name, hidden, csrf, …) renders exactly like the standard
   // input, so we delegate to OryInput rather than duplicating that logic.
@@ -30,7 +38,7 @@ export function OryRegistrationInput(props: OryNodeInputProps) {
 
   // Show the mismatch error only once the confirm field has been touched, but
   // keep it watch-driven so it clears live as soon as the values match.
-  const showMismatch = confirmTouched && mismatch;
+  const showMismatch = !isSubmitting && confirmTouched && mismatch;
 
   return (
     <div className="flex flex-col gap-1">

src/components/ory/flowcomponents/PasswordField.tsx

@@ -5,7 +5,7 @@
 
 import { useState } from "react";
 import type { FocusEventHandler, MouseEventHandler } from "react";
-import { useFormContext, type UseFormRegisterReturn } from "react-hook-form";
+import type { UseFormRegisterReturn } from "react-hook-form";
 import { Eye, EyeOff } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
@@ -14,17 +14,6 @@ const PASSWORD_FIELD_CLASS =
 
 export const CONFIRM_PASSWORD_LABEL = "Confirm Password";
 
-export function usePasswordMismatch(): boolean {
-  const { watch, getValues } = useFormContext();
-  const password = watch("password");
-  const confirmPassword = watch("confirmPassword");
-  const hasConfirmField = "confirmPassword" in getValues();
-  if (!hasConfirmField) {
-    return false;
-  }
-  return password !== confirmPassword;
-}
-
 export function PasswordField({
   field,
   label,

src/hooks/usePasswordMismatch.ts

@@ -0,0 +1,16 @@
+// Copyright 2026 L3montree GmbH and the DevGuard Contributors.
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { useFormContext } from "react-hook-form";
+
+export function usePasswordMismatch(): boolean {
+  const { watch, getValues } = useFormContext();
+  const password = watch("password");
+  const confirmPassword = watch("confirmPassword");
+  const hasConfirmField = "confirmPassword" in getValues();
+
+  if (!hasConfirmField) {
+    return false;
+  }
+  return password !== confirmPassword;
+}