Documentation - eOTP

How eOTP Works

eOTP is a robust one-time password (OTP) solution designed to secure your applications with minimal effort. It integrates seamlessly into your existing systems, delivering OTPs via multiple channels to ensure user authentication is both fast and reliable.Whether you’re protecting user logins, sensitive data, or adding an extra layer of security, eOTP scales with your needs.

Generating an appCode Token

To use eOTP, you’ll need an `appCode` token, which authenticates your application with our servers. Follow these steps to generate one:

Log in to your eOTP dashboard Here.
Navigate to the AppCode section.
Click Create New AppCode and name it (e.g., "MyApp-Prod").
Complete the form and make sure to provide a Website to Whitelist
Copy the generated `AppCode`
Store it securely in your application’s environment variables.

Note: Each AppCode you create is linked to your website and cannot be re-used.

Using eOTP in Your Application

Once you have your `AppCode`, integrating eOTP is simple. Include the eOTP JavaScript library and initialize it with your token. Below are examples for different use cases.

Basic Initialization

Start by adding the library and initializing it with your `appCode`. This code will trigger an OTP to be sent instantly!

<script delay src="https://api.e-otp.com/eotp.js"></script>
<script>
   EmbedOTP.init({
        appCode: "your-appCode-here",
        container: "#your-eotp-container-id",
        msisdn:"Cellphone Number goes here ",
        email: "Email Address goes here",
        onSuccess: function(token) {
                console.log("Verified! Token:", token);
        }
    });
</script>

In your HTML you will need a div container that will allow eOTP to append the User Interface (UI) to:

 <div id="your-eotp-container-id"></div>

Fields

Each field is explained as follows

            appCode: Your unique AppCode linked to your website
            container: The section or container of your website that the eOTP snippet will append to
            msisdn: The CellPhone number of the person you want the OTP to go to (example 11234567890)
            email: The Email Address of the person you want the OTP to go to (example person@domain.com)
            onSuccess: This is the Success Function that will trigger when an OTP has been successfully inputted and checked to be correct

Note:You will need either MSISDN or EMAIL or both in the case of multiple Active Methods.

Starting the Verification Process

Once the Initialization (init) is complete, you can trigger the OTP to be sent to the user and begin the Verification Process. This will also display the User Interface to the user so they can enter their OTP to verify lets build on the code we have already:

eOTP.init({
  appCode: "your-appCode-here",
        container: "#your-eotp-container-id",
        msisdn:"Cellphone Number goes here ",
        email: "Email Address goes here",  
        onSuccess: function(token) {
        console.log("Verified! Token:", token);
                     
        }
}).then(() => {
                    console.log("Init complete, starting verification");
                    EmbedOTP.startVerification(document.getElementById(#your-eotp-container-id));
                })
                .catch(err => {
                    console.error("Init failed:", err);
                });

Heads Up: When the init is complete it will return a promise to learn more about a Javascript Promise click here

startVerification will send out the OTP message to the user and append the eOTP UI to your container so they can verify the code. A Token will be returned to you to confirm that the user has been authorized

Verifying the Token

As an extra security step, you can verify the Token to insure the person is authorized and that they have verified the OTP! Lets take the token returned in the onSuccess and verify it:

  
                let myToken ="";
                ...
                // the code that we wrote above remains the same,  

        onSuccess: function(token) {
        console.log("Verified! Token:", token);
        myToken = token;
        }

                ...

            fetch('https://api.e-otp.com/validate-token', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ Token: myToken })
        })
        .then(response => {
            if (response.ok) {
                alert("Verified!")
            }
          
        })

Note: We strongly suggest that the above /validate-token is done in Code Behind (PHP, C#, Python, VB etc) to prevent spoofing

Custom Options

eOTP allows for custom theming so that the embedded content better fits the theme of your website. By default, the theme is set to Dark

Currently there are 5 preset themes:

Dark
Blue
Green
Grey
Light

<script delay src="https://api.e-otp.com/eotp.js"></script>
<script>
   EmbedOTP.init({
        appCode: "your-appCode-here",
        container: "#your-eotp-container-id",
        msisdn:"Cellphone Number goes here ",
        email: "Email Address goes here",
        theme: "blue"
        onSuccess: function(token) {
                console.log("Verified! Token:", token);
        }
    });
</script>

Note: Themes in the .init must be all lower case

In addition to the custom themes you can customize the content yourself! Replace the string with a theme object:

<script delay src="https://api.e-otp.com/eotp.js"></script>
<script>
   EmbedOTP.init({
        ...

        theme: {
                background: 'linear-gradient(145deg, #2c3e50, #3498db)',
                textColor: '#ecf0f1',
                buttonBackground: 'linear-gradient(145deg, #e74c3c, #c0392b)',
                buttonTextColor: '#ffffff',
                errorColor: '#e91e63',
                timerColor: '#bdc3c7',
                inputBackground: '#34495e',
                borderColor: '#7f8c8d'
            },

        ...
    });
</script>

Note: You can use linear-gradient or Hexadecimal(hex) color options here only

eOTP Documentation