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.
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.
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.