One-Time Password (OTP) on LWR for Experience Cloud
LWR for Experience Cloud only ships with the standard username and password authentication, but with a little Apex and Lightning Web Component coding you can implement an easy passwordless login solution for your customers. Salesforce can send a one-time password (OTP) to a registered email, mobile phone, or authenticator app. This blog provides an overview of the steps required to send an OTP to a user’s mobile phone via an SMS message. These steps include:
· Allowing a user to register their mobile phone
· Providing passwordless login option on login page.
Note that to offer mobile OTP via a text message, you must first purchase the Identify Verification Credits Add-On License which provides your org with a predetermined number of SMS messages for mobile identity verification.
Registering a Mobile Device
The first step for implementing passwordless login is allowing users to register their mobile phone on your site. This can occur in multiple locations. For example, you can prompt a user to register their mobile phone after they sign up for your site as illustrated in Figure 1 below.
Figure 1 - Registration Prompt
Another option is allowing users to register/deregister their mobile phone from the
My Account menu. This option provides users with self-service capabilities in the event that their mobile number changes in the future. You can certainly implement more than one method to allow a user to register their mobile phone.
Now that we have the UI, the registration of the mobile number is a two-step process:
- Send verification code via text message to mobile device
- Enter verification code from text message in UI.
To complete this process, we utilize the UserManagement class. To start the registration process, we first need to save the mobile phone number on the User record in the MobilePhone field. The number must include the country code. Once we have the mobile number, we call the following method from the UserManagement class:
This method sends a code to the user’s mobile phone. Once the user receives the mobile code, they need to enter that code in the UI, see Figure 2 below.
Figure 2 - Registration Verify Mobile Phone
After the user enters the code, we need to pass the code to salesforce using the following method:
At this point, the user has successfully registered their mobile phone and are able to receive OTP messages.
OTP Login via Text Message
To allow a user to login with an OTP, we need to complete the following on the login page:
- Identify the user via some unique identifier (i.e. mobile number, email, username, etc.)
- Check for registered verification methods and allow user to select which verification method to use
- Verify OTP sent to the user’s selected verification method.
To identify a user, we need a simple UI, illustrated in Figure 3 below, that has a single input to take in the uniquely identifiable piece of information. Our UI accepts either a phone number or email and queries the User object to find a user that has that email or phone. Note that in our Org email and phone have been made unique values (i.e. no two users can have the same email or mobile phone number).
After we identify the user, we need to check to see if they have any registered verification methods. We can do this by querying the TwoFactorMethodsInfo object. If the user has registered an authentication method, we should display a UI allowing them to select which method to use as illustrated in Figure 4 below.
Figure 4 - OTP Login Step 2
After the user selects their verification method, we can utilize the UserManagement. initPasswordlessLogin() function to start the OTP process. This method will send an OTP to the user which they need to enter in the UI illustrated in Figure 5 below.
Figure 5 - OTP Login Step 3
To verify the OTP, we utilize the UserManagement.verifyPasswordlessLogin() function. After successful verification, the user is authenticated and redirected to either the home page or the URL specified in the startURL parameter.