From 1816fa4db1bdac4fc6ef7925ab0819b6efa8d68a Mon Sep 17 00:00:00 2001
From: Henning Perl <henning.perl@ory.sh>
Date: Mon, 11 Dec 2023 10:06:51 +0100
Subject: [PATCH] feat: passwordless strategy

---
 src/locales/en.json                           |  2 +
 src/markup-components/components.ts           |  9 ++
 src/react-components/ory/helpers/node.tsx     | 82 +++++++++++--------
 src/react-components/ory/helpers/utils.ts     | 27 +++---
 src/react-components/ory/index.ts             |  1 +
 .../ory/sections/passkey-settings-section.tsx | 32 ++++++++
 .../ory/sections/passwordless-section.tsx     | 25 +++++-
 src/react-components/ory/user-auth-card.tsx   |  7 +-
 .../ory/user-settings-card.tsx                | 15 ++++
 .../ory/user-settings-screen.tsx              | 16 +++-
 10 files changed, 159 insertions(+), 57 deletions(-)
 create mode 100644 src/react-components/ory/sections/passkey-settings-section.tsx

diff --git a/src/locales/en.json b/src/locales/en.json
index 9c522544f..ee5b6f7ef 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -157,6 +157,7 @@
   "settings.navigation-profile": "Profile",
   "settings.navigation-totp": "Authenticator App",
   "settings.navigation-webauthn": "Hardware Tokens",
+  "settings.navigation-passkey": "Passkeys",
   "settings.subtitle-instructions": "Here you can manage settings related to your account. Keep in mind that certain actions require you to re-authenticate.",
   "settings.title": "Account Settings",
   "settings.title-lookup-secret": "Manage 2FA Backup Recovery Codes",
@@ -166,6 +167,7 @@
   "settings.title-profile": "Profile Settings",
   "settings.title-totp": "Manage 2FA TOTP Authenticator App",
   "settings.title-webauthn": "Manage Hardware Tokens",
+  "settings.title-passkey": "Manage Passkeys",
   "verification.registration-button": "Sign up",
   "verification.registration-label": "Don't have an account?",
   "verification.title": "Verify your account"
diff --git a/src/markup-components/components.ts b/src/markup-components/components.ts
index cc8ca5b8f..f188adfed 100644
--- a/src/markup-components/components.ts
+++ b/src/markup-components/components.ts
@@ -58,6 +58,8 @@ import {
   UserSettingsScreenProps,
   WebAuthnSettingsProps,
   WebAuthnSettingsSection as webAuthnSettingsSection,
+  PasskeySettingsSection as passkeySettingsSection,
+  PasskeySettingsProps,
 } from "../react-components"
 import { ComponentWrapper, Context } from "./component-wrapper"
 
@@ -191,6 +193,13 @@ export const WebAuthnSettingsSection = (
   return ComponentWrapper(webAuthnSettingsSection, props, context)
 }
 
+export const PasskeySettingsSection = (
+  props: PasskeySettingsProps,
+  context: Context = {},
+) => {
+  return ComponentWrapper(passkeySettingsSection, props, context)
+}
+
 export const OIDCSettingsSection = (
   props: OIDCSettingsProps,
   context: Context = {},
diff --git a/src/react-components/ory/helpers/node.tsx b/src/react-components/ory/helpers/node.tsx
index 53ade5a7d..8eea8242c 100644
--- a/src/react-components/ory/helpers/node.tsx
+++ b/src/react-components/ory/helpers/node.tsx
@@ -1,4 +1,4 @@
-import { UiNode, UiText } from "@ory/client"
+import {UiNode, UiNodeAttributes, UiText} from "@ory/client"
 import {
   isUiNodeAnchorAttributes,
   isUiNodeImageAttributes,
@@ -106,37 +106,37 @@ export const uiTextToFormattedMessage = (
       // context might provide an array of objects instead of a single object
       // for example when looking up a recovery code
       /*
-      *
-      {
-      "text": {
-          "id": 1050015,
-          "text": "3r9noma8, tv14n5tu, ...",
-          "type": "info",
-          "context": {
-              "secrets": [
-                  {
-                      "context": {
-                          "secret": "3r9noma8"
-                      },
-                      "id": 1050009,
-                      "text": "3r9noma8",
-                      "type": "info"
-                  },
-                  {
-                      "context": {
-                          "secret": "tv14n5tu"
-                      },
-                      "id": 1050009,
-                      "text": "tv14n5tu",
-                      "type": "info"
-                  },
-              ]
-          }
-      },
-      "id": "lookup_secret_codes",
-      "node_type": "text"
-      }
-      */
+            *
+            {
+            "text": {
+                "id": 1050015,
+                "text": "3r9noma8, tv14n5tu, ...",
+                "type": "info",
+                "context": {
+                    "secrets": [
+                        {
+                            "context": {
+                                "secret": "3r9noma8"
+                            },
+                            "id": 1050009,
+                            "text": "3r9noma8",
+                            "type": "info"
+                        },
+                        {
+                            "context": {
+                                "secret": "tv14n5tu"
+                            },
+                            "id": 1050009,
+                            "text": "tv14n5tu",
+                            "type": "info"
+                        },
+                    ]
+                }
+            },
+            "id": "lookup_secret_codes",
+            "node_type": "text"
+            }
+            */
       if (Array.isArray(value)) {
         return {
           ...accumulator,
@@ -182,6 +182,18 @@ export const uiTextToFormattedMessage = (
   )
 }
 
+function dataAttributes(attrs: UiNodeAttributes): Record<string, string> {
+  return Object.entries(attrs).reduce(
+    (accumulator, [key, value]) => {
+      if (key.startsWith("data-")) {
+        accumulator[key] = value
+      }
+      return accumulator
+    },
+    {} as Record<string, string>,
+  )
+}
+
 export const Node = ({
   node,
   className,
@@ -205,6 +217,7 @@ export const Node = ({
         header={formatMessage(node.meta.label)}
         width={node.attributes.width}
         height={node.attributes.height}
+        {...dataAttributes(node.attributes)}
       />
     )
   } else if (isUiNodeTextAttributes(node.attributes)) {
@@ -307,6 +320,7 @@ export const Node = ({
             disabled={attrs.disabled}
             {...(buttonSocialOverrideProps && buttonSocialOverrideProps)}
             {...submit}
+            {...dataAttributes(attrs)}
           />
         ) : (
           <Button
@@ -318,6 +332,7 @@ export const Node = ({
             disabled={attrs.disabled}
             {...(buttonOverrideProps && buttonOverrideProps)}
             {...submit}
+            {...dataAttributes(attrs)}
           />
         )
       case "datetime-local":
@@ -335,6 +350,7 @@ export const Node = ({
             disabled={attrs.disabled}
             defaultChecked={Boolean(attrs.value)}
             dataTestid={`node/input/${attrs.name}`}
+            {...dataAttributes(attrs)}
           />
         )
       default:
@@ -356,6 +372,7 @@ export const Node = ({
             required={attrs.required}
             disabled={attrs.disabled}
             pattern={attrs.pattern}
+            {...dataAttributes(attrs)}
           />
         )
     }
@@ -367,6 +384,7 @@ export const Node = ({
         data-testid={`node/anchor/${node.attributes.id}`}
         className={className}
         position="center"
+        {...dataAttributes(node.attributes)}
       >
         {formatMessage(node.attributes.title)}
       </ButtonLink>
diff --git a/src/react-components/ory/helpers/utils.ts b/src/react-components/ory/helpers/utils.ts
index 06373c196..1464d9aae 100644
--- a/src/react-components/ory/helpers/utils.ts
+++ b/src/react-components/ory/helpers/utils.ts
@@ -3,23 +3,16 @@
 
 import { UiNode } from "@ory/client"
 
-export const hasOidc = (nodes: UiNode[]) =>
-  nodes.some(({ group }) => group === "oidc")
-
-export const hasPassword = (nodes: UiNode[]) =>
-  nodes.some(({ group }) => group === "password")
-
-export const hasWebauthn = (nodes: UiNode[]) =>
-  nodes.some(({ group }) => group === "webauthn")
-
-export const hasLookupSecret = (nodes: UiNode[]) =>
-  nodes.some(({ group }) => group === "lookup_secret")
-
-export const hasTotp = (nodes: UiNode[]) =>
-  nodes.some(({ group }) => group === "totp")
-
-export const hasCode = (nodes: UiNode[]) =>
-  nodes.some(({ group }) => group === "code")
+export const hasGroup = (group: string) => (nodes: UiNode[]) =>
+  nodes.some(({ type, group: g }) => type === "input" && g === group)
+
+export const hasOidc = hasGroup("oidc")
+export const hasPassword = hasGroup("password")
+export const hasWebauthn = hasGroup("webauthn")
+export const hasPasskey = hasGroup("passkey")
+export const hasLookupSecret = hasGroup("lookup_secret")
+export const hasTotp = hasGroup("totp")
+export const hasCode = hasGroup("code")
 
 export const hasHiddenIdentifier = (nodes: UiNode[]) =>
   nodes.some(
diff --git a/src/react-components/ory/index.ts b/src/react-components/ory/index.ts
index daa606d20..360726401 100644
--- a/src/react-components/ory/index.ts
+++ b/src/react-components/ory/index.ts
@@ -20,6 +20,7 @@ export * from "./sections/profile-settings-section"
 export * from "./sections/registration-section"
 export * from "./sections/totp-settings-section"
 export * from "./sections/webauthn-settings-section"
+export * from "./sections/passkey-settings-section"
 export * from "./user-auth-card"
 export * from "./user-error-card"
 export * from "./user-settings-card"
diff --git a/src/react-components/ory/sections/passkey-settings-section.tsx b/src/react-components/ory/sections/passkey-settings-section.tsx
new file mode 100644
index 000000000..943a1ec0d
--- /dev/null
+++ b/src/react-components/ory/sections/passkey-settings-section.tsx
@@ -0,0 +1,32 @@
+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"
+
+export interface PasskeySettingsProps {
+  flow: SettingsFlow
+}
+
+export const PasskeySettingsSection = ({
+  flow,
+}: PasskeySettingsProps): JSX.Element | null => {
+  const filter = {
+    nodes: flow.ui.nodes,
+    groups: ["passkey", "webauthn"],
+    withoutDefaultGroup: true,
+  }
+
+  return hasPasskey(flow.ui.nodes) ? (
+    <div>
+      <FilterFlowNodes
+        filter={{ ...filter, attributes: "submit,button" }}
+        buttonOverrideProps={{ fullWidth: false }}
+      />
+      <FilterFlowNodes
+        filter={{ ...filter, excludeAttributes: "submit,button" }}
+      />
+    </div>
+  ) : null
+}
diff --git a/src/react-components/ory/sections/passwordless-section.tsx b/src/react-components/ory/sections/passwordless-section.tsx
index 1460dcece..d3bd2c92b 100644
--- a/src/react-components/ory/sections/passwordless-section.tsx
+++ b/src/react-components/ory/sections/passwordless-section.tsx
@@ -3,19 +3,19 @@ import { JSX } from "react"
 import { gridStyle } from "../../../theme"
 import { FilterFlowNodes } from "../helpers/filter-flow-nodes"
 import { SelfServiceFlow } from "../helpers/types"
-import { hasWebauthn } from "../helpers/utils"
+import { hasPasskey, hasWebauthn } from "../helpers/utils"
 
 export const PasswordlessSection = (
   flow: SelfServiceFlow,
 ): JSX.Element | null => {
-  return hasWebauthn(flow.ui.nodes) ? (
+  return hasWebauthn(flow.ui.nodes) || hasPasskey(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"],
+            groups: ["webauthn", "passkey"],
             withoutDefaultAttributes: true,
             excludeAttributes: ["hidden", "button", "submit"], // the form will take care of hidden fields
           }}
@@ -24,7 +24,24 @@ export const PasswordlessSection = (
       <FilterFlowNodes
         filter={{
           nodes: flow.ui.nodes,
-          groups: ["webauthn"],
+          groups: ["webauthn", "passkey"],
+          withoutDefaultAttributes: true,
+          attributes: ["button", "submit"],
+        }}
+      />
+    </div>
+  ) : null
+}
+
+export const PasswordlessLoginSection = (
+  flow: SelfServiceFlow,
+): JSX.Element | null => {
+  return hasWebauthn(flow.ui.nodes) || hasPasskey(flow.ui.nodes) ? (
+    <div className={gridStyle({ gap: 32 })}>
+      <FilterFlowNodes
+        filter={{
+          nodes: flow.ui.nodes,
+          groups: ["webauthn", "passkey"],
           withoutDefaultAttributes: true,
           attributes: ["button", "submit"],
         }}
diff --git a/src/react-components/ory/user-auth-card.tsx b/src/react-components/ory/user-auth-card.tsx
index 75253b696..0fefad815 100644
--- a/src/react-components/ory/user-auth-card.tsx
+++ b/src/react-components/ory/user-auth-card.tsx
@@ -33,7 +33,10 @@ import { LinkSection } from "./sections/link-section"
 import { LoggedInInfo } from "./sections/logged-info"
 import { LoginSection } from "./sections/login-section"
 import { OIDCSection } from "./sections/oidc-section"
-import { PasswordlessSection } from "./sections/passwordless-section"
+import {
+  PasswordlessLoginSection,
+  PasswordlessSection,
+} from "./sections/passwordless-section"
 import { RegistrationSection } from "./sections/registration-section"
 
 export interface LoginSectionAdditionalProps {
@@ -310,7 +313,7 @@ export const UserAuthCard = ({
 
   switch (flowType) {
     case "login":
-      $passwordless = PasswordlessSection(flow)
+      $passwordless = PasswordlessLoginSection(flow)
       $oidc = OIDCSection(flow)
       $code = AuthCodeSection({ nodes: flow.ui.nodes })
 
diff --git a/src/react-components/ory/user-settings-card.tsx b/src/react-components/ory/user-settings-card.tsx
index 4b205a768..3657b9dbf 100644
--- a/src/react-components/ory/user-settings-card.tsx
+++ b/src/react-components/ory/user-settings-card.tsx
@@ -11,6 +11,7 @@ import {
 import {
   hasLookupSecret,
   hasOidc,
+  hasPasskey,
   hasPassword,
   hasTotp,
   hasWebauthn,
@@ -22,12 +23,14 @@ import { ProfileSettingsSection } from "./sections/profile-settings-section"
 import { TOTPSettingsSection } from "./sections/totp-settings-section"
 import { WebAuthnSettingsSection } from "./sections/webauthn-settings-section"
 import { useIntl } from "react-intl"
+import { PasskeySettingsSection } from "./sections/passkey-settings-section"
 
 export type UserSettingsFlowType =
   | "profile"
   | "password"
   | "totp"
   | "webauthn"
+  | "passkey"
   | "oidc"
   | "lookupSecret"
 
@@ -92,6 +95,18 @@ export const UserSettingsCard = ({
         $flow = <WebAuthnSettingsSection flow={flow} />
       }
       break
+    case "passkey":
+      if (hasPasskey(flow.ui.nodes)) {
+        hasFlow = true
+        cardTitle =
+          title ??
+          intl.formatMessage({
+            id: "settings.title-passkey",
+            defaultMessage: "Manage Passkeys",
+          })
+        $flow = <PasskeySettingsSection flow={flow} />
+      }
+      break
     case "lookupSecret":
       if (hasLookupSecret(flow.ui.nodes)) {
         hasFlow = true
diff --git a/src/react-components/ory/user-settings-screen.tsx b/src/react-components/ory/user-settings-screen.tsx
index 34c1183ba..2617dc7de 100644
--- a/src/react-components/ory/user-settings-screen.tsx
+++ b/src/react-components/ory/user-settings-screen.tsx
@@ -12,6 +12,8 @@ import {
   hasLookupSecret,
   hasTotp,
   hasWebauthn,
+  hasPasskey,
+  hasGroup,
 } from "./helpers/utils"
 
 /**
@@ -93,6 +95,15 @@ const nav = ({
               iconLeft: "key",
               testId: "webauthn",
             },
+            hasPasskey(flow.ui.nodes) && {
+              name: intl.formatMessage({
+                id: "settings.navigation-passkey",
+                defaultMessage: "Passkeys",
+              }),
+              href: "#passkey",
+              iconLeft: "fingerprint",
+              testId: "passkey",
+            },
             hasTotp(flow.ui.nodes) && {
               name: intl.formatMessage({
                 id: "settings.navigation-totp",
@@ -153,12 +164,13 @@ const body = ({
         "oidc",
         "lookupSecret",
         "webauthn",
+        "passkey",
         "totp",
       ] as UserSettingsFlowType[]
     ).map((flowType) => {
       const $card = <UserSettingsCard flowType={flowType} flow={flow} />
-      if (!$card) {
-        return null
+      if (!$card || !hasGroup(flowType)(flow.ui.nodes)) {
+        return <></>
       }
       return (
         <div