fix: short-circuit code login on two step card

ory · Oct 23, 2024 · 69495a9 · 69495a9
1 parent 56cc1b7
commit 69495a9
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 14 deletions.
diff --git a/packages/elements-react/src/components/card/card-two-step.tsx b/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

diff --git a/packages/elements-react/src/components/form/form.tsx b/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 =

diff --git a/packages/elements-react/src/theme/default/components/card/auth-methods.tsx b/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" />}

diff --git a/packages/elements-react/src/theme/default/utils/form.ts b/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"
+}