Add SMS based password recovery support

.changeset/wicked-fireants-punch.md

@@ -0,0 +1,11 @@
+---
+"@wso2is/identity-apps-core": minor
+"@wso2is/console": minor
+"@wso2is/admin.server-configurations.v1": patch
+"@wso2is/admin.branding.v1": patch
+"@wso2is/admin.core.v1": patch
+"@wso2is/myaccount": patch
+"@wso2is/i18n": patch
+---
+
+Introduce sms otp for password recovery

apps/console/src/extensions/i18n/models/extensions.ts

@@ -3056,10 +3056,24 @@ export interface Extensions {
                     form: {
                         fields: {
                             enable: FormAttributes;
+                            enableSMSBasedRecovery: FormAttributes;
+                            enableEmailBasedRecovery: FormAttributes;
                             expiryTime: FormAttributes;
                             notifySuccess: FormAttributes;
-                        };
-                    };
+                            maxResendCount: FormAttributes;
+                            maxFailedAttemptCount: FormAttributes;
+                            smsOtpExpiryTime: FormAttributes;
+                            passwordRecoveryOtpUseUppercase: FormAttributes;
+                            passwordRecoveryOtpUseLowercase: FormAttributes;
+                            passwordRecoveryOtpUseNumeric: FormAttributes;
+                            passwordRecoveryOtpLength: FormAttributes;
+                        };
+                    };
+                    recoveryOptionSubHeadingEmailLink: string;
+                    recoveryOptionSubHeadingSMS: string;
+                    recoveryOptionHeading: string;
+                    otpConfigHeading: string;
+                    failedAttemptConfigHeading: string;
                     connectorDescription: string;
                     heading: string;
                     notification: {

apps/console/src/extensions/i18n/resources/en-US/extensions.ts

@@ -3576,6 +3576,10 @@ export const extensions: Extensions = {
                                 hint: "Enabling this will let the users reset their password using an email.",
                                 label: "Enable"
                             },
+                            enableSMSBasedRecovery: {
+                                hint: "This specifies whether to send an SMS OTP to the mobile.",
+                                label: "Enable SMS based recovery"
+                            },
                             expiryTime: {
                                 hint: "Password recovery link expiry time in minutes.",
                                 label: "Recovery link expiry time",
@@ -3595,9 +3599,80 @@ export const extensions: Extensions = {
                                     "This specifies whether to notify the user via an email when password " +
                                     "recovery is successful.",
                                 label: "Notify on successful recovery"
+                            },
+                            maxResendCount: {
+                                hint: "Password recovery maximum resend count.",
+                                label: "Maximum resend attempts count",
+                                placeholder: "Enter max resend count",
+                                validations: {
+                                    invalid: "Password recovery OTP resend count should be an integer.",
+                                    empty: "Password recovery OTP resend count cannot be empty.",
+                                    range:
+                                        "Password recovery OTP resend count should be between 1 & 5.",
+                                    maxLengthReached:
+                                        "Password recovery OTP resend count should be a number with 1 digit."
+                                }
+                            },
+                            maxFailedAttemptCount: {
+                                hint: "Password recovery maximum failed attempt count.",
+                                label: "Max failed attempts count",
+                                placeholder: "Enter max failed attempts",
+                                validations: {
+                                    invalid: "Password recovery max failed attempts count should be an integer.",
+                                    empty: "Password recovery max failed attempts count cannot be empty.",
+                                    range:
+                                        "Password recovery max failed attempts count should be between 1 & 10.",
+                                    maxLengthReached:
+                                        "Password recovery max failed attempts count should be a number with less than 3 digits."
+                                }
+                            },
+                            smsOtpExpiryTime: {
+                                hint: "Password recovery OTP expiry time in minutes.",
+                                label: "Password recovery OTP expiry time",
+                                placeholder: "Enter expiry time",
+                                validations: {
+                                    invalid: "Password recovery OTP expiry time should be an integer.",
+                                    empty: "Password recovery OTP expiry time cannot be empty.",
+                                    range:
+                                        "Password recovery OTP expiry time should be between 1 minute & 1440 minutes " +
+                                        "(1 day).",
+                                    maxLengthReached:
+                                        "Password recovery OTP expiry time should be a number with 4 or less digits."
+                                }
+                            },
+                            passwordRecoveryOtpUseUppercase: {
+                                hint: "This specifies whether to use upper case characters in the password recovery otp code.",
+                                label: "Include upper case letters"
+                            },
+                            passwordRecoveryOtpUseLowercase: {
+                                hint: "This specifies whether to use lower case characters in the password recovery otp code.",
+                                label: "Include lower case letters"
+                            },
+                            passwordRecoveryOtpUseNumeric: {
+                                hint: "This specifies whether to use numeric characters in the password recovery otp code.",
+                                label: "Include numeric characters"
+                            },
+                            passwordRecoveryOtpLength: {
+                                hint: "Password recovery OTP length in characters",
+                                label: "Password recovery OTP code length",
+                                placeholder: "Enter OTP code length",
+                                validations: {
+                                    empty: "Password recovery OTP length cannot be empty.",
+                                    maxLengthReached:
+                                        "Password recovery OTP length should be between 6 and 10 characters."
+                                }
+                            },
+                            enableEmailBasedRecovery: {
+                                hint: "This specifies whether to send an recovery link to the email address.",
+                                label: "Enable email link based recovery"
                             }
                         }
                     },
+                    recoveryOptionSubHeadingEmailLink: "Email Link",
+                    recoveryOptionSubHeadingSMS: "SMS OTP",
+                    recoveryOptionHeading: "Recovery Option Selection",
+                    otpConfigHeading: "OTP Code Configuration",
+                    failedAttemptConfigHeading: "Recovery Attempts Limitation",
                     connectorDescription: "Enable self-service password recovery for users " + "on the login page.",
                     heading: "Password Recovery",
                     notification: {
@@ -3611,8 +3686,7 @@ export const extensions: Extensions = {
                         }
                     },
                     subHeading:
-                        "Enable self-service password recovery for users " +
-                        "on the login page.\nThe user will receive a password reset link via email upon request."
+                    "Enable self-service password recovery for users on the login page."
                 },
                 subHeading: "Account Recovery related settings."
             },

apps/console/src/public/deployment.config.json

@@ -1181,6 +1181,7 @@
         },
         "selfAppIdentifier": "Console",
         "showAppSwitchButton": true,
+        "showSmsOtpPwdRecoveryFeatureStatusChip": false,
         "showStatusLabelForNewAuthzRuntimeFeatures": false,
         "systemAppsIdentifiers": [
             "Console",

apps/myaccount/src/components/account-recovery/account-recovery.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2019-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -16,15 +16,15 @@
  * under the License.
  */
 
-import { hasRequiredScopes, isFeatureEnabled } from "@wso2is/core/helpers";
+import { useRequiredScopes } from "@wso2is/access-control";
+import { isFeatureEnabled } from "@wso2is/core/helpers";
 import { SBACInterface, TestableComponentInterface } from "@wso2is/core/models";
 import { EmphasizedSegment } from "@wso2is/react-components";
 import { AxiosError } from "axios";
 import React, { FunctionComponent, ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useSelector } from "react-redux";
 import { List, Placeholder } from "semantic-ui-react";
-import { EmailRecovery, SecurityQuestionsComponent } from "./options";
+import { EmailRecovery, SMSRecovery, SecurityQuestionsComponent } from "./options";
 import { getPreference } from "../../api";
 import { AppConstants } from "../../constants";
 import {
@@ -35,7 +35,6 @@ import {
     PreferenceProperty,
     PreferenceRequest
 } from "../../models";
-import { AppState } from "../../store";
 import { SettingsSection } from "../shared";
 
 /**
@@ -58,15 +57,20 @@ export const AccountRecoveryComponent: FunctionComponent<AccountRecoveryProps> =
     const { onAlertFired, featureConfig, ["data-testid"]: testId } = props;
 
     const { t } = useTranslation();
-    const allowedScopes: string = useSelector((state: AppState) => state?.authenticationInformation?.scope);
     const RECOVERY_CONNECTOR: string = "account-recovery";
     const RECOVERY_PASSWORD_QUESTION: string = "Recovery.Question.Password.Enable";
     const RECOVERY_PASSWORD_NOTIFICATION: string = "Recovery.Notification.Password.Enable";
+    const RECOVERY_PASSWORD_NOTIFICATION_EMAIL_LINK: string = "Recovery.Notification.Password.emailLink.Enable";
+    const RECOVERY_PASSWORD_NOTIFICATION_SMS_OTP: string = "Recovery.Notification.Password.smsOtp.Enable";
     const RECOVERY_USERNAME_NOTIFICATION: string = "Recovery.Notification.Username.Enable";
     const [ isQsRecoveryEnabled, setIsQsRecoveryEnabled ] = useState<boolean>(false);
     const [ isNotificationRecoveryEnabled, setIsNotificationRecoveryEnabled ] = useState<boolean>(false);
+    const [ isNotificationRecoveryEmailLinkEnabled, setIsNotificationRecoveryEmailLinkEnabled ] =
+        useState<boolean>(false);
+    const [ isNotificationRecoverySMSOTPEnabled, setIsNotificationRecoverySMSOTPEnabled ] = useState<boolean>(false);
     const [ isUsernameRecoveryEnabled, setIsUsernameRecoveryEnabled ] = useState<boolean>(false);
     const [ isAccountRecoveryDetailsLoading, setIsAccountRecoveryDetailsLoading ] = useState<boolean>(false);
+    const hasAccountSecurityConfigReadPermissions: boolean = useRequiredScopes( featureConfig?.security?.scopes?.read );
 
     /**
      * The following method gets the preference for account recovery.
@@ -80,7 +84,9 @@ export const AccountRecoveryComponent: FunctionComponent<AccountRecoveryProps> =
                 properties: [
                     RECOVERY_PASSWORD_QUESTION,
                     RECOVERY_PASSWORD_NOTIFICATION,
-                    RECOVERY_USERNAME_NOTIFICATION
+                    RECOVERY_USERNAME_NOTIFICATION,
+                    RECOVERY_PASSWORD_NOTIFICATION_EMAIL_LINK,
+                    RECOVERY_PASSWORD_NOTIFICATION_SMS_OTP
                 ]
             }
         ];
@@ -92,14 +98,30 @@ export const AccountRecoveryComponent: FunctionComponent<AccountRecoveryProps> =
                     const responseProperties: PreferenceProperty[] = passwordRecoveryOptions[0].properties;
 
                     responseProperties.forEach((prop: PreferenceProperty) => {
-                        if (prop.name === RECOVERY_PASSWORD_QUESTION) {
-                            setIsQsRecoveryEnabled(prop.value.toLowerCase() == "true" ? true : false);
-                        }
-                        if (prop.name === RECOVERY_PASSWORD_NOTIFICATION) {
-                            setIsNotificationRecoveryEnabled(prop.value.toLowerCase() == "true" ? true : false);
-                        }
-                        if (prop.name === RECOVERY_USERNAME_NOTIFICATION) {
-                            setIsUsernameRecoveryEnabled(prop.value.toLowerCase() == "true" ? true : false);
+                        switch (prop.name) {
+                            case RECOVERY_PASSWORD_QUESTION:
+                                setIsQsRecoveryEnabled(prop.value.toLowerCase() === "true");
+
+                                break;
+                            case RECOVERY_PASSWORD_NOTIFICATION:
+                                setIsNotificationRecoveryEnabled(prop.value.toLowerCase() === "true");
+
+                                break;
+                            case RECOVERY_PASSWORD_NOTIFICATION_EMAIL_LINK:
+                                setIsNotificationRecoveryEmailLinkEnabled(prop.value.toLowerCase() === "true");
+
+                                break;
+                            case RECOVERY_PASSWORD_NOTIFICATION_SMS_OTP:
+                                setIsNotificationRecoverySMSOTPEnabled(prop.value.toLowerCase() === "true");
+
+                                break;
+                            case RECOVERY_USERNAME_NOTIFICATION:
+                                setIsUsernameRecoveryEnabled(prop.value.toLowerCase() === "true");
+
+                                break;
+                            default:
+                                // Cases where prop.name doesn't match any of the above cases are not handled.
+                                break;
                         }
                     });
                 } else {
@@ -161,11 +183,7 @@ export const AccountRecoveryComponent: FunctionComponent<AccountRecoveryProps> =
             { !isAccountRecoveryDetailsLoading ? (
                 <List divided={ true } verticalAlign="middle" className="main-content-inner">
                     <List.Item className="inner-list-item">
-                        { hasRequiredScopes(
-                            featureConfig?.security,
-                            featureConfig?.security?.scopes?.read,
-                            allowedScopes
-                        ) &&
+                        { hasAccountSecurityConfigReadPermissions &&
                         isFeatureEnabled(
                             featureConfig?.security,
                             AppConstants.FEATURE_DICTIONARY.get("SECURITY_ACCOUNT_RECOVERY_CHALLENGE_QUESTIONS")
@@ -178,22 +196,27 @@ export const AccountRecoveryComponent: FunctionComponent<AccountRecoveryProps> =
                             ) : null }
                     </List.Item>
                     <List.Item className="inner-list-item">
-                        { hasRequiredScopes(
-                            featureConfig?.security,
-                            featureConfig?.security?.scopes?.read,
-                            allowedScopes
-                        ) &&
+                        { hasAccountSecurityConfigReadPermissions &&
                         isFeatureEnabled(
                             featureConfig?.security,
                             AppConstants.FEATURE_DICTIONARY.get("SECURITY_ACCOUNT_RECOVERY_EMAIL_RECOVERY")
                         ) &&
-                        (isNotificationRecoveryEnabled || isUsernameRecoveryEnabled) ? (
+                        (isNotificationRecoveryEmailLinkEnabled || isUsernameRecoveryEnabled) ? (
                                 <EmailRecovery
                                     onAlertFired={ onAlertFired }
                                     data-testid={ `${testId}-settings-section-email-recovery` }
                                 />
                             ) : null }
                     </List.Item>
+                    <List.Item className="inner-list-item">
+                        { hasAccountSecurityConfigReadPermissions &&
+                        isNotificationRecoverySMSOTPEnabled ? (
+                                <SMSRecovery
+                                    onAlertFired={ onAlertFired }
+                                    data-componentid={ `${testId}-settings-section-sms-recovery` }
+                                />
+                            ) : null }
+                    </List.Item>
                 </List>
             ) : (
                 <EmphasizedSegment className="placeholder-container">

apps/myaccount/src/components/account-recovery/options/index.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2019-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -18,3 +18,4 @@
 
 export * from "./email-recovery";
 export * from "./security-questions-recovery";
+export * from "./sms-recovery/sms-recovery";

apps/myaccount/src/components/account-recovery/options/sms-recovery/sms-recovery.scss

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. 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.
+ */
+
+.mobile-field {
+    width: 200px !important;
+}
+
+.small-description{
+    margin-top: 10px !important;
+    font-size: 12px;
+}
+
+.description {
+    margin-top: 7px;
+}
+
+.inline.fields {
+    margin-top: 8px;
+}