Templates

The following templates receive the same params.

Param Name	Type	Description
routeId	string (optional)	Indicates which flow started this verification process. When the methods in MFA Helpers are triggered, they receive this routeId then some custom logic can be added to the switch of each method based on the routeId.
phoneNumber	string (optional)	The phone number combined with the phoneNumberCountryCode needed to send the verification code. If this phone is passed to the EnterPhoneNumber template, then the phone input will be pre-populated with it.
phoneNumberCountyCode	string (optional)	The phone number country code combined with the phoneNumber needed to send the verification code. If this country code is passed to the EnterPhoneNumber template, then the country code input will be pre-populated with it.

Enter Phone Number

Elements

Enter Phone Number contains the following elements:

• FormLayout component as a container, to handle input submission and loading.

• Dropdown component to display the countries' code.

• Input component to capture the customer's phone number.

• Continue Button to send the verification code to the entered phone.

Functionality

Functionality implementation

• The functionality to send the verification code is implemented by the useSendVerificationCode custom hook.

• If the code is sent successfully then the following is triggered:

  • The handleOnPhoneEntered method from MfaHelpers is called with the params information so some custom logic can be added based on the routeId param.

  • Navigates to the EnterPhoneVerificationCode template.

Enter Phone Verification Code

Elements

Enter Phone Verification Code contains the following elements:

• FormLayout component as a container, to handle input submission and loading.

• Use the InputCode component to capture and verify the code sent to the customer's phone number.

• Send Again Button for if the user did not receive a message with the code.

Functionality

Functionality implementation

• Detects the code is entered and triggers the option to verify the code. This The functionality to verify the code is implemented by the useVerifyCode custom hook.

• If the code is verified successfully then it triggers the handleOnPhoneVerificationCodeSuccess method from MFA Helpers. It is called with the params information so some custom logic can be added based on the routeId param.

• Send again functionality is handle by the useTime custom hook.

Request Authorization Code Screen

Elements

This screen lets the user choose how they would like to receive the authorization code.

Request Authorization Code Screen contains the following elements:

• FormLayout component as a container, to handle loading.
• Radio Buttons Group to display the different options to send a verification code. These options are listed from AUTHORIZATION_CODE_RADIO_BUTTONS constant.
• Send Code Button send the verification code.

Functionality

Functionality implementation

• The functionality to send the verification code is implemented by the useSendVerificationCode custom hook.
• If the code is sent successfully then it navigates to the EnterPhoneVerificationCode template.