@devotp/web-sdk

Drop-in OTP verification widget for the web. Wires the headless @devotp/react-ui components to the DevOTP backend -- just provide your siteId.

Installation

npm install @devotp/web-sdk
# or
bun add @devotp/web-sdk

React Usage

import { DevOtpSdk } from "@devotp/web-sdk";
import type { OnSuccessData, OnErrorData } from "@devotp/web-sdk";

function App() {
  const handleSuccess = (data: OnSuccessData) => {
    console.log("Verified!", data.type, data.signature);
  };

  const handleError = (error: OnErrorData) => {
    console.error(error.stage, error.error);
  };

  return (
    <DevOtpSdk
      siteId="your-site-id"
      identifierType="both"
      onSuccess={handleSuccess}
      onError={handleError}
    />
  );
}

Script Tag / Standalone Usage

The standalone build exposes a window.DevOtp global API. No bundler required.

<div id="devotp-container"></div>
<script src="https://cdn.example.com/devotp-sdk.bundle.js"></script>
<script>
  DevOtp.init({
    siteId: "your-site-id",
    containerId: "#devotp-container",
    identifierType: "both",
    onSuccess: function (data) {
      console.log("Verified!", data.type, data.signature);
    },
    onError: function (error) {
      console.error(error.stage, error.error);
    },
  });
</script>

Legacy Functions

For backward compatibility with the previous SDK, window.Devotp is also available:

// Email-only verification
DevOtp.initEmailVerification("#container", {
  siteId: "your-site-id",
  onSuccess: (data) => { /* ... */ },
});

// Phone-only verification
DevOtp.initPhoneVerification("#container", {
  siteId: "your-site-id",
  onSuccess: (data) => { /* ... */ },
});

Props (DevOtpSdkProps)

| Prop | Type | Default | Description | |------|------|---------|-------------| | siteId | string | required | Your DevOTP site ID | | identifierType | "email" \| "phone" \| "both" | "both" | Which input(s) to show | | onSuccess | (data: OnSuccessData) => void | -- | Called after successful verification | | onError | (error: OnErrorData) => void | -- | Called on any error |

Callback Types

OnSuccessData

interface OnSuccessData {
  type: "email" | "phone";
  identifier: string;
  signature: string;
  timestamp: number;
  country?: string;
}

OnErrorData

interface OnErrorData {
  type: "email" | "phone";
  error: string;
  stage: "send_otp" | "verify_otp" | "validation";
  identifier?: string;
}

Standalone Init Config

| Property | Type | Default | Description | |----------|------|---------|-------------| | siteId | string | required | Your DevOTP site ID | | containerId | string \| Element | required | CSS selector or DOM element to mount into | | identifierType | "email" \| "phone" \| "both" | "both" | Which input(s) to show | | onSuccess | (data: OnSuccessData) => void | -- | Success callback | | onError | (error: OnErrorData) => void | -- | Error callback |

Advanced

This package also re-exports all headless components and utilities for advanced use cases:

• Components: DevOtp, DevOtpProvider, IdentifierStep, OtpModal, OtpInputBoxes, CountrySelector
• Hooks: useDevOtp, useDevOtpContext
• Utilities: createDevOtpHandlers, fetchThemeConfig, mapThemeToStyles, detectCountry, countryData