feat: add support for passkey nodes (#306)

Author: hperl

nodemon.json

@@ -7,6 +7,9 @@
     "COOKIE_SECRET": "I_AM_VERY_SECRET",
     "CSRF_COOKIE_SECRET": "I_AM_VERY_SECRET_TOO",
     "DANGEROUSLY_DISABLE_SECURE_CSRF_COOKIES": "true",
-    "ORY_SDK_URL": "http://localhost:4000"
+    "ORY_SDK_URL": "http://localhost:4433",
+    "KRATOS_PUBLIC_URL": "http://localhost:4433",
+    "KRATOS_ADMIN_URL": "http://localhost:4434",
+    "PORT": "4455"
   }
 }

src/routes/login.ts

@@ -173,7 +173,7 @@ export const createLoginRoute: RouteCreator =
           nodes: flow.ui.nodes,
           webAuthnHandler: filterNodesByGroups({
             nodes: flow.ui.nodes,
-            groups: ["webauthn"],
+            groups: ["webauthn", "passkey"],
             attributes: ["button"],
             withoutDefaultAttributes: true,
             withoutDefaultGroup: true,

src/routes/registration.ts

@@ -79,20 +79,21 @@ export const createRegistrationRoute: RouteCreator =
             flow.oauth2_login_request.challenge,
           )
         }
-        res.render("registration", {
+        const webAuthnHandler = filterNodesByGroups({
           nodes: flow.ui.nodes,
-          webAuthnHandler: filterNodesByGroups({
-            nodes: flow.ui.nodes,
-            groups: ["webauthn"],
-            attributes: ["button"],
-            withoutDefaultAttributes: true,
-            withoutDefaultGroup: true,
+          groups: ["webauthn", "passkey"],
+          attributes: ["button"],
+          withoutDefaultAttributes: true,
+          withoutDefaultGroup: true,
+        })
+          .filter(({ attributes }) => isUiNodeInputAttributes(attributes))
+          .map(({ attributes }) => {
+            return (attributes as UiNodeInputAttributes).onclick
           })
-            .filter(({ attributes }) => isUiNodeInputAttributes(attributes))
-            .map(({ attributes }) => {
-              return (attributes as UiNodeInputAttributes).onclick
-            })
-            .filter((onClickAction) => !!onClickAction),
+          .filter((onClickAction) => !!onClickAction)
+        res.render("registration", {
+          nodes: flow.ui.nodes,
+          webAuthnHandler: webAuthnHandler,
           card: UserAuthCard(
             {
               flow,

src/routes/settings.ts

@@ -79,7 +79,7 @@ export const createSettingsRoute: RouteCreator =
           settingsScreen: settingsScreen.Body,
           webAuthnHandler: filterNodesByGroups({
             nodes: flow.ui.nodes,
-            groups: ["webauthn"],
+            groups: ["webauthn", "passkey"],
             attributes: ["button"],
             withoutDefaultAttributes: true,
             withoutDefaultGroup: true,