Part of the Explita Cloud Auth Platform

A lightweight and flexible OTP (One-Time Password) utility for frontend applications. cloud-otp-client is designed to integrate seamlessly with the Explita Cloud Auth platform, providing secure and user-friendly OTP flows for email, SMS, or any custom channel.

✨ Features

• 🔐 Easy-to-use hook for sending and verifying OTPs
• 📬 Channel-aware — supports email, SMS, and more
• 📦 Minimal and framework-agnostic (perfect for React, Next.js, etc.)
• 🔄 Built-in support for retries, expiration, and status handling
• 🧩 Pairs effortlessly with cloud-auth-client and cloud-auth-express

🚀 Installation

npm install @explita/cloud-otp-client

or

yarn add @explita/cloud-otp-client

or

pnpm add @explita/cloud-otp-client

Add the CSS

import '@explita/cloud-otp-client/styles.css';

🔐 Usage

import { OTPDialog, useOTP } from "@explita/cloud-otp-client";
import { Button } from "./ui/button";
import { RiDeleteRow } from "react-icons/ri";

const otp = useOTP({
    referenceId: "1",
    sentTo: "user!.email",
    channel: "email",
    onVerified: () => console.log("Verified"),
    sendOnMount: true, //send otp on mount, optional default = true
    onError: () => {
      toast.error("Failed to send OTP");
    },
    onCanceled: () => {
      toast.error("OTP request canceled");
    },
    onSend: () => {
      toast.success("OTP sent successfully");
    },
  });

  return (
    <>
      <OTPDialog use={otp} />

      <Button variant="destructive" size={"sm"} onClick={otp.open}>
        <RiDeleteRow /> <span>Clear Test Data</span>
      </Button>
    </>
  );

Getting started

Sign up for an account at Explita Cloud, create a project, add auth service and get your API key from the dashboard and add it to your environment variables.

📄 License

MIT — Made with ❤️ by Explita