feat: improved two step handling and form submit fixes

packages/elements-react/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "i18n-ally.localesPaths": ["src/locales", "src/util/i18n"]
+}

packages/elements-react/package.json

@@ -41,8 +41,8 @@
   },
   "devDependencies": {
     "@hookform/devtools": "^4.3.1",
-    "@svgr/plugin-jsx": "^8.1.0",
-    "esbuild-plugin-svgr": "2.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "esbuild-plugin-svgr": "^2.1.0",
     "eslint-plugin-react": "7.35.0",
     "postcss": "8.4.47",
     "postcss-prefix-selector": "1.16.1",

packages/elements-react/src/components/card/card-two-step.tsx

@@ -3,7 +3,7 @@ import {
   UiNodeGroupEnum,
   UiNodeInputAttributes,
 } from "@ory/client-fetch"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { OryCard, OryCardContent, OryCardFooter } from "."
 import { useComponents, useNodeSorter, useOryFlow } from "../../context"
 import { useNodesGroups } from "../../util/ui"
@@ -14,6 +14,12 @@ import { OryFormSocialButtonsForm } from "../form/social"
 import { OryCardHeader } from "./header"
 import { useFormContext } from "react-hook-form"
 
+enum ProcessStep {
+  ProvideIdentifier,
+  ChooseAuthMethod,
+  ExecuteAuthMethod,
+}
+
 export function OryTwoStepCard() {
   const {
     flow: { ui },
@@ -60,10 +66,6 @@ export function OryTwoStepCard() {
 
   const hasOIDC = Boolean(uniqueGroups.oidc?.length)
 
-  const handleOptionSelect = (group: UiNodeGroupEnum) => {
-    setSelectedGroup(group)
-  }
-
   const zeroStepGroups = ui.nodes.filter(
     (node) => node.group !== UiNodeGroupEnum.Oidc,
   )
@@ -72,15 +74,6 @@ export function OryTwoStepCard() {
     ? (uniqueGroups[selectedGroup] ?? [])
     : []
 
-  const nodeBackButton = ui.nodes.find(
-    (node) =>
-      ("value" in node.attributes &&
-        node.attributes.value === "profile:back") ||
-      ("name" in node.attributes &&
-        node.attributes.name === "identifier" &&
-        node.group === "identifier_first"),
-  )
-
   const finalNodes = [
     ...(uniqueGroups?.identifier_first ?? []),
     ...(uniqueGroups?.default ?? []),
@@ -91,43 +84,41 @@ export function OryTwoStepCard() {
     )
     .concat(selectedNodes)
 
-  const step = selectedGroup ? 2 : isChoosingMethod ? 1 : 0
+  const step = selectedGroup
+    ? ProcessStep.ExecuteAuthMethod
+    : isChoosingMethod
+      ? ProcessStep.ChooseAuthMethod
+      : ProcessStep.ProvideIdentifier
 
   return (
     <OryCard>
       <OryCardHeader />
       <OryCardContent>
         <OryCardValidationMessages />
-        {step === 0 && hasOIDC && <OryFormSocialButtonsForm />}
+        {step === ProcessStep.ProvideIdentifier && hasOIDC && (
+          <OryFormSocialButtonsForm />
+        )}
         <OryForm>
           <FormGroup>
-            {step === 0 &&
+            {step === ProcessStep.ProvideIdentifier &&
               zeroStepGroups
                 .sort(sortNodes)
                 .map((node, k) => <Node node={node} key={k} />)}
-            {step === 1 && (
+            {step === ProcessStep.ChooseAuthMethod && (
               <>
-                {nodeBackButton && <BackButton />}
+                <BackButton />
                 {options.map((option) => (
                   <Components.AuthMethodListItem
                     key={option}
                     group={option}
-                    onClick={() => handleOptionSelect(option)}
+                    onClick={() => setSelectedGroup(option)}
                   />
                 ))}
               </>
             )}
-            {step === 2 && (
+            {step === ProcessStep.ExecuteAuthMethod && (
               <>
-                {nodeBackButton && (
-                  <Components.CurrentIdentifierButton
-                    node={nodeBackButton}
-                    attributes={
-                      nodeBackButton.attributes as UiNodeInputAttributes
-                    }
-                    onClick={() => setSelectedGroup(undefined)}
-                  />
-                )}
+                <BackButton onClick={() => setSelectedGroup(undefined)} />
                 {finalNodes.sort(sortNodes).map((node, k) => (
                   <Node node={node} key={k} />
                 ))}
@@ -141,7 +132,11 @@ export function OryTwoStepCard() {
   )
 }
 
-const BackButton = () => {
+type BackButtonProps = {
+  onClick?: () => void
+}
+
+const BackButton = ({ onClick }: BackButtonProps) => {
   const {
     flow: { ui },
   } = useOryFlow()
@@ -150,27 +145,35 @@ const BackButton = () => {
 
   const nodeBackButton = ui.nodes.find(
     (node) =>
-      ("value" in node.attributes &&
-        node.attributes.value === "profile:back") ||
-      ("name" in node.attributes &&
-        node.attributes.name === "identifier" &&
-        node.group === "identifier_first"),
+      // ("value" in node.attributes &&
+      //   node.attributes.value === "profile:back") ||
+      "name" in node.attributes &&
+      node.attributes.name === "identifier" &&
+      node.group === "identifier_first",
   )
 
+  useEffect(() => {
+    if (!nodeBackButton) return
+
+    setValue(
+      (nodeBackButton.attributes as UiNodeInputAttributes).name,
+      (nodeBackButton.attributes as UiNodeInputAttributes).value,
+    )
+  }, [nodeBackButton, setValue])
+
   if (!nodeBackButton) {
     return null
   }
 
+  const handleClick = () => {
+    onClick?.()
+  }
+
   return (
     <Components.CurrentIdentifierButton
       node={nodeBackButton}
       attributes={nodeBackButton.attributes as UiNodeInputAttributes}
-      onClick={() => {
-        setValue(
-          (nodeBackButton.attributes as UiNodeInputAttributes).name,
-          (nodeBackButton.attributes as UiNodeInputAttributes).value,
-        )
-      }}
+      onClick={onClick ? handleClick : undefined}
     />
   )
 }

packages/elements-react/src/components/form/form.tsx

@@ -108,6 +108,8 @@ export function OryForm({ children }: OryFormProps) {
         if (submitData.method === "code" && data.code) {
           submitData.resend = ""
         }
+
+        console.log(submitData)
         await onSubmitLogin(flowContainer, {
           onRedirect,
           setFlowContainer: handleSuccess,
@@ -119,9 +121,11 @@ export function OryForm({ children }: OryFormProps) {
         const submitData: UpdateRegistrationFlowBody = {
           ...(data as unknown as UpdateRegistrationFlowBody),
         }
+
         if (submitData.method === "code" && submitData.code) {
           submitData.resend = ""
         }
+
         await onSubmitRegistration(flowContainer, {
           onRedirect,
           setFlowContainer: handleSuccess,
@@ -152,6 +156,7 @@ export function OryForm({ children }: OryFormProps) {
         break
       }
       case FlowType.Settings:
+        console.log(data)
         await onSubmitSettings(flowContainer, {
           onRedirect,
           setFlowContainer: handleSuccess,

packages/elements-react/src/components/form/nodes/input.tsx

@@ -10,7 +10,6 @@ import { MouseEventHandler, ReactNode, useEffect, useRef } from "react"
 export const NodeInput = ({
   node,
   attributes,
-  onClick,
 }: NodeProps & {
   attributes: UiNodeInputAttributes
   onClick?: MouseEventHandler
@@ -40,13 +39,7 @@ export const NodeInput = ({
     [],
   )
 
-  const handleClick: MouseEventHandler = (e) => {
-    if (onClick) {
-      console.log("asd")
-      e.preventDefault()
-      onClick(e)
-    }
-
+  const handleClick: MouseEventHandler = () => {
     if (onclickTrigger) {
       triggerToWindowCall(onclickTrigger)
     }

packages/elements-react/src/components/form/social.tsx

@@ -2,8 +2,8 @@ import { useComponents } from "../../context"
 import { useOryFlow } from "../../context"
 import { UiNode, UiNodeInputAttributes } from "@ory/client-fetch"
 import { PropsWithChildren } from "react"
-import { Node } from "./nodes/node"
 import { OryForm } from "./form"
+import { useFormContext } from "react-hook-form"
 
 export type HeadlessSocialButtonsProps = PropsWithChildren<{
   hideDivider?: boolean
@@ -16,6 +16,7 @@ export type HeadlessSocialButtonContainerProps = PropsWithChildren<{
 export type HeadlessSocialButtonProps = PropsWithChildren<{
   node: UiNode
   attributes: UiNodeInputAttributes
+  onClick?: () => void
 }>
 
 export function OryFormSocialButtons({
@@ -25,11 +26,13 @@ export function OryFormSocialButtons({
   const {
     flow: { ui },
   } = useOryFlow()
+  const { setValue } = useFormContext()
 
   // Only get the oidc nodes.
   const filteredNodes = ui.nodes.filter((node) => node.group === "oidc")
 
-  const { SocialButtonContainer, HorizontalDivider } = useComponents()
+  const { SocialButtonContainer, HorizontalDivider, SocialButton } =
+    useComponents()
 
   if (filteredNodes.length === 0) {
     return null
@@ -45,7 +48,20 @@ export function OryFormSocialButtons({
       <SocialButtonContainer nodes={filteredNodes}>
         {children ??
           filteredNodes.map((node, k) => {
-            return <Node node={node} key={k} />
+            return (
+              <SocialButton
+                node={node}
+                key={k}
+                attributes={node.attributes as UiNodeInputAttributes}
+                onClick={() => {
+                  setValue(
+                    "provider",
+                    (node.attributes as UiNodeInputAttributes).value,
+                  )
+                  setValue("method", "oidc")
+                }}
+              />
+            )
           })}
       </SocialButtonContainer>
       {!hideDivider && filteredNodes.length > 0 && otherNodes.length > 0 && (

packages/elements-react/src/global.d.ts

@@ -1,7 +1,12 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
+
 declare module "*.svg" {
-  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
+  import * as React from "react"
+
+  const ReactComponent: React.FunctionComponent<
+    React.ComponentProps<"svg"> & { size?: number }
+  >
 
   export default ReactComponent
 }

packages/elements-react/src/locales/en.json

@@ -172,5 +172,13 @@
   "verification.registration-button": "Sign up",
   "verification.registration-label": "Don't have an account?",
   "verification.title": "Verify your account",
-  "verification.back-button": "Back"
-}
+  "verification.back-button": "Back",
+  "two-step.password.title": "Password",
+  "two-step.password.description": "Enter your password associated with your account",
+  "two-step.code.title": "Email code",
+  "two-step.code.description": "A verification code will be sent to your email",
+  "twos-step.webauthn.title": "Security Key",
+  "twos-step.webauthn.description": "Use your security key to authenticate",
+  "two-step.passkey.title": "Passkey (recommended)",
+  "two-step.passkey.description": "Use your device's for fingerprint or face recognition"
+}