OTP is another form of multi-factor authentication (MFA) designed to make it much harder for hackers to access protected information. An OTP is similar to a password but it can only be used once, thus it stands for one-time password or one-time pin . It is often used in combination with a regular password as an additional authentication mechanism providing extra security. In this post we will generate OTP in LWC using an external library jsOTP
OTP is normally categorized in two type. In both type, we need two values a seed and a moving factor to generate OTP. The seed is a static value (secret key) that’s created when we establish a new account on the authentication server. While the seed doesn’t change, the moving factor does each time a new OTP is requested.
1. HOTP
The “H” in HOTP stands for Hash-based Message Authentication Code (HMAC). HMAC-based One-time Password algorithm (HOTP) is an event-based OTP where the moving factor in each code is based on a counter.
2. TOTP
Time-based One-time Password (TOTP) is a time-based OTP. The seed for TOTP is static, just like in HOTP, but the moving factor in a TOTP is time-based rather than counter-based.
This library jsOTP support generation for both type of OTPs. Let us use this and generate OTP in LWC.
Steps for jsOTP Integration:
- Include Js library in Static Resource
- Create apex class to send WhatsApp Message
- Create component to include jsOTP
- Test Page
1. Include Js library in Static Resource
Download JS library from here and add to static resource as jsOTP.
2. Create apex class to send WhatsApp Message
Create an apex class which will get record information and send OTP as WhatsApp message to customer/contact or user.
This class is using WhatsAppMessage service class. Refer our existing post for this class.
3. Create LWC component to generate OTP
Create a lwc component which will generate OTP and send to customer using WhatsApp message. We can generate both type of OTP using this library. Instead of WhatsApp we can use SMS or email as well for verification.
Similar to jsOTP.totp().getOtp we can use jsOTP.hotp().getOtp to generate hash based OTP.
4. Test Page
Add LWC component on Account record page. This will generate OTP and send to account’s mobile.
4 comments
I have created a custom field of type text in contact object Mobile__c but while clicking send OTP button nothing happened.
Hello Om,
Have you tried debugging the issue behind this? If not, please try to debug and update once again. We will connect and resolve your issue.
Thank You,
Dhanik
this is great! I have used this to create a lwc component to generate a totp code. It is working, but I am getting the following error when i refresh the page. [Cannot read properties of undefined (reading ‘length’)]
e.base32tohex()@https://iqlink–iqlinksbx1.sandbox.lightning.force.com/resource/1674015731000/jsOTP:7:324
e.getOtp()@https://iqlink–iqlinksbx1.sandbox.lightning.force.com/resource/1674015731000/jsOTP:7:662
S.generateOTP()@https://iqlink–iqlinksbx1.sandbox.lightning.force.com/lightning/r/CustomerOrganization__c/a8i3H0000008aBjQAI/modules/c/customerOrg_PasswordManager.js:1:3468
eval()@https://iqlink–iqlinksbx1.sandbox.lightning.force.com/lightning/r/CustomerOrganization__c/a8i3H0000008aBjQAI/modules/c/customerOrg_PasswordManager.js:1:2931
Hello Jeff,
As per the error, looks like you have used the length function on some array or string. On refresh, this array is undefined/null so you are getting an error. Please check your code and if you need any help, please ping me on my LinkedIn profile.
Thank You,
Dhanik