How to create an OTP verification screen in React

In today's digital world, ensuring the security of user accounts and data is paramount. One way to enhance security is by implementing OTP (One-Time Password) verification screens, which add an extra layer of protection to user accounts.

In this article, we'll walk you through creating an OTP verification screen in your React application using the react-otp-input library. It's a simple and effective way to safeguard your application from unauthorized access.

Demo Application

Output - How to create an OTP verification screen in React - Clue Mediator

How to create an OTP verification screen in React

1. Project structure
2. Package dependencies
3. Implementation
4. Output

1. Project structure

• react-otp-verification-screen

  • node_modules

  • public

    • index.html

  • src

    • App.js
    • index.css
    • index.js

  • package-lock.json

  • package.json

  • README.md

2. Package dependencies

Run the following command to install react-otp-input npm package.

npm i react-otp-input

You will find the version of the following packages in React application.

react

^18.2.0

react-otp-input

^3.0.4

3. Implementation

Refer to the following files for implementation.

App.js

import React, { useState } from 'react';
import OtpInput from 'react-otp-input';

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

  const handleVerify = () => {
    // Send 'otp' to your server for validation
    // If validation is successful, proceed; otherwise, show an error message
    console.log('OTP is ', otp);
  };

  return (
    <div class="App">
      <h2>OTP verification screen in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h2>
      <otpinput value={otp} onchange={setOtp} numinputs={4} renderseparator="{<span"> }
        inputType="tel"
        containerStyle={{ display: 'unset' }}
        inputStyle={{ width: "3rem", height: "3.5rem" }}
        renderInput={(props) => <input {...props}="" class="otp-input">}
      />
      <div class="btn-container">
        <button onclick={handleVerify}>Verify OTP</button>
      </div>
    </otpinput></div>
  );
}

export default App;

Let's break down each of the props and their purposes:

• <OtpInput> is a React component from the react-otp-input library that facilitates the creation of OTP input fields.
• value={otp}: This prop establishes a connection between the otp variable (controlled component) and the OtpInput component. It ensures that the OTP input field reflects the value stored in the otp variable and allows users to interact with it.
• onChange={setOtp}: This prop specifies the function to be called whenever the OTP input changes. In this case, the setOtp function will be invoked with the new OTP value whenever a user types or modifies the OTP.
• numInputs={4}: Here, numInputs defines the number of input boxes or digits that the OTP should consist of. In this case, it's set to 4, indicating that the OTP will be a 4-digit code.
• renderSeparator={<span>&nbsp;</span>}: This prop allows customization of the separators between individual OTP digits. In this example, it uses an HTML span element with a non-breaking space ( ) as the separator. This results in a visual space between each digit.
• inputType="tel": The inputType prop specifies the HTML input type for the OTP input field. Setting it to "tel" is suitable for OTP inputs, as it may trigger numeric keyboards on mobile devices.
• containerStyle={{ display: 'unset' }}: This prop defines the CSS style for the container that holds the OTP input field. In this case, it uses inline styles to set the display property to 'unset', which allows the OTP input to inherit its container's display style. You can further customize the styling by modifying this object.
• inputStyle={{ width: "3rem", height: "3.5rem" }}: Similarly, this prop specifies the CSS style for the individual OTP input boxes (digits). It sets the width to 3 rem (units relative to font size) and the height to 3.5 rem, ensuring each digit box has a consistent size.
• renderInput={(props) => <input {...props} className='otp-input' />}: Here, the renderInput prop enables the customization of the appearance of the OTP input field. It takes a function that returns a custom input element. In this case, it returns an <input> element with the className set to 'otp-input', allowing you to apply custom CSS styles to the input field, such as specifying its appearance or adding additional styling classes.

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.App {
  text-align: center;
}

.otp-input {
  font-size: 24px;
  border: solid 2px #bbb;
  margin-right: 10px;
}

.otp-input:last-child {
  margin-right: 0;
}

.btn-container {
  margin-top: 20px;
}
.btn-container button {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 16px;
}
.btn-container button:hover {
  cursor: pointer;
  background-color: #e5e5e5;
}

4. Output

Run your application and check the output in the browser.
Live Demo

That's it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

GitHub Repository StackBlitz Project