useOtpAutofill

A lightweight React hook that automatically reads OTP (One-Time Password) codes from SMS using the Web OTP API.

Perfect for login or verification screens — it automatically fills the OTP when the SMS arrives.

🚀 Installation

npm install use-otp-autofill
# or
yarn add use-otp-autofill

⚙️ Usage

import { useState } from "react";
import useOtpAutofill from "use-otp-autofill";

export default function OtpInput() {
  const [code, setCode] = useState("");

  useOtpAutofill(setCode);

  return (
    <input
      type="text"
      value={code}
      onChange={(e) => setCode(e.target.value)}
      placeholder="Enter OTP code"
    />
  );
}

When an SMS arrives with a supported format, the browser will automatically fill in the OTP code.

🧠 Options

| Option | Type | Default | Description | | ------ | --------- | ------- | ------------------------------ | | skip | boolean | false | Disable OTP autofill when true |

🧩 Requirements

• Supported only on Android Chrome (v84+)
• Requires SMS message in the Web OTP format

Example message format:

Your verification code is: 123456
@yourdomain.com #123456

⚠️ Note

This hook will safely do nothing in browsers that don't support the Web OTP API.

📄 License

MIT