feat: show registration with code in storybook & cleanup component

src/react-components/ory/sections/auth-code-section.spec.tsx

@@ -104,3 +104,77 @@ test("shouldn't render anything with no code group", async ({ mount }) => {
 
   await expect(container.locator("input[name=identifier]")).not.toBeVisible()
 })
+
+test("should render traits on default group", async ({ mount }) => {
+  const container = await mount(
+    <AuthCodeSection
+      nodes={[
+        {
+          group: "default",
+          attributes: {
+            name: "traits.email",
+            node_type: "input",
+            type: "text",
+            required: true,
+            disabled: false,
+          },
+          messages: [],
+          type: "input",
+          meta: {
+            label: {
+              id: 1070002,
+              text: "E-Mail",
+              type: "info",
+              context: {
+                title: "E-Mail",
+              },
+            },
+          },
+        },
+        {
+          group: "default",
+          attributes: {
+            name: "traits.name",
+            node_type: "input",
+            type: "text",
+            required: true,
+            disabled: false,
+          },
+          messages: [],
+          type: "input",
+          meta: {
+            label: {
+              id: 1070001,
+              text: "Name",
+              type: "info",
+            },
+          },
+        },
+        {
+          group: "code",
+          attributes: {
+            name: "method",
+            node_type: "input",
+            type: "submit",
+            required: true,
+            disabled: false,
+            value: "code",
+          },
+          messages: [],
+          type: "input",
+          meta: {
+            label: {
+              id: 1040006,
+              text: "Sign up with code",
+              type: "info",
+            },
+          },
+        },
+      ]}
+    />,
+  )
+
+  await expect(container.locator("input[name='traits.email']")).toBeVisible()
+  await expect(container.locator("input[name='traits.name']")).toBeVisible()
+  await expect(container.locator("button[name=method]")).toBeVisible()
+})

src/react-components/ory/sections/auth-code-section.tsx

@@ -18,7 +18,8 @@ export const AuthCodeSection = ({
           filter={{
             nodes: nodes,
             groups: "code",
-            excludeAttributes: ["submit", "hidden"],
+            withoutDefaultAttributes: true,
+            excludeAttributes: ["hidden", "button", "submit"], // the form will take care of hidden fields
           }}
         />
       </div>
@@ -28,8 +29,8 @@ export const AuthCodeSection = ({
         filter={{
           nodes: nodes,
           groups: "code",
-          withoutDefaultGroup: true,
-          attributes: ["submit", "hidden"],
+          withoutDefaultAttributes: true,
+          attributes: ["button", "submit"],
         }}
       />
     </div>

src/stories/Ory/Auth.stories.tsx

@@ -13,13 +13,15 @@ import loginFlowRefresh from "./login-flow-refresh.json"
 import loginFlow from "./login-flow.json"
 import loginFlowCodeOne from "./login-flow-code-1.json"
 import loginFlowCodeTwo from "./login-flow-code-2.json"
+
 import loginFlowHydra from "./login-flow-hydra.json"
 
 import loginFlowError from "./login-flow-error.json"
 import loginFlowUiError from "./login-flow-ui-error.json"
 
 import registrationFlowWebAuthn from "./register-flow-webauthn.json"
 import registrationFlow from "./register-flow.json"
+import registrationFlowCode from "./register-flow-code.json"
 
 import recoveryFlow from "./recovery-flow.json"
 
@@ -206,6 +208,12 @@ RecoveryAuthCardWithoutAdditionalProps.args = {
   flowType: "recovery",
 }
 
+export const RegistrationAuthCardFlowCode = Template.bind({})
+RegistrationAuthCardFlowCode.args = {
+  flow: registrationFlowCode as RegistrationFlow,
+  flowType: "registration",
+}
+
 export const VerificationAuthCard = Template.bind({})
 
 VerificationAuthCard.args = {

src/stories/Ory/register-flow-code.json

@@ -0,0 +1,178 @@
+{
+  "id": "4028e642-a1a2-4ab7-b8b8-0b8683216f16",
+  "type": "browser",
+  "expires_at": "2023-09-15T06:51:15.085031Z",
+  "issued_at": "2023-09-15T06:21:15.085031Z",
+  "request_url": "https://example.com/self-service/registration/browser?return_to=",
+  "ui": {
+    "action": "https://example.com/self-service/registration?flow=4028e642-a1a2-4ab7-b8b8-0b8683216f16",
+    "method": "POST",
+    "nodes": [
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "traits.email",
+          "type": "email",
+          "required": true,
+          "autocomplete": "email",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070002,
+            "text": "E-Mail",
+            "type": "info",
+            "context": {
+              "title": "E-Mail"
+            }
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "csrf_token",
+          "type": "hidden",
+          "value": "AYWGaOmwWvetqDidhkfq2nJxD9IFITJ4Czi6MPbRLO5LCNKhJpvX8TF5XsF2L7Sk0YNhAbPYFCiwPbdL8P3lxw==",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "webauthn",
+        "attributes": {
+          "name": "webauthn_register_displayname",
+          "type": "text",
+          "value": "",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1050013,
+            "text": "Name of the security key",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "webauthn",
+        "attributes": {
+          "name": "webauthn_register",
+          "type": "hidden",
+          "value": "",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "webauthn",
+        "attributes": {
+          "name": "webauthn_register_trigger",
+          "type": "button",
+          "value": "",
+          "disabled": false,
+          "onclick": "window.__oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"Test\",\"id\":\"example.com\"},\"user\":{\"name\":\"Test\",\"displayName\":\"Test\",\"id\":\"rhD-u3guQBaDPkwrIbBISQ\"},\"challenge\":\"PwDL5hQ-H9fsxdurVLe5gisJ8-\",\"pubKeyCredParams\":[{\"type\":\"public-key\",\"alg\":-7},{\"type\":\"public-key\",\"alg\":-35},{\"type\":\"public-key\",\"alg\":-36},{\"type\":\"public-key\",\"alg\":-257},{\"type\":\"public-key\",\"alg\":-258},{\"type\":\"public-key\",\"alg\":-259},{\"type\":\"public-key\",\"alg\":-37},{\"type\":\"public-key\",\"alg\":-38},{\"type\":\"public-key\",\"alg\":-39},{\"type\":\"public-key\",\"alg\":-8}],\"timeout\":300000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}})",
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1040004,
+            "text": "Sign up with security key",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "script",
+        "group": "webauthn",
+        "attributes": {
+          "src": "https://example.com/.well-known/ory/webauthn.js",
+          "async": true,
+          "referrerpolicy": "no-referrer",
+          "crossorigin": "anonymous",
+          "integrity": "sha512-RI23aG5lwYTo7zknGdc++eHUMimUWhkyFzrGid6HkVSdUSjdESPtM3KufXGq/lo4Ut0jI9mDiZeT8tHoSvaHvg==",
+          "type": "text/javascript",
+          "id": "webauthn_script",
+          "nonce": "94a13785-1ae3-4560-8a87-09d24f7b36bb",
+          "node_type": "script"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "code",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "code",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1040006,
+            "text": "Sign up with code",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "password",
+          "type": "password",
+          "required": true,
+          "autocomplete": "new-password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070001,
+            "text": "Password",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1040001,
+            "text": "Sign up",
+            "type": "info"
+          }
+        }
+      }
+    ]
+  },
+  "state": "choose_method"
+}