Okta 1177524 passkey promotion nudge

assets/sass/v2/_webauthn.scss

@@ -38,4 +38,53 @@
       margin-bottom: 24px;
     }
   }
+
+  // Passkey promotion splash: illustration + FAQ. Rendered by EnrollWebauthnView
+  // (and reusable elsewhere) when the authenticator displayName is "Passkeys" or
+  // a custom value. Scoped by class rather than parent so the splash can be
+  // reused outside `.oie-enroll-webauthn` without style loss.
+  .oie-passkey-splash-content {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  // Illustration: inline SVG picks up brand color via `currentColor`.
+  // Default color is the widget's primary color; ColorsUtil overrides via
+  // `#okta-sign-in.auth-container .passkey-promotion-illustration { color: ${colors.brand}; }`
+  // when the customer sets `colors.brand`.
+  .passkey-promotion-illustration {
+    display: flex;
+    justify-content: center;
+    margin: 4px 0 24px;
+    color: $primary-color;
+
+    svg {
+      width: 100%;
+      // Natural viewBox width — caps upscaling beyond the design's intrinsic size.
+      max-width: 350px;
+      height: auto;
+    }
+  }
+
+  .passkey-promotion-faq {
+    margin-bottom: 16px;
+  }
+
+  .passkey-promotion-faq-title {
+    margin: 16px 0 4px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.4;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .passkey-promotion-faq-description {
+    margin: 0 0 4px;
+    font-size: 14px;
+    line-height: 1.4;
+  }
 }

playground/mocks/config/responseConfig.js

@@ -55,6 +55,8 @@ const idx = {
     // 'authenticator-enroll-select-authenticator',
     // 'authenticator-enroll-select-authenticator-with-skip',
     // 'authenticator-enroll-webauthn',
+    // 'authenticator-enroll-passkey-promotion',
+    // 'authenticator-enroll-passkey-promotion-security-key',
     // 'authenticator-enroll-grace-period-with-skip',
     // 'authenticator-enroll-grace-period',
     // 'authenticator-enroll-grace-period-login-count-with-skip',

playground/mocks/data/idp/idx/authenticator-enroll-passkey-promotion-security-key.json

@@ -0,0 +1,236 @@
+{
+    "version": "1.0.0",
+    "stateHandle": "02.id.giWXPDpiYM0D3WtvpbioAV6RDOzn2tgoGMDOjRTQ",
+    "expiresAt": "2026-07-13T22:10:32.000Z",
+    "intent": "LOGIN",
+    "remediation": {
+        "type": "array",
+        "value": [
+            {
+                "rel": [
+                    "create-form"
+                ],
+                "name": "enroll-authenticator-promotion",
+                "relatesTo": [
+                    "$.currentAuthenticator"
+                ],
+                "href": "http://localhost:3000/idp/idx/credential/enroll",
+                "method": "POST",
+                "produces": "application/ion+json; okta-version=1.0.0",
+                "value": [
+                    {
+                        "name": "credentials",
+                        "form": {
+                            "value": [
+                                {
+                                    "name": "clientData",
+                                    "label": "Client Data",
+                                    "visible": false,
+                                    "required": true,
+                                    "hint": "webauthn"
+                                },
+                                {
+                                    "name": "attestation",
+                                    "label": "Attestation",
+                                    "visible": false,
+                                    "required": true,
+                                    "hint": "webauthn"
+                                },
+                                {
+                                    "name": "transports",
+                                    "label": "Transports",
+                                    "visible": false,
+                                    "required": true,
+                                    "hint": "webauthn"
+                                },
+                                {
+                                    "name": "clientExtensions",
+                                    "label": "clientExtensions",
+                                    "visible": false,
+                                    "required": true,
+                                    "hint": "webauthn"
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        "name": "stateHandle",
+                        "required": true,
+                        "value": "02.id.giWXPDpiYM0D3WtvpbioAV6RDOzn2tgoGMDOjRTQ",
+                        "visible": false,
+                        "mutable": false
+                    }
+                ],
+                "accepts": "application/json; okta-version=1.0.0"
+            },
+            {
+                "rel": [
+                    "create-form"
+                ],
+                "name": "skip",
+                "href": "http://localhost:3000/idp/idx/skip",
+                "method": "POST",
+                "produces": "application/ion+json; okta-version=1.0.0",
+                "value": [
+                    {
+                        "name": "stateHandle",
+                        "required": true,
+                        "value": "02.id.giWXPDpiYM0D3WtvpbioAV6RDOzn2tgoGMDOjRTQ",
+                        "visible": false,
+                        "mutable": false
+                    }
+                ],
+                "accepts": "application/json; okta-version=1.0.0"
+            }
+        ]
+    },
+    "currentAuthenticator": {
+        "type": "object",
+        "value": {
+            "displayName": "Security Key or Biometric",
+            "catalogKey": "webauthn",
+            "type": "security_key",
+            "key": "webauthn",
+            "id": "aut156w0bsaxREByP0g4",
+            "settings": {},
+            "contextualData": {
+                "activationData": {
+                    "rp": {
+                        "name": "Localhost"
+                    },
+                    "user": {
+                        "displayName": "Enroll Test",
+                        "name": "enroll.test@okta.com",
+                        "id": "00u3odk7tZ2q0qnUN0g5"
+                    },
+                    "pubKeyCredParams": [
+                        {
+                            "type": "public-key",
+                            "alg": -7
+                        },
+                        {
+                            "type": "public-key",
+                            "alg": -257
+                        }
+                    ],
+                    "challenge": "zrTo0mMXyCt90mweh2HL",
+                    "attestation": "direct",
+                    "authenticatorSelection": {
+                        "userVerification": "discouraged"
+                    },
+                    "hints": [
+                        "client-device"
+                    ],
+                    "u2fParams": {
+                        "appid": "https://localhost:3000"
+                    }
+                }
+            }
+        }
+    },
+    "authenticators": {
+        "type": "array",
+        "value": [
+            {
+                "displayName": "Security Key or Biometric",
+                "type": "security_key",
+                "key": "webauthn",
+                "authenticatorid": "aut156w0bsaxREByP0g4",
+                "id": "webauthn-enroll-id-123"
+            }
+        ]
+    },
+    "user": {
+        "type": "object",
+        "value": {
+            "id": "00u3odk7tZ2q0qnUN0g5",
+            "identifier": "enroll.test@okta.com",
+            "profile": {
+                "firstName": "Enroll",
+                "lastName": "Test",
+                "timeZone": "America/Los_Angeles",
+                "locale": "en_US",
+                "email": "e***t@okta.com"
+            }
+        }
+    },
+    "cancel": {
+        "rel": [
+            "create-form"
+        ],
+        "name": "cancel",
+        "href": "http://localhost:3000/idp/idx/cancel",
+        "method": "POST",
+        "produces": "application/ion+json; okta-version=1.0.0",
+        "value": [
+            {
+                "name": "stateHandle",
+                "required": true,
+                "value": "02.id.giWXPDpiYM0D3WtvpbioAV6RDOzn2tgoGMDOjRTQ",
+                "visible": false,
+                "mutable": false
+            }
+        ],
+        "accepts": "application/json; okta-version=1.0.0"
+    },
+    "app": {
+        "type": "object",
+        "value": {
+            "name": "okta_enduser",
+            "label": "Okta Dashboard",
+            "id": "0oa150cwDt3UJgrBT0g4"
+        }
+    },
+    "authentication": {
+        "type": "object",
+        "value": {
+            "protocol": "OAUTH2.0",
+            "issuer": {
+                "name": "Localhost",
+                "uri": "https://localhost:3000"
+            },
+            "request": {
+                "max_age": -1,
+                "scope": "openid profile email okta.users.read.self okta.users.manage.self okta.internal.enduser.read okta.internal.enduser.manage okta.enduser.dashboard.read okta.enduser.dashboard.manage okta.myAccount.sessions.manage okta.internal.navigation.enduser.read",
+                "display": "page",
+                "response_type": "code",
+                "redirect_uri": "http://localhost:3000/enduser/callback",
+                "state": "0yuahXkTvE8zAlbeJ8UST2vOEliz7hWtRU0C5ggGeHwnladYO5XWBuuLV93lGK4N",
+                "code_challenge_method": "S256",
+                "nonce": "bg3FsH5vUUI0C4TZsfnunRj6ggYUJwSULdYs1nA3oLi2ixlAs2qYFXHKZjCGyTwc",
+                "code_challenge": "T5rXHcvtKo5CAChyILaE3AfGqg_7M7vMcjrWHg66WEQ",
+                "response_mode": "query"
+            }
+        }
+    },
+    "authenticatorEnrollments": {
+        "type": "array",
+        "value": [
+            {
+                "type": "password",
+                "key": "okta_password",
+                "id": "laeq0lLCgfujEjvoI0g3",
+                "displayName": "Password",
+                "methods": [
+                    {
+                        "type": "password"
+                    }
+                ]
+            }
+        ]
+    },
+    "enrollmentAuthenticator": {
+        "type": "object",
+        "value": {
+            "type": "security_key",
+            "key": "webauthn",
+            "id": "aut156w0bsaxREByP0g4",
+            "displayName": "Security Key or Biometric",
+            "methods": [
+                {
+                    "type": "webauthn"
+                }
+            ]
+        }
+    }
+}