feat: Add conditional webauhtn registration step in sign-in with Pass…

…key autofill
embesozzi · Nov 11, 2023 · 5e5ffbb · 5e5ffbb
1 parent 8c936cb
commit 5e5ffbb
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -33,7 +33,11 @@ In the workshop, the application named **Bank Loan** portal will utilize this ap
 
 ### Webauthn Authenticator Conditional enrollment
 
-In the latest version of the workshop, we added the feature of allowing the user to decide when they want to register the WebAuthn authenticator with the custom SPI (WebAuthn Authenticator Conditional Enrollment), either during the sign-up or sign-in process. Therefore, you will follow the step below:   
+In the latest version of the workshop, we added the feature of allowing the user to decide when they want to register the WebAuthn authenticator with the custom SPI (WebAuthn Authenticator Conditional Enrollment), either during the sign-up or sign-in process.
+
+If the user doesn't have any passkey registered, it will be a common scenario when transitioning from a password-based to a passwordless experience. The sign-in process will ask the user if they want to upgrade to a passkey.
+
+Therefore, you will follow the step below:   
 
 <img src="docs/webauthn-registration-conditional.png" width="60%" height="60%">
 
@@ -57,7 +61,9 @@ In the latest version of the workshop, we added the feature of allowing the user
 
 * Here is the Passkeys Autofill flow :
     <img src="docs/idp-flow-2.png" width="80%" height="80%">
-
+
+You can see we added the WebAuthn Conditional Enrollment step, which will help by asking the user if they want to move to a passwordless experience with a Passkey. The user will be asked if they don't have any passkey registered.
+
 # How to install?
 ## Prerequisites
 
@@ -118,7 +124,6 @@ The **Bank Loan portal** (Case 3) has the following requirements:
      <img src="docs/register.png" width="60%" height="60%">
 
 1.5. Click in Upgrade to Passkey button:
-
 You can do it during the sign-up or sign-in process.   
 
 <img src="docs/webauthn-registration-conditional.png" width="60%" height="60%">
@@ -175,6 +180,11 @@ You can do it during the sign-up or sign-in process.
 3.3 Verify your identity and the you will see will see the Loan portal home:   
     <img src="docs/loan-web-3.png" width="60%" height="60%">   
     <img src="docs/loan-web-4.png" width="60%" height="60%">
+
+(Optional) If the user doesn't have any passkey registered, it will be a common scenario when transitioning from a password-based to a passwordless experience. The sign-in process will ask the user if they want to upgrade to a passkey.   
+
+<img src="docs/webauthn-registration-conditional.png" width="60%" height="60%">
+
 ### Use case 4: Sign in passwordless default experience on the Bank Loan Portal
 
 Here are additional examples using the OOTB Keycloak Browser Passwordless feature, providing you with a better understanding of the default user experience.

diff --git a/keycloak/realm-export-bank.json b/keycloak/realm-export-bank.json
@@ -65,8 +65,8 @@
   "otpPolicyCodeReusable": false,
   "otpSupportedApplications": [
     "totpAppGoogleName",
-    "totpAppFreeOTPName",
-    "totpAppMicrosoftAuthenticatorName"
+    "totpAppMicrosoftAuthenticatorName",
+    "totpAppFreeOTPName"
   ],
   "webAuthnPolicyRpEntityName": "keycloak",
   "webAuthnPolicySignatureAlgorithms": [
@@ -605,16 +605,6 @@
     }
   ],
   "clientScopes": [
-    {
-      "id": "701a2ac5-3057-41f1-a1f5-359722261bf1",
-      "name": "offline_access",
-      "description": "OpenID Connect built-in scope: offline_access",
-      "protocol": "openid-connect",
-      "attributes": {
-        "consent.screen.text": "${offlineAccessScopeConsentText}",
-        "display.on.consent.screen": "true"
-      }
-    },
     {
       "id": "8be2601f-6809-4bac-b509-3238afe86d21",
       "name": "phone",
@@ -658,6 +648,16 @@
         }
       ]
     },
+    {
+      "id": "701a2ac5-3057-41f1-a1f5-359722261bf1",
+      "name": "offline_access",
+      "description": "OpenID Connect built-in scope: offline_access",
+      "protocol": "openid-connect",
+      "attributes": {
+        "consent.screen.text": "${offlineAccessScopeConsentText}",
+        "display.on.consent.screen": "true"
+      }
+    },
     {
       "id": "d3a6b211-5f60-4a46-8b14-9f65b19320dc",
       "name": "role_list",
@@ -746,6 +746,30 @@
         }
       ]
     },
+    {
+      "id": "ae60064e-42bd-4234-911e-b7cd497e6a7b",
+      "name": "acr",
+      "description": "OpenID Connect scope for add acr (authentication context class reference) to the token",
+      "protocol": "openid-connect",
+      "attributes": {
+        "include.in.token.scope": "false",
+        "display.on.consent.screen": "false"
+      },
+      "protocolMappers": [
+        {
+          "id": "3d3a8695-9453-4ab3-8e7a-c7a37e80268d",
+          "name": "acr loa level",
+          "protocol": "openid-connect",
+          "protocolMapper": "oidc-acr-mapper",
+          "consentRequired": false,
+          "config": {
+            "id.token.claim": "true",
+            "access.token.claim": "true",
+            "userinfo.token.claim": "true"
+          }
+        }
+      ]
+    },
     {
       "id": "1920e547-ad0e-48c8-b447-7d7faf40f2af",
       "name": "address",
@@ -777,30 +801,6 @@
         }
       ]
     },
-    {
-      "id": "ae60064e-42bd-4234-911e-b7cd497e6a7b",
-      "name": "acr",
-      "description": "OpenID Connect scope for add acr (authentication context class reference) to the token",
-      "protocol": "openid-connect",
-      "attributes": {
-        "include.in.token.scope": "false",
-        "display.on.consent.screen": "false"
-      },
-      "protocolMappers": [
-        {
-          "id": "3d3a8695-9453-4ab3-8e7a-c7a37e80268d",
-          "name": "acr loa level",
-          "protocol": "openid-connect",
-          "protocolMapper": "oidc-acr-mapper",
-          "consentRequired": false,
-          "config": {
-            "id.token.claim": "true",
-            "access.token.claim": "true",
-            "userinfo.token.claim": "true"
-          }
-        }
-      ]
-    },
     {
       "id": "2382b0c4-28c1-4218-9682-6b0122f09e43",
       "name": "email",
@@ -1162,14 +1162,14 @@
         "subComponents": {},
         "config": {
           "allowed-protocol-mapper-types": [
+            "oidc-usermodel-attribute-mapper",
             "oidc-sha256-pairwise-sub-mapper",
-            "saml-user-property-mapper",
             "saml-user-attribute-mapper",
+            "saml-user-property-mapper",
             "oidc-usermodel-property-mapper",
-            "saml-role-list-mapper",
             "oidc-address-mapper",
-            "oidc-full-name-mapper",
-            "oidc-usermodel-attribute-mapper"
+            "saml-role-list-mapper",
+            "oidc-full-name-mapper"
           ]
         }
       },
@@ -1222,12 +1222,12 @@
           "allowed-protocol-mapper-types": [
             "oidc-full-name-mapper",
             "saml-role-list-mapper",
-            "oidc-address-mapper",
             "saml-user-attribute-mapper",
-            "saml-user-property-mapper",
-            "oidc-usermodel-property-mapper",
             "oidc-sha256-pairwise-sub-mapper",
-            "oidc-usermodel-attribute-mapper"
+            "saml-user-property-mapper",
+            "oidc-usermodel-attribute-mapper",
+            "oidc-address-mapper",
+            "oidc-usermodel-property-mapper"
           ]
         }
       },
@@ -1399,6 +1399,14 @@
           "autheticatorFlow": true,
           "flowAlias": "Browser Passkeys Autofill Conditional Step",
           "userSetupAllowed": false
+        },
+        {
+          "authenticator": "webauthn-conditional-enrollment",
+          "authenticatorFlow": false,
+          "requirement": "REQUIRED",
+          "priority": 14,
+          "autheticatorFlow": false,
+          "userSetupAllowed": false
         }
       ]
     },