fix: include hidden passkey fields in form (#188)

ory · Jun 20, 2024 · 86c532f · 86c532f
1 parent 330df0a
commit 86c532f
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 114 deletions.
diff --git a/src/react-components/ory/helpers/user-auth-form.tsx b/src/react-components/ory/helpers/user-auth-form.tsx
@@ -69,19 +69,9 @@ export const UserAuthForm = ({
   formFilterOverride,
   className,
   ...props
-}: UserAuthFormProps): JSX.Element => (
-  <form
-    className={cn(className, formStyle)}
-    action={flow.ui.action}
-    method={flow.ui.method}
-    onKeyDown={(e) => {
-      if (e.key === "Enter" && !submitOnEnter) {
-        e.stopPropagation()
-        e.preventDefault()
-      }
-    }}
-    {...(onSubmit && {
-      onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
+}: UserAuthFormProps): JSX.Element => {
+  const submitHandler = onSubmit
+    ? (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault()
 
         const form = event.currentTarget
@@ -108,23 +98,37 @@ export const UserAuthForm = ({
         }
 
         onSubmit({ body, event })
-      },
-    })}
-    {...props}
-  >
-    <>
-      {/*always add csrf token and other hidden fields to form*/}
-      <FilterFlowNodes
-        filter={
-          formFilterOverride ?? {
-            nodes: flow.ui.nodes,
-            groups: "default", // we only want to map hidden default fields here
-            attributes: "hidden",
-          }
+      }
+    : undefined
+
+  return (
+    <form
+      className={cn(className, formStyle)}
+      action={flow.ui.action}
+      method={flow.ui.method}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" && !submitOnEnter) {
+          e.stopPropagation()
+          e.preventDefault()
         }
-        includeCSRF={true}
-      />
-      {children}
-    </>
-  </form>
-)
+      }}
+      onSubmit={submitHandler}
+      {...props}
+    >
+      <>
+        {/*always add csrf token and other hidden fields to form*/}
+        <FilterFlowNodes
+          filter={
+            formFilterOverride ?? {
+              nodes: flow.ui.nodes,
+              groups: ["default"], // we only want to map hidden default fields here
+              attributes: "hidden",
+            }
+          }
+          includeCSRF={true}
+        />
+        {children}
+      </>
+    </form>
+  )
+}
diff --git a/src/react-components/ory/sections/passwordless-section.tsx b/src/react-components/ory/sections/passwordless-section.tsx
@@ -3,12 +3,7 @@ import { JSX } from "react"
 import { gridStyle } from "../../../theme"
 import { FilterFlowNodes } from "../helpers/filter-flow-nodes"
 import { SelfServiceFlow } from "../helpers/types"
-import {
-  hasDefault,
-  hasPasskey,
-  hasIdentifierFirst,
-  hasWebauthn,
-} from "../helpers/utils"
+import { hasPasskey, hasWebauthn } from "../helpers/utils"
 
 export const PasswordlessSection = (
   flow: SelfServiceFlow,
@@ -55,7 +50,7 @@ export const PasskeySection = (flow: SelfServiceFlow): JSX.Element | null => {
       <FilterFlowNodes
         filter={{
           nodes: flow.ui.nodes,
-          groups: ["webauthn", "identifier_first"],
+          groups: ["webauthn", "identifier_first", "passkey"],
           withoutDefaultAttributes: true,
           attributes: ["hidden"], // the form will take care of hidden fields
         }}

diff --git a/src/react-components/ory/sections/profile-section.tsx b/src/react-components/ory/sections/profile-section.tsx
@@ -55,22 +55,22 @@ export const ProfileLoginSection = (
   flow: SelfServiceFlow,
 ): JSX.Element | null => {
   return hasProfile(flow.ui.nodes) ? (
-        <div className={gridStyle({ gap: 32 })}>
-            <FilterFlowNodes
-                filter={{
-                    nodes: flow.ui.nodes,
-                    groups: ["profile"],
-                    excludeAttributeTypes: "submit,hidden",
-                }}
-            />
-            <FilterFlowNodes
-                filter={{
-                    nodes: flow.ui.nodes,
-                    groups: ["profile"],
-                    excludeAttributeTypes: "hidden",
-                    attributes: "submit",
-                }}
-            />
-        </div>
+    <div className={gridStyle({ gap: 32 })}>
+      <FilterFlowNodes
+        filter={{
+          nodes: flow.ui.nodes,
+          groups: ["profile"],
+          excludeAttributeTypes: "submit,hidden",
+        }}
+      />
+      <FilterFlowNodes
+        filter={{
+          nodes: flow.ui.nodes,
+          groups: ["profile"],
+          excludeAttributeTypes: "hidden",
+          attributes: "submit",
+        }}
+      />
+    </div>
   ) : null
 }