How to create OTP Input Box Using React ?

Last Updated : 25 Jul, 2024

Let us explore the implementation of OTP (One-Time Password) login functionality using ReactJS. OTP-based logins add an extra layer of security to your applications, making them more resilient against unauthorized access.

Prerequisites:

React
HTML, CSS and JavaScript

Approach:

Create a React functional component managing the OTP input state using useState.
Utilize useEffect to focus on the first input during component mount.
Map through OTP values, rendering individual input boxes with associated refs.
Implement onChange to update OTP values and move focus to the next box if a valid number is entered.
Use onKeyDown to delete current input and move focus to the previous box on backspace/delete.
Apply CSS styles for dimensions and appearance.
Integrate the OTP component into a parent component, managing overall input flow and potential API calls.

Steps to Create the Project:

Step 1: Set Up Your React App with Vite:

npm create vite@latest

Step 2: Navigate to the Project Directory

cd otp-login

Step 3: Install the package dependency.

npm install

Project Structure:

Screenshot-2024-02-09-204756 — project structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "web-vitals": "^2.1.4"
}

Example: Below are the example to show OTP input box using ReactJS.

JavaScript

// App.js
import React, { useState, useRef } from 'react';

const OTPInput = ({ length = 6 }) => {
  const [otp, setOtp] = useState(Array(length).fill(''));
  const inputs = useRef([]);

  const handleChange = (e, index) => {
    const { value } = e.target;

    // Only allow single digit input
    if (value.match(/^\d$/)) {
      const newOtp = [...otp];
      newOtp[index] = value;
      setOtp(newOtp);

      // Move focus to the next input
      if (index < length - 1) {
        inputs.current[index + 1].focus();
      }
    }

    // Move focus to previous input on backspace
    if (value === '' && index > 0) {
      inputs.current[index - 1].focus();
    }
  };

  const handleKeyDown = (e, index) => {
    if (e.key === 'Backspace' && otp[index] === '') {
      // Move focus to previous input on backspace if current input is empty
      if (index > 0) {
        inputs.current[index - 1].focus();
      }
    }
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      {otp.map((_, index) => (
        <input
          key={index}
          type="text"
          maxLength="1"
          value={otp[index]}
          onChange={(e) => handleChange(e, index)}
          onKeyDown={(e) => handleKeyDown(e, index)}
          ref={(el) => (inputs.current[index] = el)}
          style={{
            width: '40px',
            height: '40px',
            margin: '0 5px',
            textAlign: 'center',
            fontSize: '18px',
            border: '1px solid #ccc',
            borderRadius: '4px',
          }}
        />
      ))}
    </div>
  );
};

const App = () => {
  const [mobileNumber, setMobileNumber] = useState('');
  const [showOtpInput, setShowOtpInput] = useState(false);

  const handleMobileNumberSubmit = (e) => {
    e.preventDefault();
    // Here you could send the mobile number to an API to send an OTP
    // For demo purposes, just show OTP input
    setShowOtpInput(true);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
      {!showOtpInput ? (
        <form onSubmit={handleMobileNumberSubmit} style={{ textAlign: 'center' }}>
          <h3>Enter your mobile number</h3>
          <input
            type="text"
            value={mobileNumber}
            onChange={(e) => setMobileNumber(e.target.value)}
            placeholder="Mobile Number"
            style={{
              width: '250px',
              padding: '10px',
              margin: '10px 0',
              border: '1px solid #ccc',
              borderRadius: '4px',
            }}
          />
          <button type="submit" style={{
            padding: '10px 20px',
            border: 'none',
            borderRadius: '4px',
            backgroundColor: '#007bff',
            color: '#fff',
            cursor: 'pointer'
          }}>
            Send OTP
          </button>
        </form>
      ) : (
        <div>
          <h3>Enter the OTP sent to your mobile number</h3>
          <OTPInput length={6} />
        </div>
      )}
    </div>
  );
};

export default App;