Creating an OTP Input Component in React | Updated 2024

72

An OTP (One Time Password) input component is commonly used in web applications for authentication purposes. It enhances security by requiring a user to enter a code sent to their device or email. This article explains how to create a reusable OTP input component in React, including detailed coding steps.

Step-by-Step Guide for Building an OTP Input Component

Step 1: Setup Your React Project

If you’re starting from scratch, create a new React application using Create React App:

npx create-react-app otp-input-app
cd otp-input-app
npm start

Step 2: Install the Library

Begin by adding the react-otp-input library to your project. Ensure you have a React application set up. If not, create one using Create React App. Install the library with the following command:

npm install react-otp-input

Step 3: Import and Use the OTPInput Component

Import the OTPInput component from the library into your React component where you wish to use the OTP functionality.

import React from 'react';
import OTPInput from 'react-otp-input';

function App() {
    const [otp, setOtp] = React.useState('');

    const handleChange = (otp) => {
        setOtp(otp);
    };

    return (
        <div className="App">
            <h1>Enter OTP</h1>
            <OTPInput
                value={otp}
                onChange={handleChange}
                numInputs={4}
                separator={<span>-</span>}
            />
        </div>
    );
}

export default App;

In this example, the OTPInput component is configured to display four input fields with hyphens as separators.

Step 3: Customize the Appearance

The react-otp-input library allows you to customize the appearance of the OTP input fields. You can apply CSS directly or use the className prop to style the inputs.

.otpInput {
    margin: 0 4px;
    text-align: center;
    height: 40px;
    width: 40px;
    border: 2px solid #ccc;
    font-size: 24px;
}

Apply this style in your CSS file and link the className in your component:

<OTPInput
    value={otp}
    onChange={handleChange}
    numInputs={4}
    separator={<span>-</span>}
    className="otpInput"
/>

Step 4: Handling the OTP Submission

Once the user fills all the inputs, you might want to handle the OTP submission, either by calling an API or by performing a redirect, depending on your application logic.

const handleSubmit = () => {
    alert(`OTP Entered: ${otp}`);
    // Add API call or other actions here
};

Add a button to your component for submission:

<button onClick={handleSubmit}>Verify OTP</button>

Conclusion

Using the react-otp-input library simplifies the process of adding OTP inputs into your React applications. This component is highly customizable and easy to integrate, providing a seamless user experience. Whether for authentication purposes or two-factor verification, react-otp-input ensures that you can implement OTP functionalities quickly and efficiently. The customization options allow for flexibility in design and functionality, making it an excellent choice for developers looking to enhance their applications’ security and user interaction.

OTP Input Component in React – FAQs