Improve the FIDO registration and sign-in addition experience

apps/authentication-portal/src/main/resources/org/wso2/carbon/identity/application/authentication/endpoint/i18n/Resources.properties

@@ -82,8 +82,8 @@ domain=Domain
 submit=Submit
 inc=Inc
 all.rights.reserved=All rights reserved
-verification=Verification
-touch.your.u2f.device=Touch your FIDO device to Proceed
+verification=Authenticate using your Security Key/Biometrics
+touch.your.u2f.device=Follow the instructions given by your browser to authenticate yourself using a security key or biometrics in your device.
 authentication.error=Authentication Error!
 something.went.wrong.during.authentication=Something went wrong during the authentication process. Please try signing in again.
 misconfiguration.error=Misconfiguration Error!
@@ -231,3 +231,12 @@ authentication.attempt.failed=Authentication attempt failed.
 authorization.failed=Authorization Failed.
 provided.username.already.exists=Authentication error! Provided username already exists.
 error.user.existence=Error while checking the user details.
+
+fido.failed.instruction=Click on proceed and follow the instructions given by your browser to authenticate yourself using a security key or biometrics in your device.
+fido.error=Sign In with security key/biometrics interrupted!
+fido.registration.info=Haven’t registered your security key? Register in
+fido.learn.more.part.one=Need help? Contact
+fido.retry=Retry
+fido.proceed=Proceed
+fido.cancel=Cancel
+fido.authenticator=Security Key

apps/authentication-portal/src/main/resources/org/wso2/carbon/identity/application/authentication/endpoint/i18n/Resources_fr_FR.properties

@@ -82,8 +82,8 @@ domain=Domaine
 submit=Soumettre
 inc=Inc
 all.rights.reserved=Tous droits réservés
-verification=Vérification
-touch.your.u2f.device=Touchez votre appareil FIDO pour continuer
+verification=Authentifiez-vous à l'aide de votre clé de sécurité/données biométriques
+touch.your.u2f.device=Suivez les instructions données par votre navigateur pour vous authentifier à l'aide d'une clé de sécurité FIDO2 ou de la biométrie de votre appareil.
 authentication.error=Erreur d'authentification !
 something.went.wrong.during.authentication=Quelque chose s'est mal passé pendant le processus d'authentification. Veuillez essayer de vous connecter à nouveau.
 misconfiguration.error=Erreur de configuration !
@@ -224,5 +224,17 @@ callback.not.match=Le rappel enregistré ne correspond pas à l'URL fournie.
 invalid.redirect.uri=L'URI de redirection n'est pas présent dans la demande d'autorisation.
 authentication.attempt.failed=La tentative d'authentification a échoué.
 authorization.failed=L'autorisation à échouée.
-provided.username.already.exists=Erreur d'authentification ! Le nom d'utilisateur fourni existe d�j�.
-error.user.existence=Erreur lors de la v�rification des d�tails de l'utilisateur.
+provided.username.already.exists=Erreur d'authentification ! Le nom d'utilisateur fourni existe d�j�.
+error.user.existence=Erreur lors de la v�rification des d�tails de l'utilisateur.
+
+fido.failed.instruction=Cliquez sur continuer et suivez les instructions données par votre navigateur pour vous authentifier à l'aide d'une clé de sécurité ou de données biométriques dans votre appareil.
+fido.error=Échec de l'authentification à l'aide de votre clé de sécurité/données biométriques
+fido.registration.info=Vous devez avoir une clé de sécurité ou des données biométriques enregistrées pour vous connecter. Si ce n'est pas le cas, enregistrez vos clés de sécurité/données biométriques dans l'application Mon compte.
+fido.learn.more.part.one=Apprenez-en plus à ce sujet dans notre
+fido.learn.more.documentation=documentation
+fido.learn.more.part.two=ou contactez votre administrateur
+fido.learn.more.part.two.email=ou contactez-nous au
+fido.retry=Retenter
+fido.proceed=Procéder
+fido.cancel=Annuler
+fido.authenticator=Connectez-vous avec la clé de sécurité

apps/authentication-portal/src/main/webapp/extensions/branding-preferences.jsp

@@ -0,0 +1,21 @@
+<%--
+  ~ Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+  ~
+  ~ WSO2 Inc. licenses this file to you under the Apache License,
+  ~ Version 2.0 (the "License"); you may not use this file except
+  ~ in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+--%>
+
+<%
+    String supportEmail = "";
+%>

apps/authentication-portal/src/main/webapp/fido2-auth.jsp

@@ -18,6 +18,8 @@
 
 <%@ page import="org.owasp.encoder.Encode" %>
 <%@ page import="java.io.File" %>
+<%@ page import="org.apache.commons.text.StringEscapeUtils" %>
+
 <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
 
 <%@include file="includes/localize.jsp" %>
@@ -27,6 +29,9 @@
     String authRequest = request.getParameter("data");
 %>
 
+<!-- Branding Preferences -->
+<jsp:directive.include file="extensions/branding-preferences.jsp" />
+
 <!doctype html>
 <html>
 <head>
@@ -40,7 +45,7 @@
     <jsp:include page="includes/header.jsp"/>
     <% } %>
 </head>
-<body class="login-portal layout authentication-portal-layout" onload="talkToDevice();">
+<body class="login-portal layout authentication-portal-layout">
 
     <% if (new File(getServletContext().getRealPath("extensions/timeout.jsp")).exists()) { %>
         <jsp:include page="extensions/timeout.jsp"/>
@@ -49,8 +54,7 @@
     <% } %>
 
     <main class="center-segment">
-        <div class="ui container medium center aligned middle">
-
+        <div class="ui container center aligned medium middle">
             <!-- product-title -->
             <%
                 File productTitleFile = new File(getServletContext().getRealPath("extensions/product-title.jsp"));
@@ -61,16 +65,66 @@
                 <jsp:include page="includes/product-title.jsp"/>
             <% } %>
 
-            <div class="ui segment center aligned">
+            <div class="ui segment left aligned">
+                <div id="loader-bar" class="loader-bar"></div>
+
                 <h3 class="ui header">
-                    <%=AuthenticationEndpointUtil.i18n(resourceBundle, "verification")%>
+                    <span id="fido-header">
+                        <%=AuthenticationEndpointUtil.i18n(resourceBundle, "verification" )%>
+                    </span>
+                    <span id="fido-header-error" style="display: none;">
+                        <%=AuthenticationEndpointUtil.i18n(resourceBundle, "fido.error" )%>
+                    </span>
                 </h3>
+                <div class="ui two column left aligned stackable grid">
+                    <div id="fido-initialize" class="middle aligned row">
+                        <div class="six wide column">
+                            <img class="img-responsive" src="images/U2F.png" />
+                        </div>
+                        <div class="ten wide column">
+                            <p id="general-browser-instruction">
+                                <%=AuthenticationEndpointUtil.i18n(resourceBundle, "touch.your.u2f.device" )%>
+                            </p>
+                            <div id="safari-instruction" style="display:none">
+                                <p>
+                                    <%=AuthenticationEndpointUtil.i18n(resourceBundle, "fido.failed.instruction" )%>
+                                </p>
+                                <div class="ui divider hidden"></div>
+                                <button class="ui button primary" id="initiateFlow" type="button" onclick="talkToDevice()">
+                                    <%=AuthenticationEndpointUtil.i18n(resourceBundle, "fido.proceed" )%>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="fido-error-content" style="display: none;" class="middle aligned row">
+                        <div class="sixteen wide column">
+                            <p>
+                                <%=AuthenticationEndpointUtil.i18n(resourceBundle, "fido.registration.info" )%>
+                                <a id="my-account-link">My Account</a>.
+                            </p>
+                            <p>
+                                <% if (supportEmail != null && !supportEmail.isEmpty()) { %>
+                                    <span>
+                                        <%=AuthenticationEndpointUtil.i18n(resourceBundle, "fido.learn.more.part.one" )%>
+                                    </span>
+                                    <a href="mailto:<%=supportEmail%>"><%=StringEscapeUtils.escapeHtml4(supportEmail)%></a>.
+                                <% } %>
+                            </p>
+                            <div class="ui divider hidden"></div>
+                            <div class="ui container fluid">
+                                <button class="ui right floated button primary" type="button" onclick="retry()">
+                                    <%=AuthenticationEndpointUtil.i18n(resourceBundle, "fido.retry" )%>
+                                </button>
+                                <button class="ui right floated button link-button" type="button" onclick="cancelFlow()">
+                                    <%=AuthenticationEndpointUtil.i18n(resourceBundle, "fido.cancel" )%>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
 
-                <%=AuthenticationEndpointUtil.i18n(resourceBundle, "touch.your.u2f.device")%>
-
-                <div class="ui divider hidden"></div>
-
-                <div> <img class="img-responsive" src="images/U2F.png"> </div>
+                    </div>
+                </div>
 
                 <form method="POST" action="<%=commonauthURL%>" id="form" onsubmit="return false;">
                     <input type="hidden" name="sessionDataKey" value='<%=Encode.forHtmlAttribute(request.getParameter("sessionDataKey"))%>'/>
@@ -105,6 +159,42 @@
     <script type="text/javascript" src="libs/base64url.js"></script>
 
     <script type="text/javascript">
+        $(document).ready(function () {
+            var myaccountUrl = '<%=application.getInitParameter("MyAccountURL")%>';
+
+            if ("<%=tenantDomain%>" !== "" || "<%=tenantDomain%>" !== "null") {
+                myaccountUrl = myaccountUrl + "/t/" + "<%=tenantDomain%>";
+            }
+
+            $("#my-account-link").attr("href", myaccountUrl +"/myaccount");
+
+            if(navigator ){
+                let userAgent = navigator.userAgent;
+                let browserName;
+
+                if (userAgent.match(/chrome|chromium|crios/i)) {
+                    browserName = "chrome";
+                } else if (userAgent.match(/firefox|fxios/i)) {
+                    browserName = "firefox";
+                } else if (userAgent.match(/safari/i)) {
+                    browserName = "safari";
+                } else if (userAgent.match(/opr\//i)) {
+                    browserName = "opera";
+                } else if (userAgent.match(/edg/i)) {
+                    browserName = "edge";
+                } else {
+                    browserName = "No browser detection";
+                }
+
+                if (browserName === "safari") {
+                    $('#safari-instruction').show();
+                    $('#general-browser-instruction').hide();
+                } else {
+                    $('#general-browser-instruction').show();
+                    $("#initiateFlow").click();
+                }
+            }
+        });
 
         function responseToObject(response) {
             if (response.u2fResponse) {
@@ -163,6 +253,8 @@
             return publicKeyCredentialRequestOptions;
         }
 
+        let fidoError;
+
         function talkToDevice(){
             var authRequest = '<%=Encode.forJavaScriptBlock(authRequest)%>';
             var jsonAuthRequest = JSON.parse(authRequest);
@@ -180,13 +272,39 @@
                 form.submit();
             })
             .catch(function(err) {
-                var form = document.getElementById('form');
-                var reg = document.getElementById('tokenResponse');
-                reg.value = JSON.stringify({errorCode : 400, message : err});
-                form.submit();
+                showError();
+                fidoError = err;
             });
         }
 
+        function retry() {
+            showFidoFlow();
+            talkToDevice();
+        }
+
+        function showError() {
+            $("#fido-header-error").show();
+            $("#fido-error-content").show();
+            $("#fido-header").hide();
+            $("#fido-initialize").hide();
+            $("#loader-bar").hide();
+        }
+
+        function showFidoFlow() {
+            $("#fido-header-error").hide();
+            $("#fido-error-content").hide();
+            $("#fido-header").show();
+            $("#fido-initialize").show();
+            $("#loader-bar").show();
+        }
+
+        function cancelFlow(){
+            var form = document.getElementById('form');
+            var reg = document.getElementById('tokenResponse');
+            reg.value = JSON.stringify({ errorCode: 400, message: fidoError });
+            form.submit();
+        }
+
     </script>
 </body>
 </html>

apps/authentication-portal/src/main/webapp/login.jsp

@@ -88,7 +88,7 @@
             localAuthenticatorNames = Arrays.asList(authList.split(","));
         }
     }
-    
+
     String multiOptionURIParam = "";
     if (localAuthenticatorNames.size() > 1 || idpAuthenticatorMapping != null && idpAuthenticatorMapping.size() > 1) {
         String baseURL;
@@ -100,7 +100,7 @@
             request.getRequestDispatcher("error.do").forward(request, response);
             return;
         }
-        
+
         String queryParamString = request.getQueryString() != null ? ("?" + request.getQueryString()) : "";
         multiOptionURIParam = "&multiOptionURI=" + Encode.forUriComponent(baseURL + queryParamString);
     }
@@ -156,7 +156,7 @@
         // We need to send the tenant domain as a query param only in non tenant qualified URL mode.
         loginContextRequestUrl += "&tenantDomain=" + Encode.forUriComponent(tenantDomain);
     }
-    
+
     String t = request.getParameter("t");
     String ut = request.getParameter("ut");
     if (StringUtils.isNotBlank(t)) {
@@ -372,14 +372,19 @@
                                 if (localAuthenticatorNames.contains(FIDO_AUTHENTICATOR)) {
                             %>
                             <div class="field">
-                                <button class="ui grey basic labeled icon button fluid"
+                                <button class="ui grey labeled icon button fluid"
                                     onclick="handleNoDomain(this,
                                         '<%=Encode.forJavaScriptAttribute(Encode.forUriComponent(idpEntry.getKey()))%>',
                                         'FIDOAuthenticator')"
                                     id="icon-<%=iconId%>"
-                                    title="<%=AuthenticationEndpointUtil.i18n(resourceBundle, "sign.in.with")%> FIDO">
+                                    title="<%=AuthenticationEndpointUtil.i18n(resourceBundle, "sign.in.with")%>
+                                    <%=AuthenticationEndpointUtil.i18n(resourceBundle, "sign.in.with" )%>">
                                     <i class="usb icon"></i>
-                                    <img src="libs/themes/default/assets/images/icons/fido-logo.png" height="13px" /> Key
+                                    <img src="libs/themes/default/assets/images/icons/fingerprint.svg" alt="Fido Logo" />
+                                    <span>
+                                        <%=AuthenticationEndpointUtil.i18n(resourceBundle, "sign.in.with" )%>
+                                        <%=AuthenticationEndpointUtil.i18n(resourceBundle, "fido.authenticator" )%>
+                                    </span>
                                 </button>
                             </div>
                             <%

apps/console/src/extensions/configs/application.tsx

@@ -27,8 +27,8 @@ import {
 export const applicationConfig: ApplicationConfig = {
     advancedConfigurations: {
         showEnableAuthorization: true,
-        showSaaS: true,
-        showReturnAuthenticatedIdPs: true
+        showReturnAuthenticatedIdPs: true,
+        showSaaS: true
     },
     attributeSettings: {
         advancedAttributeSettings: {
@@ -37,8 +37,8 @@ export const applicationConfig: ApplicationConfig = {
             showIncludeUserstoreDomainSubject: true,
             showRoleAttribute: true,
             showRoleMapping: true,
-            showUseMappedLocalSubject: true,
-            showSubjectAttribute: false
+            showSubjectAttribute: false,
+            showUseMappedLocalSubject: true
         },
         attributeSelection: {
             getClaims: (claims: ExtendedClaimInterface[]): ExtendedClaimInterface[] => {
@@ -64,26 +64,29 @@ export const applicationConfig: ApplicationConfig = {
         showProvisioningSettings: true
     },
     inboundOIDCForm: {
+        disabledGrantTypes: [],
         shouldValidateCertificate: true,
+        showBackChannelLogout: true,
+        showCertificates: true,
         showClientSecretMessage: true,
         showFrontChannelLogout: true,
-        showNativeClientSecretMessage: true,
-        showScopeValidators: true,
         showIdTokenEncryption: true,
-        showBackChannelLogout: true,
+        showNativeClientSecretMessage: true,
         showRequestObjectSignatureValidation: true,
-        showCertificates: true,
         showReturnAuthenticatedIdPList: true,
-        disabledGrantTypes: []
+        showScopeValidators: true
     },
     inboundSAMLForm: {
+        artifactBindingAllowed: true,
         showApplicationQualifier: true,
         showAttributeConsumingServiceIndex: true,
-        showQueryRequestProfile: true,
-        artifactBindingAllowed:true
+        showQueryRequestProfile: true
     },
     signInMethod: {
         authenticatorSelection: {
+            customAuthenticatorAdditionValidation: (): boolean => {
+                return true;
+            },
             messages: {
                 secondFactorDisabled: null,
                 secondFactorDisabledInFirstStep: null