fix: short-circuit code login on two step card

packages/elements-react/api-report/elements-react.api.json

@@ -1662,7 +1662,7 @@
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "declare function OryForm({ children }: "
+              "text": "declare function OryForm({ children, onAfterSubmit }: "
             },
             {
               "kind": "Reference",
@@ -1696,7 +1696,7 @@
           "overloadIndex": 1,
           "parameters": [
             {
-              "parameterName": "{ children }",
+              "parameterName": "{ children, onAfterSubmit }",
               "parameterTypeTokenRange": {
                 "startIndex": 1,
                 "endIndex": 2
@@ -1989,6 +1989,10 @@
               "text": "PropsWithChildren",
               "canonicalReference": "@types/react!React.PropsWithChildren:type"
             },
+            {
+              "kind": "Content",
+              "text": "<{\n    onAfterSubmit?: (method: string | number | boolean | undefined) => void;\n}>"
+            },
             {
               "kind": "Content",
               "text": ";"
@@ -1999,7 +2003,7 @@
           "name": "OryFormProps",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 2
+            "endIndex": 3
           }
         },
         {

packages/elements-react/api-report/elements-react.api.md

@@ -191,7 +191,7 @@ export type OryFlowComponents = {
 export type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer;
 
 // @public (undocumented)
-export function OryForm({ children }: OryFormProps): string | react_jsx_runtime.JSX.Element;
+export function OryForm({ children, onAfterSubmit }: OryFormProps): string | react_jsx_runtime.JSX.Element;
 
 // @public
 export function OryFormGroupDivider(): react_jsx_runtime.JSX.Element | null;
@@ -221,7 +221,9 @@ export type OryFormOidcRootProps = PropsWithChildren<{
 }>;
 
 // @public (undocumented)
-export type OryFormProps = PropsWithChildren;
+export type OryFormProps = PropsWithChildren<{
+    onAfterSubmit?: (method: string | number | boolean | undefined) => void;
+}>;
 
 // @public (undocumented)
 export type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {

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

@@ -8,19 +8,21 @@ import {
   UiNodeInputAttributes,
 } from "@ory/client-fetch"
 import { useState } from "react"
+import { useFormContext } from "react-hook-form"
 import { OryCard, OryCardContent, OryCardFooter } from "."
 import { useComponents, useNodeSorter, useOryFlow } from "../../context"
 import { useNodesGroups } from "../../util/ui"
 import { OryForm } from "../form/form"
 import { OryCardValidationMessages } from "../form/messages"
 import { Node } from "../form/nodes/node"
 import { OryFormSocialButtonsForm } from "../form/social"
-import { OryCardHeader } from "./header"
 import {
   filterZeroStepGroups,
   getFinalNodes,
   isChoosingMethod,
 } from "./card-two-step.utils"
+import { OryCardHeader } from "./header"
+import { isGroupImmediateSubmit } from "../../theme/default/utils/form"
 
 enum ProcessStep {
   ProvideIdentifier,
@@ -39,7 +41,7 @@ export function OryTwoStepCard() {
   const [selectedGroup, setSelectedGroup] = useState<
     UiNodeGroupEnum | undefined
   >()
-  const { Form, Card } = useComponents()
+  const { Form } = useComponents()
   const { flowType } = useOryFlow()
 
   const nodeSorter = useNodeSorter()
@@ -80,7 +82,13 @@ export function OryTwoStepCard() {
         {step === ProcessStep.ProvideIdentifier && hasOidc && (
           <OryFormSocialButtonsForm />
         )}
-        <OryForm>
+        <OryForm
+          onAfterSubmit={(method) =>
+            isGroupImmediateSubmit(method + "")
+              ? setSelectedGroup(method as UiNodeGroupEnum)
+              : undefined
+          }
+        >
           <Form.Group>
             {step === ProcessStep.ProvideIdentifier &&
               zeroStepGroups
@@ -91,13 +99,10 @@ export function OryTwoStepCard() {
                 {flowType === FlowType.Login && (
                   <BackButton href={config.project.login_ui_url} />
                 )}
-                {options.map((option) => (
-                  <Card.AuthMethodListItem
-                    key={option}
-                    group={option}
-                    onClick={() => setSelectedGroup(option)}
-                  />
-                ))}
+                <AuthMethodList
+                  options={options}
+                  setSelectedGroup={setSelectedGroup}
+                />
               </>
             )}
             {step === ProcessStep.ExecuteAuthMethod && (
@@ -116,6 +121,33 @@ export function OryTwoStepCard() {
   )
 }
 
+type AuthMethodListProps = {
+  options: UiNodeGroupEnum[]
+  setSelectedGroup: (group: UiNodeGroupEnum) => void
+}
+
+function AuthMethodList({ options, setSelectedGroup }: AuthMethodListProps) {
+  const { Card } = useComponents()
+  const { setValue } = useFormContext()
+
+  const handleClick = (group: UiNodeGroupEnum) => {
+    if (isGroupImmediateSubmit(group)) {
+      // If the method is "immediate submit" (e.g. the method's submit button should be triggered immediately)
+      // then the methid needs to be added to the form data.
+      setValue("method", group)
+    } else {
+      setSelectedGroup(group)
+    }
+  }
+  return options.map((option) => (
+    <Card.AuthMethodListItem
+      key={option}
+      group={option}
+      onClick={() => handleClick(option)}
+    />
+  ))
+}
+
 type BackButtonProps = {
   onClick?: () => void
   href?: string

packages/elements-react/src/components/card/card-two-step.utils.ts

@@ -4,7 +4,6 @@
 import { UiNode, UiNodeGroupEnum } from "@ory/client-fetch"
 
 export function isChoosingMethod(uiNodes: UiNode[]): boolean {
-  console.log(uiNodes)
   return (
     uiNodes.some(
       (node) =>

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

@@ -182,9 +182,11 @@ type DeepPartialTwoLevels<T> = {
 
 export type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>
 
-export type OryFormProps = PropsWithChildren
+export type OryFormProps = PropsWithChildren<{
+  onAfterSubmit?: (method: string | number | boolean | undefined) => void
+}>
 
-export function OryForm({ children }: OryFormProps) {
+export function OryForm({ children, onAfterSubmit }: OryFormProps) {
   const { Form } = useComponents()
   const flowContainer = useOryFlow()
   const methods = useForm({
@@ -272,6 +274,7 @@ export function OryForm({ children }: OryFormProps) {
         })
         break
     }
+    onAfterSubmit?.(data.method)
   }
 
   const hasMethods =

packages/elements-react/src/theme/default/components/card/auth-methods.tsx

@@ -3,11 +3,11 @@
 
 import { useIntl } from "react-intl"
 import { OryCardAuthMethodListItemProps } from "@ory/elements-react"
-
 import code from "../../assets/icons/code.svg"
 import passkey from "../../assets/icons/passkey.svg"
 import password from "../../assets/icons/password.svg"
 import webauthn from "../../assets/icons/webauthn.svg"
+import { isGroupImmediateSubmit } from "../../utils/form"
 
 const iconsMap: Record<string, typeof code> = {
   code,
@@ -27,8 +27,9 @@ export function DefaultAuthMethodListItem({
   return (
     <div className="w-full hover:bg-forms-bg-hover px-2 py-1 rounded">
       <button
-        className="flex text-left py-2 gap-3 cursor-pointer "
+        className="flex text-left py-2 gap-3 cursor-pointer"
         onClick={onClick}
+        type={isGroupImmediateSubmit(group) ? "submit" : "button"}
       >
         <div className={"flex-none w-4 h-4 mt-[2px]"}>
           {Icon && <Icon size={20} className="text-forms-fg-default" />}

packages/elements-react/src/theme/default/utils/form.ts

@@ -0,0 +1,7 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+export function isGroupImmediateSubmit(group: string) {
+  // TODO: Other methods might also benefit from this.
+  return group === "code"
+}