OTP (Mobile Number Verification)

We implement the OTP feature on PickBazar v2.2.0. So if you want to use OTP with PickBazar, then make sure your PickBazar is v2.2.0 or later.

With the OTP feature, you can do,

- Login with Mobile Number
- OTP verification for updating Mobile Number in profile update section
- OTP verification during checkout process in customer contact section

Configuration

As of today, we implement two service providers for OTP. One is Twilio, and another is MessageBird.

Twilio Configuration:

If you want to use Twilio as your OTP service provider, then follow this procedure,

1. Create an account at Twilio
2. After that, go to the Twilio Console Panel and copy the ACCOUNT SID, and AUTH TOKEN key and add this key to your api/.env file

3. After that, go to the Verify option from the Sidebar panel,

4. And from verify dashboard, create a service.

5. Add add that service key to api/.env -> TWILIO_VERIFICATION_SID

Verify Geo Permissions

To enable an SMS system in your country, go to this link,

https://www.twilio.com/docs/verify/preventing-toll-fraud/verify-geo-permissions

and enable your country's SMS Channel and Voice Channel.

Without this verification, no SMS will be delivered.

With that, your configuration is complete.

MessageBird:

Use only one service provider for OTP service, so use this MessageBird configuration only if you want to use MessageBird instead of Twilio.

To configure MessageBird, follow this procedure,

1. Create an account from MessageBird

2. After creating the account, go to the API Getting Started and follow all the procedures step by step.

3. After completing the profile, copy the API key from MessageBird and paste it to API/.env

With that, MessageBird is appropriately configured for the OTP Service.

FrontEnd Demo

Login with Mobile Number:

After configuration, you will be able to use mobile number as a login provider. When users select the Join button, they'll get an option Login with mobile to use a mobile number as a login provider.

OTP Verification During Checkout Process:

Similarly, when users go to the checkout page, they'll get a form to verify their mobile number.

For the front end, you don't have to do anything. When a user goes to the checkout page, they get a phone number box to add their number and verify it.

OTP Verification For Updating Mobile Number:

Users also can change the number from their profile.