SendOTP

SendOTP is a ‘One-Time Password’ (generating, delivering, and verifying) mechanism. Copy-pasting a couple of codes allows you to integrate the 2-factor authentication facility. Once this is done, then we generate, deliver, and verify the one-time passwords of your clients.

SendOTP is a flagship product of MSG91.

SendOTP offers you high-quality premium services that let you save on:

• Infrastructure 

• Maintaining multiple/backup service providers 

• Development time & resources 

• Security

• Analysis

SendOTP provides

• Instant services - OTP services are a high-priority matter and are delivered within seconds

• 100% delivery - the OTP is delivered even if it means sending a backup voice SMS 

• Support - SendOTP support team is always available for solving queries

Send OTP maintains a database for the sent OTPs and they can be easily filtered. It reduces a significant amount of coding on the application part making it lighter.

With SendOTP all a user needs to do is:

1. Verify the phone number.

2. Enter the verification code.

The user is verified in just two steps and all it takes is 120 seconds.

P.S. SendOTP uses the integrated services of MSG91  

Check the below article or just check this quick video -

Create Template

• Login to your account and click on OTP. 
  

MSG91 Dashboard

• Click on "Templates"

• Click on the "Add template" option on the top right.
  
  

                                                                            OTP Template View

​

​

• Fill in the details as required in the below fields. Once done, scroll down and click on the "Add Template" button. Add the variable for OTP placeholder as ##OTP##To add the sender ID in MSG91, please refer to this article.

Add Template Dialogue Box

• You will see the template ID here, which is to be put in the Send OTP API.
  
  

API Documentation: Just Click Here:) 

Please check all 3 APIs, i.e., Send OTP, Resend OTP (via text or voice), and Verify OTP in the above API doc.

NOTE: If sent without a country code, submission and deduction depend on the detected country based on the starting number: For, 91xxxxxxxxxx, etc

Video :

There are two processes. You can choose either, 

1. OTP verification at the SendOTP server

Once you call the OTP API we generate OTP and save it in the secured database for defined seconds and then send the SMS to the user. If the user does not receive the SMS, they can ask for a resending. 

Once you call the same API with the same mobile number, we automatically generate a voice call and read OTP.

• When the user receives the OTP, they enter in form and submit 
  
  

• We match the code and verify 
  
  

• On success, we give a refresh token
  
  

• You take this token from the user and call refresh token, verify API from your server to our SendOTP server

2. OTP verification on your server

In this process, once you call the OTP API from your server, the user will enter the OTP in the front end and you can save the received OTP from the front end on your server to pass the same for verification. You can use it for the verification process on your server only.

Both processes are secure from our end, but process number 2 is dependent on your security protocols.

API: The Expiry of OTP to verify, in minutes [default: 1 hour (60 minutes) , min: 1 minute, max: 7 days]. 

OTP Widget: The limit needs to be set for widget login [Min: 15 minutes, Max: 1440 minutes].

To check the Delivery Reports of the OTP messages which you send, follow the below-given steps:

1. Login into your MSG91 account and select OTP.

3. Goto the Logs section under SendOTP from the sidebar. Here you can see all the OTP messages with all the related details. You can select the date range and search by the request-id or mobile number along with the country code. 

Different colors in status have different meanings:

• Red: Failed

• Blue: Delivered

• Yellow: Pending

• Grey round arrow: Retry

• Blue with tick: Verified

5. To export the reports, please refer to this article.

Video :

To export the reports, please follow the below-mentioned steps

1. Login into your MSG91 account and select the Reports option on the dashboard.

2. Here you can see the Summary report of all your channels. Select the SMS channel from the sidebar. Select the OTP option from the Group by dropdown and the date range for which you download the report from the sidebar. A summary with the exact number of messages and a graph will be shown for that period. If the data doesn't update, click on the refresh icon at the top right. Click on the Logs button on the top right to export the report.

4. You can select for the fields for the report from the Select Fields dropdown. You can also export them to your email from the Email To option. Once done, click on the Export button.

4. Go to the Download section in the sidebar. You will see the exported reports here. Click on the Download button to download them to your system.

1. Log in to the MSG91 Panel and select One API.

2. Select the Auhtkey option from the sidebar. Click on API Documentation.

3. Scroll down and select the Send OTP API

4. Scroll down and click on "View Optional Query Params"

5. You need to enter 1 for sending SMS in the Unicode field here.

NOTE: If sent without a country code, submission and deduction depend on the detected country based on the starting number: For, 91xxxxxxxxxx, etc

The following are the listed difference between Send OTP and Send OTP 2.0

Send OTP                                                                                                                

1. Send OTP is a ‘One-Time Password’ (generating, delivering, and verifying)mechanism. Copy-pasting a couple of codes allows you to integrate the 2-factor authentication facility.

2. Reliance on the device- The risk of insecure devices and applications stealing OTP SMS is quite measurable as the verification involves OTP SMS

3. No OTP Free Login and Verification: Users will get OTP on their devices to verify their Mobile numbers.

4. Waiting time- It takes 8 sec (approx) to deliver the message and if SMS is not delivered a backup voice call will be initiated. (no additional cost).

5. Chances of drop Outs- In case, the OTP SMS gets deleted from the device, then chances are there for the OTP to drop out.

Send OTP 2.0

1. Send OTP 2.0 is an invisible one-time password securing and simplifying phone number verification. Do not require copy-pasting a couple of codes to integrate the 2- factor authentication facility.

2. Non-reliance on the device- The risk of insecure devices and applications stealing OTP SMS is less as verification does not involve OTP SMS

3. OTP Free Login and Verification: Users will not get OTP on their devices to verify their Mobile Number

4. Waiting Time- It takes 6 sec (approx) to deliver the message if SMS is not delivered a backup voice call will be initiated. (no additional cost).

5. Reduce Drop Outs: No OTP SMS will be sent, hence reducing friction and dropouts.

To export/download the Delivery Reports in MSG91, follow these simple steps:

1. Login into your MSG91 account and select the Reports option on the dashboard.

2. Here you can see the Summary report of all your channels. Select the Whatsapp channel for which you download the report from the sidebar. Select the date range. A summary with the exact number of messages and a graph will be shown for that period. If the data doesn't update, click on the refresh icon at the top right. Click on the Export Logs button on the top right to export the report.

3. You can filter by the status of the message from the Status dropdown and select the fields for the report from the Select Fields dropdown. You can also export them to your email from the Email To option. Once done, click on the Export button.

4. Go to the Download section in the sidebar. You will see the exported reports here. Click on the Download button to download them to your system.

MSG91 has introduced a new widget for OTP Login that clients can integrate on their end and all the Send, Resend, and Verify OTP APIs can be called by MSG91 in one place.

To integrate it, follow the below steps -

1. Log in to your MSG91 panel and select the OTP section.

2. This is the only widget where you can view the channels you've used within it and enable or disable their status. Simply click on the Create New Widget to create your own.

3. Give your widget a name. 

Select the type of verification that you want to opt for (login using OTP or magic link)

If you are opting for magic link then refer to this link otherwise keep referring to the article shared below

Choose the contact point (Mobile number, Email, or both). Then, pick the primary channel. For Mobile Number as a contact point we have 3 channels available ie, SMS, Whatsapp, or Voice and for Email as a contact point we just have one channel i.e., Email for sending the OTP. Lastly, select the length of the OTP.

To resend OTP,  under Mobile number you have the options of SMS, WhatsApp, and Voice channels. However under Email there it is the only channel available. 

You can set the resend count, resend time in seconds and the OTP expiration time in minutes.

If you’ve opted for “Mobile Number” as one of the contact point then you can select Country-wise primary channel under Advanced settings tab (Multiple selections allowed). This feature is used to send OTP via different channels to different countries. 

For Eg - If you want to send OTP to a country where sending via whatsapp is cheaper than SMS then you can select whatsapp as a primary channel for that specific country under advanced setting tab. 

To create a new SMS flow, refer to this guide. 

To create a new email template, refer to this guide. (You need to subscribe for email services and register your domain inorder to use email services or you can use the Connections option to send them via your gmail or outlook account.)

To create a new WhatsApp template, refer to this guide. (You need to subscribe for whatsapp services by providing an active WhatsApp number also must have WhatsApp balance in your account to use WhatsApp services)

To create a new Voice template, refer to this guide. (You need to subscribe for Voice services  and must have Voice balance in your account to use Voice services)

4. The Invisible OTP (Applicable only for mobile application) :  We have introduced a new security feature "The Invisible OTP", which enhances security during phone number verification by sending an OTP without displaying it visibly to the user and verifying the same. If the Invisible OTP fails, it automatically reverts to using the Mobile primary channel as a backup for verification. This approach simplifies and secures the verification process without exposing the OTP directly to the user interface. For this feature to work you have to make sure that Mobile Integration is turned on. 

Note : Once the verification is successfully done via Invisible OTP It will directly generate a JWT token at the backend for server side validation. Which will be provided to MSG91 to verify the user. 

5. Mobile Integration : Enabling this feature will allow you to integrate widget in mobile, You must use our npm package. Please note that if you are using this feature then this widget will only work for mobile platforms and will not work on the web. By default, mobile integration is turned of

6. Captcha Validation : We've added a feature to our OTP widget that allows users to enable and disable Google re-Captcha validation. This option will be available in the OTP widget's settings, and it's designed to give you more control.
By default, re-Captcha validation is turned on, which is great for protecting your widget against bot attacks. Bots can cause problems by flooding your system with fake or automated requests, so re-Captcha is like a security guard, making sure real people are using your widget.
However, there's a unique situation to consider. If you're using our OTP widget in a desktop or mobile application, like an Electron app, re-Captcha might not work properly because it's meant for websites, not desktop or mobile apps
So, we're adding this option for you. By disabling the re-Captcha validation, you can use the OTP widget in your desktop or mobile app without any hiccups.

7. iFrame : Enabling this feature will allow you to access the widget in the iFrame window. By default, iFrame is turned off

8. Now, click on "Save & Next." You will then add the template for the selected channel. Choose the template from the dropdown menu, map the variables. 

A default SMS template is being provided by MSG91 to use till your template is not approved on DLT.

Once done you can click on the Template Preview Button and you'll see a preview of the SMS or email that will be sent to the user.

9. For voice, you have two options : Global caller ID (Default caller ID according to the country) and Local caller ID (For this you have to first select a caller ID from the drop down as shown below and this will display a specified number selected by you). 

10. You can now select the template from the drop down or you can create a new template, which includes a preview for voice. After configuring the channel, click "Save & Next." 

11. Demo Credentials: These are fixed credentials (Name, Mobile No, Email & OTP) which can facilitate app testing and review. It allows bypassing OTP verification as no OTP will be sent to the demo number/email instead the configured OTP can be used for verification.

For Example : Apple requires username and password to review apps that use login with OTP.

If you don’t want to add Demo credentials you can skip this step by clicking on the Skip button.

12. Client side integration : We offer three ways for you to integrate the OTP widget into your client interface (End user side).

• Web SDK for default UI

• Web SDK for custom UI

• Mobile SDK for custom UI 

Enter the Auth Token of your account into the script and use it wherever you want to integrate the service. To obtain it, click on "Select token" in the dropdown menu. If no token is generated, you can create a new one from the "Token" section on the top left sidebar, by clicking on Create New Token. Please note that this token is exclusively generated for OTP Widget feature hence it is a more secure and reliable way of authentication as it helps us to keep the account auth key from getting public. 

Note- In order to know more about Token, please refer: https://msg91.com/help/MSG91/what-is-token-and-how-to-use-it

In the script's success and failure parameters, input the location for displaying the unique access token for each user.

Once a user enters the OTP and clicks to verify, it generates an access token which you need to send to your server.

13. This access token needs to be sent to MSG91 through the API provided in the Server-Side Integration section, displayed in the image below. Select Auth Key (If already generated) or to obtain the authkey for your account, click the "Get Authkey" link under Server-Side Integration.

14. Logs : To check logs, goto the Logs section available under OTPWidget/SDK header under the left menu. You can select the date range from the option available on the top right corner of the screen and click apply. 

Also a Filter option is available in order to create different filters as per the logs that we want to extract. Under the filter we have different options to choose from.

• Channel : Here we can either select all or else we have the option to select multiple channels. 

• Select OTP Widget : Here also we can select from the different OTP Widgets available.

• Resent Count is : Under this we can select from different conditions like the resent count is Greater Than/Less Than/Equals to the value defined by us    

• OTP Verification Status : This will sort the data on the basis of verification done by the user as soon as they hit the verify button after entering the OTP. Here the status can be selected as either verified or unverified else we can select as both (Default Selection)

• Access Token verification status : This will sort the data on the basis of verification done via Access token post the OTP verification at the users end. Here the status can be selected as either verified or unverified else we can select as both (Default Selection)

We can also see the User IP and Host under the logs. This is helpful to segregate the data as per IP or host from which the request is being received. 

Export Logs : This option is available on the top left corner. Here we can select the date range and the fields (Header under which we want to export in the log file) and then click on Export.

After clicking on Export we have to wait for a few seconds in order for the log file to be generated and then we can download the log file from the Download section available under the OTPWidget/SDK header under the left menu. Click on Select Download type and select Logs from the dropdown and then click on download button. 

Analytics : Inorder to generate Analytics goto the Analytics section available under OTPWidget/SDK header under the left menu. You’ll see Analytics on the screen. You can select the date range from the option available on the top left corner of the screen and click apply. Here you will see data grouped as OTP delivery/OTP Verifications/Channel-wise delivery.

Export Reports : This option is available on the top right corner. Here we can select the date range for which we want to export the report and enter the email address on which the analytics report will be sent. After that click on Export.

How to configure Web SDK Custom UI in OTP widget? 

The following methods, SendOTP, VerifyOTP, and RetryOTP, are provided for authentication purposes. These methods facilitate the seamless integration of the OTP verification within your custom user interface.

1. ExposeMethods:  Set exposeMethods to true within the config object in order to expose methods sendOtp, retryOtp, verifyOtp on window objects. Setting this flag to true will also not show the verification popup on the UI.

<body>
 <script type="text/javascript">
  var configuration = {
   ...,
   exposeMethods: true,
   ...,
  };
 </script>
 <script type="text/javascript" onload="initSendOTP(configuration)"
 src="https://control.msg91.com/app/assets/otp-provider/otp-provider.js"></script>
</body>

You can use pass the dynamic variable values in the same way as suggested in the Web SDK option for default UI.

2. SendOTP: This method takes an identifier (mandatory argument) & two optional callbacks for handling the success and failure scenarios. This method sends the OTP to the passed identifier. The identifier could be either an email or mobile number (it must contain the country code without +). If the API is successful then the passed success callback will be called to inform about the success. Same for the failure scenario.

window.sendOtp(
  '[email protected]', // mandatory
  (data) => console.log('OTP sent successfully.'), // optional
  (error) => console.log('Error occurred') // optional
);

// example: mobile number as identifier

window.sendOtp(
  '919999999999', // mandatory
  (data) => console.log('OTP sent successfully.'),
  (error) => console.log('Error occurred')
);

3. RetryOTP : This method is used to retry the OTP if the OTP is not received due to any reason. This method takes channel value as a mandatory argument and two optional callbacks for handling the success and failure scenarios. 

If the widget is configured with the default configuration then the channel needs to be passed as null. For custom configurations, the following values can be used for the channel:

• Sms: '11'

• Voice: '4'

• Email: '3'

• WhatsApp: '12'

The channel value determines which communication channel will be used for resending the OTP. For eg:

// Default configuration

window.retryOtp(
  null, // channel value mandatory
  (data) => console.log('resend data: ', data), // optional
  (error) => console.log(error), // optional
  '336870744532313134323444' // optional
);


// Custom configuration

window.retryOtp(
  '11', // channel value mandatory
  (data) => console.log('resend data: ', data), // optional
  (error) => console.log(error), // optional
  '336870744532313134323444' // optional
);

4. VerifyOTP : This method is used to verify the OTP entered by the user. This method takes otp value as a mandatory argument and two optional callbacks for handling the success and failure scenarios.

// For example

window.verifyOtp(
  123456, // OTP value
  (data) => console.log('OTP verified: ', data), // optional
  (error) => console.log(error), // optional
  '336870744532313134323444' // optional
);

Note: If you are listening to verifyOtp method's success and failure callbacks then you can skip the main success and failure callbacks provided within the config object. Otherwise, you will get 2 events of success and failure.

var configuration = {
    exposeMethods: true,
    success: (data) => {
      // You can ignore listening to this if the verifyOtp method's success is listened
      console.log('success response', data);
    },
    failure: (error) => {
      // You can ignore listening to this if verifyOtp method's failure is listened
      console.log('failure reason', error);
    },
  };

5. GetWidgetData : Another method exposed on the window object is getWidgetData, which returns the current configured widget data as obtained from the API.

var widgetData = window.getWidgetData();
console.log('Widget Data:', widgetData)

How to configure Mobile SDK for Custom UI in OTP widget? 

Mobile SDK is available in various programming languages and the configuration is available in the MSG91 account itself.

1. React native

2. Flutter

3. Kotlin

4. Swift (Upcoming)

5. Jenkins (Upcoming)

React Native configuration 

Step 1: Install the package in your project using the below command.

npm install @msg91comm/sendotp-react-native

Step 2: After successful installation of the package, you can import OTPVerification in your project. For example

import React, { useEffect } from 'react';
import { OTPWidget } from '@msg91comm/sendotp-react-native';

Step 3: Finally integrate the OTP verification using below code.

const widgetId = 3465756a3173343636383032;
const tokenAuth = {authToken};

const App = () => {
    useEffect(() => {
        OTPWidget.initializeWidget(widgetId, tokenAuth); //Widget initialization
    }, [])

    const [number, setNumber] = useState('');

    const handleSendOtp = async () => {
        const data = {
            identifier: '91758XXXXXXX'
        }
        const response = await OTPWidget.sendOTP(data);
        console.log(response);  
    }

    return (
        <View>
            <TextInput
                placeholder='Number'
                value={number}
                keyboardType='numeric'
                style={{ backgroundColor: '#ededed', margin: 10 }}
                onChangeText={(text) => {
                    setNumber(text)
                }}
            />

            <TouchableOpacity
                style={styles.button}
                onPress={()=>{
                    handleSendOtp()
                }}
            >
                <Text>
                    Send OTP
                </Text>
            </TouchableOpacity>
        </View>
    );
}

For any further help reach us at [email protected]. 

Follow the below steps to send OTP seamlessly-

i) Sender ID Approval (Some countries have specific rules and regulations for Sender ID) -

To send OTP globally - Follow sender ID rules for different countries

#Note - For Indian companies to send OTP in India - Follow the DLT guide

ii) Template (To keep your communication secure, spam free, and easy to edit anytime)

Create a template for sending OTP in OTP Section- ​Follow it's quick process

iii) OTP Widget - You can integrate the dedicated widget for OTP Login and all the Send, Resend, and Verify OTP APIs can be called by MSG91 at one place. Here is the Helpdoc.  [Recommended]

OR

If there is any specific use case that cannot be served by the OTP widget, you can directly integrate the SendOTP APIs at your backend, here is the API Doc.

Now similar to OTP, users can send Magic link too via OTP Widget.
Magic link is supported in all the channels excluding voice.

STEP 1: 
To create a magic link, edit your current OTP widget or create a new widget and under the widget settings, select Widget type for verification as Magic Link. 

STEP 2:

Add the redirection link where the customer can be redirected to after the verification process is completed.

STEP 3:

Select the channel for sending this link and create the widget as shared following the rest of the steps shared in this article.

Note: Magic link will not work if you are selecting the default template for OTP verification and it will also not work in the case of invisible OTP.  

STEP 4: 

Integrate the widget to your backend and start sending OTPs using magic link! 

Please find the sample email received using magic link verification below: 

You can integrate an OTP (One-Time Password) widget into your mobile application using the following SDKs for various platforms. These SDKs offer seamless OTP generation, delivery, and verification functionality.

React Native

→ https://www.npmjs.com/package/@msg91comm/sendotp-react-native

Flutter

→ https://pub.dev/packages/sendotp_flutter_sdk

Kotlin

→ https://github.com/Walkover-Web-Solution/sendotp-kotlin-sdk