From d8e745196ec22a92d691a78bf8ec006afdffef8f Mon Sep 17 00:00:00 2001
From: Henning Perl <henning.perl@ory.sh>
Date: Tue, 6 Feb 2024 13:59:00 +0100
Subject: [PATCH] feat: render profile nodes, saner js setup

---
 .../ory/sections/passkey-settings-section.tsx | 13 ++---
 .../ory/sections/passwordless-section.tsx     | 54 ++++++++++++++-----
 .../ory/sections/profile-section.tsx          | 53 +++++++++---------
 .../sections/webauthn-settings-section.tsx    |  4 +-
 src/react-components/ory/user-auth-card.tsx   | 44 ++++++++++++---
 5 files changed, 117 insertions(+), 51 deletions(-)

diff --git a/src/react-components/ory/sections/passkey-settings-section.tsx b/src/react-components/ory/sections/passkey-settings-section.tsx
index 943a1ec0d..edea27496 100644
--- a/src/react-components/ory/sections/passkey-settings-section.tsx
+++ b/src/react-components/ory/sections/passkey-settings-section.tsx
@@ -1,9 +1,9 @@
 import { JSX } from "react"
 
 import { SettingsFlow } from "@ory/client"
-import { gridStyle } from "../../../theme"
 import { FilterFlowNodes } from "../helpers/filter-flow-nodes"
 import { hasPasskey } from "../helpers/utils"
+import { gridStyle } from "../../../theme"
 
 export interface PasskeySettingsProps {
   flow: SettingsFlow
@@ -14,18 +14,19 @@ export const PasskeySettingsSection = ({
 }: PasskeySettingsProps): JSX.Element | null => {
   const filter = {
     nodes: flow.ui.nodes,
-    groups: ["passkey", "webauthn"],
+    groups: "passkey",
     withoutDefaultGroup: true,
   }
 
   return hasPasskey(flow.ui.nodes) ? (
-    <div>
+    <div className={gridStyle({ gap: 32 })}>
       <FilterFlowNodes
-        filter={{ ...filter, attributes: "submit,button" }}
-        buttonOverrideProps={{ fullWidth: false }}
+        filter={{ ...filter, excludeAttributes: "onclick,button" }}
       />
+
       <FilterFlowNodes
-        filter={{ ...filter, excludeAttributes: "submit,button" }}
+        filter={{ ...filter, attributes: "onclick,button" }}
+        buttonOverrideProps={{ fullWidth: false }}
       />
     </div>
   ) : null
diff --git a/src/react-components/ory/sections/passwordless-section.tsx b/src/react-components/ory/sections/passwordless-section.tsx
index 84b83fffa..a9ed1343b 100644
--- a/src/react-components/ory/sections/passwordless-section.tsx
+++ b/src/react-components/ory/sections/passwordless-section.tsx
@@ -8,14 +8,14 @@ import { hasPasskey, hasWebauthn } from "../helpers/utils"
 export const PasswordlessSection = (
   flow: SelfServiceFlow,
 ): JSX.Element | null => {
-  return hasWebauthn(flow.ui.nodes) || hasPasskey(flow.ui.nodes) ? (
+  return hasWebauthn(flow.ui.nodes) ? (
     <div className={gridStyle({ gap: 32 })}>
       <div className={gridStyle({ gap: 16 })}>
         <FilterFlowNodes
           filter={{
             nodes: flow.ui.nodes,
             // we will also map default fields here but not oidc and password fields
-            groups: ["webauthn", "passkey"],
+            groups: ["webauthn"],
             withoutDefaultAttributes: true,
             excludeAttributes: ["hidden", "button", "submit"], // the form will take care of hidden fields
           }}
@@ -24,7 +24,7 @@ export const PasswordlessSection = (
       <FilterFlowNodes
         filter={{
           nodes: flow.ui.nodes,
-          groups: ["webauthn", "passkey"],
+          groups: ["webauthn"],
           withoutDefaultAttributes: true,
           attributes: ["button", "submit"],
         }}
@@ -33,24 +33,52 @@ export const PasswordlessSection = (
   ) : null
 }
 
-export const PasswordlessLoginSection = (
-  flow: SelfServiceFlow,
-): JSX.Element | null => {
-  if (hasPasskey(flow.ui.nodes)) {
-    return (
-      <div className={gridStyle({ gap: 32 })}>
+export const PasskeySection = (flow: SelfServiceFlow): JSX.Element | null => {
+  return hasPasskey(flow.ui.nodes) ? (
+    <div className={gridStyle({ gap: 32 })}>
+      <div className={gridStyle({ gap: 16 })}>
         <FilterFlowNodes
           filter={{
             nodes: flow.ui.nodes,
-            groups: ["webauthn", "passkey"],
+            // we will also map default fields here but not oidc and password fields
+            groups: ["passkey"],
             withoutDefaultAttributes: true,
-            attributes: ["button", "submit"],
+            excludeAttributes: ["hidden", "button", "submit"], // the form will take care of hidden fields
           }}
         />
       </div>
-    )
-  }
+      <FilterFlowNodes
+        filter={{
+          nodes: flow.ui.nodes,
+          groups: ["passkey"],
+          withoutDefaultAttributes: true,
+          attributes: ["button", "submit"],
+        }}
+      />
+    </div>
+  ) : null
+}
+
+export const PasskeyLoginSection = (
+  flow: SelfServiceFlow,
+): JSX.Element | null => {
+  return hasPasskey(flow.ui.nodes) ? (
+    <div className={gridStyle({ gap: 32 })}>
+      <FilterFlowNodes
+        filter={{
+          nodes: flow.ui.nodes,
+          groups: ["passkey"],
+          withoutDefaultAttributes: true,
+          attributes: ["button", "submit"],
+        }}
+      />
+    </div>
+  ) : null
+}
 
+export const PasswordlessLoginSection = (
+  flow: SelfServiceFlow,
+): JSX.Element | null => {
   if (hasWebauthn(flow.ui.nodes)) {
     return (
       <div className={gridStyle({ gap: 32 })}>
diff --git a/src/react-components/ory/sections/profile-section.tsx b/src/react-components/ory/sections/profile-section.tsx
index ecc0cb4cf..7ac582c3a 100644
--- a/src/react-components/ory/sections/profile-section.tsx
+++ b/src/react-components/ory/sections/profile-section.tsx
@@ -3,8 +3,13 @@ import { JSX } from "react"
 import { SettingsFlow } from "@ory/client"
 import { gridStyle } from "../../../theme"
 import { FilterFlowNodes } from "../helpers/filter-flow-nodes"
-import {SelfServiceFlow} from "../helpers/types";
-import {hasPasskey, hasPassword, hasProfile, hasWebauthn} from "../helpers/utils";
+import { SelfServiceFlow } from "../helpers/types"
+import {
+  hasPasskey,
+  hasPassword,
+  hasProfile,
+  hasWebauthn,
+} from "../helpers/utils"
 
 export interface ProfileSettingsProps {
   flow: SettingsFlow
@@ -28,26 +33,26 @@ export const ProfileSettingsSection = ({
 }
 
 export const ProfileRegistrationSection = (
-    flow: SelfServiceFlow,
+  flow: SelfServiceFlow,
 ): JSX.Element | null => {
-    return hasProfile(flow.ui.nodes) ? (
-        <div className={gridStyle({ gap: 32 })}>
-            <div className={gridStyle({ gap: 16 })}>
-                <FilterFlowNodes
-                    filter={{
-                        nodes: flow.ui.nodes,
-                        groups: ["profile"],
-                        excludeAttributes: "submit",
-                    }}
-                />
-            </div>
-            <FilterFlowNodes
-                filter={{
-                    nodes: flow.ui.nodes,
-                    groups: ["profile"],
-                    attributes: "submit",
-                }}
-            />
-        </div>
-    ) : null
-}
\ No newline at end of file
+  return hasProfile(flow.ui.nodes) ? (
+    <div className={gridStyle({ gap: 32 })}>
+      <div className={gridStyle({ gap: 16 })}>
+        <FilterFlowNodes
+          filter={{
+            nodes: flow.ui.nodes,
+            groups: ["profile"],
+            excludeAttributes: "submit",
+          }}
+        />
+      </div>
+      <FilterFlowNodes
+        filter={{
+          nodes: flow.ui.nodes,
+          groups: ["profile"],
+          attributes: "submit",
+        }}
+      />
+    </div>
+  ) : null
+}
diff --git a/src/react-components/ory/sections/webauthn-settings-section.tsx b/src/react-components/ory/sections/webauthn-settings-section.tsx
index 7e9d0981f..5dd46b52e 100644
--- a/src/react-components/ory/sections/webauthn-settings-section.tsx
+++ b/src/react-components/ory/sections/webauthn-settings-section.tsx
@@ -21,10 +21,10 @@ export const WebAuthnSettingsSection = ({
   return hasWebauthn(flow.ui.nodes) ? (
     <div className={gridStyle({ gap: 32 })}>
       <FilterFlowNodes
-        filter={{ ...filter, excludeAttributes: "submit,button" }}
+        filter={{ ...filter, excludeAttributes: "onclick,button" }}
       />
       <FilterFlowNodes
-        filter={{ ...filter, attributes: "submit,button" }}
+        filter={{ ...filter, attributes: "onclick,button" }}
         buttonOverrideProps={{ fullWidth: false }}
       />
     </div>
diff --git a/src/react-components/ory/user-auth-card.tsx b/src/react-components/ory/user-auth-card.tsx
index 944cbff19..6fedd5eb5 100644
--- a/src/react-components/ory/user-auth-card.tsx
+++ b/src/react-components/ory/user-auth-card.tsx
@@ -36,6 +36,8 @@ import { LoggedInInfo } from "./sections/logged-info"
 import { LoginSection } from "./sections/login-section"
 import { OIDCSection } from "./sections/oidc-section"
 import {
+  PasskeyLoginSection,
+  PasskeySection,
   PasswordlessLoginSection,
   PasswordlessSection,
 } from "./sections/passwordless-section"
@@ -200,7 +202,8 @@ export const UserAuthCard = ({
   let $flow: JSX.Element | null = null
   let $oidc: JSX.Element | null = null
   let $code: JSX.Element | null = null
-  let $passwordless: JSX.Element | null = null
+  let $passwordlessWebauthn: JSX.Element | null = null
+  let $passkey: JSX.Element | null = null
   let $profile: JSX.Element | null = null
   let message: MessageSectionProps | null = null
 
@@ -217,7 +220,13 @@ export const UserAuthCard = ({
   // passwordless can be shown if the user is not logged in (e.g. exclude 2FA screen) or if the flow is a registration flow.
   // we want the login section to handle passwordless as well when we have a 2FA screen.
   const canShowPasswordless = () =>
-    !!$passwordless &&
+    !!$passwordlessWebauthn &&
+    (!isLoggedIn(flow as LoginFlow) || flowType === "registration")
+
+  // passkey can be shown if the user is not logged in (e.g. exclude 2FA screen) or if the flow is a registration flow.
+  // we want the login section to handle passwordless as well when we have a 2FA screen.
+  const canShowPasskey = () =>
+    !!$passkey &&
     (!isLoggedIn(flow as LoginFlow) || flowType === "registration")
 
   const canShowProfile = () => !!$profile && flowType === "registration"
@@ -257,7 +266,7 @@ export const UserAuthCard = ({
           <FilterFlowNodes
             filter={{
               nodes: flow.ui.nodes,
-              groups: ["passkey", "webauthn"],
+              groups: ["passkey"],
               withoutDefaultGroup: true,
             }}
           />
@@ -344,7 +353,8 @@ export const UserAuthCard = ({
 
   switch (flowType) {
     case "login":
-      $passwordless = PasswordlessLoginSection(flow)
+      $passwordlessWebauthn = PasswordlessLoginSection(flow)
+      $passkey = PasskeyLoginSection(flow)
       $oidc = OIDCSection(flow)
       $code = AuthCodeSection({ nodes: flow.ui.nodes })
 
@@ -382,7 +392,8 @@ export const UserAuthCard = ({
       }
       break
     case "registration":
-      $passwordless = PasswordlessSection(flow)
+      $passwordlessWebauthn = PasswordlessSection(flow)
+      $passkey = PasskeySection(flow)
       $profile = ProfileRegistrationSection(flow)
       $oidc = OIDCSection(flow)
       $code = AuthCodeSection({ nodes: flow.ui.nodes })
@@ -518,6 +529,25 @@ export const UserAuthCard = ({
           </>
         )}
 
+        {canShowPasskey() && (
+          <>
+            <Divider />
+            <UserAuthForm
+              flow={flow}
+              submitOnEnter={true}
+              onSubmit={onSubmit}
+              data-testid={"passkey-flow"}
+              formFilterOverride={{
+                nodes: flow.ui.nodes,
+                groups: ["default", "passkey"],
+                attributes: "hidden",
+              }}
+            >
+              {$passkey}
+            </UserAuthForm>
+          </>
+        )}
+
         {canShowPasswordless() && (
           <>
             <Divider />
@@ -528,13 +558,15 @@ export const UserAuthCard = ({
               data-testid={"passwordless-flow"}
               formFilterOverride={{
                 nodes: flow.ui.nodes,
+                groups: ["default", "webauthn"],
                 attributes: "hidden",
               }}
             >
-              {$passwordless}
+              {$passwordlessWebauthn}
             </UserAuthForm>
           </>
         )}
+
         {message && MessageSection(message)}
       </div>
     </Card>