2-Factor Authentication Twilio Integration

We installed the Velo package on our site, and followed the steps described in the Setup section of the package’s readme file.

Page Elements

We added a registration and login lightbox to our site. The lightbox contains a multi-state box for switching between registration and login states. The lightbox includes the following elements:

Registration State: Visible Elements

• 3 text inputs: email, password, phone number

• dropdown: for selecting a country code

• submit button

• text element: links to the login page for site visitors who already registered

Registration State: Collapsed Elements

• text input: for entering the confirmation code

• register button

• 2 text elements: for error messages and for resending the verification code via a phone call

Login State: Visible Elements

• 2 text inputs: email and password

• submit button

• text element: links to a registration page for new site visitors

 Login State: Collapsed Elements

• text input: for entering the confirmation code

• login button

• 2 text elements: for error messages and for resending the verification code via a phone call

 

Code

We added the following code to our lightbox:

1. Import the initPage() function from the package.

2. Set aliases for all the page components (elements). Make sure to use the exact alias names used in the init-page.js public package file.

3. Call the initPage() function with the aliased components.