OTP Verfication Design Using ReactJS

OTP Verification is oftenly used for user verification in website and mobile application. In this article we are going to develop a advanced OTP verification Design Using ReactJS that consist of following functionality :- 

1. The user can enter only a 6 digit OTP (No other characters are allowed)
2. Once a digit is entered, the focus should move to the next input.
3. Backspace should delete the input and focus on the previous input.
4. The user can navigate the input boxes with arrow keys. 
5. If the user pastes the OTP from the clipboard, it should auto-fill the input boxes.

Starting from scratch, building a OTP Verification design using React. We'll learn about the basic setup for react. To finish off, we will design out OTP verification UI using CSS module.

Without making any further delay, let's jump into the creating a react application using below command.

npx create-react-app otp_verification_ui

Now just remove everything from your OTP Verification project directory which are the pre-given by create-react-app excepts following file. Maintain a folder structure of application as below:- 

Here we have replaced the App.css file with App.module.css file because we are working with CSS module in OTP Verification Design.

In this tutorial we are going to use 2 extra files.

1. OTP Verification Input file that will handle all the functionality of OTP Verification Design that are mentioned above.
2. CSS module file for styling our OTP verification Design using ReactJS.

Let’s create those files. In the src folder, create the following folder: src/components/ Within that newly created folder, let’s create two files:

• src/components/InputOTPScreen.js
• src/components/InputOTPScreen.module.css

Now open App.js file and write the following code in the App.js file. App.js file will be responsible for popup button which will hide and show the OTP verification UI-Design. Each step of the process/code is explained using the comment in the code itself.

import styles from './App.module.css';
import React, { useState } from 'react';
import InputOTPScreen from './components/InputOTPScreen';

const App = () => {
  const [popup, setpopup ] = useState(false);
  return (
    <>
      <section className={styles.appContainer}>
        {/* button for popping up the otp screen */}
        <button
          className={styles.popupButton}
          onClick={setpopup(!popup)}
        >
          Send OTP
        </button>
      </section>
      {/* Input otp screen component with state popup props */}
      <InputOTPScreen popup = {popup}/>
    </>
  )
}

export default App

Here we yet not create our InputOTPScreen component, don't worry about that we will create it little bit later. let's continue to next step.

Now we have to write code for the design of popup button(Send OTP). So open the src/App.module.css file and write the below code in it.

.appContainer{
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.popupButton{
    position: absolute;
    padding:9px 25px;
    border-radius: 20px;
    display: block;
    left:5%;
    bottom:4%;
    background-color: #E03B8B;
    color:#f1f1f1;
    border:none;
    outline:none;
    font-size:12px;
}

Now finally Its time to create the InputOTPScreen component which is responsible for all functionality of OTP verification Design. In this component we will be dealing with ReactJS hooks(useState) and multiple event such as onChange, onFocus , onKeyUp) etc. Each line of  code is is explained using the comment which will make better understanding with the process of OTP verification design.

Open your src/component/InputOTPScreen.js file and write the following code in the file.

import React, {useState} from 'react'
import styles from './OTPScreen.module.css';

const InputOTPScreen = ({ popup }) => {
    // length of otp you can change it as per required length of otp
    const lengthInput = 6;
    //useState for handling otp array || initializing it with and empty array with length = 6;
    const [otp , setOtp] = useState(new Array(lengthInput).fill(''))
   
    const handleChange = (event,index) =>{
        // handling the charecter type of otp value
        if(isNaN(event.target.value)) return false;
        //handling the length of last digit of the otp;
        if(event.target.value.length > 1 && index === 5) return false;

        //update the otp array on change of entered value in the otp input field.
        setOtp([...otp.map((data, id) => 
            (id === index) ? event.target.value : data
        )])
        
        // focus next input box
        if(event.target.nextSibling){
            event.target.nextSibling.focus();
        }

        //code for copy pasting the otp 
        if(event.target.value.length === 6){
            var splitedArr = Array.from(event.target.value)
            setOtp(splitedArr)
            // foucsing the last otp digit field after pasting 6 digit otp
            //child node index starts from 0;
            event.target.parentNode.childNodes[5].focus();
            
        }
        
    }

    // function to handle the keyUp event
    const handleKeyUp = (e) => {

        // code for backspace or deleting the otp value
        if(e.key === "Backspace" && e.target.previousSibling){
            e.target.previousSibling.focus();
        }

        //code for moving left side 
        if(e.key === "ArrowLeft" && e.target.previousSibling){
            e.target.previousSibling.focus();
        }

        // code for moving right side
        if(e.key === "ArrowRight" && e.target.nextSibling){
            e.target.nextSibling.focus();
        }
    }
    return (
        <section className={`${styles.popupContainer} ${ popup ? styles.showPopup : ""}`}> {/* if popup value will be true then this section will be visible only */}
            <div className = {styles.otpScreen}>
                <h1>Phone Verification</h1>
                <p>Enter the OTP you recived on 89-3986-XXXX</p>
                <div className={styles.otpField}>

                    { otp.map((data, index) =>{
                       return (
                            <input
                                key={index}
                                type="text"
                                value={data}
                                // pattern is responsible for only opening numeric keyboard
                                pattern="\d*" 
                                name="otp"
                                onChange = { e => handleChange(e, index)}
                                onFocus = {e => e.target.select()}
                                onKeyUp = {e => handleKeyUp(e)}
                            />
                        )
                    })}
                </div>
                <div className={styles.verificationOption}>
                    <a href="/">Change Number</a>
                    <a href="/">Re-send OTP</a>
                </div>
                <button className={styles.verifyButton}>Verfiy Phone Number</button>
            </div>
        </section>
    )
}

export default InputOTPScreen;

Hurray !!! We are about to complete it.

Now we have the last step in OTP verification Design that is styling our InputOTPScreen component. So without any delay open you src/components/InputOTPScreen.module.css file and write down the following CSS code in it.

.popupContainer{
    display:none;
}
.showPopup{
    display: block;
}
.otpScreen{
    position: absolute;
    top:5%;
    left:30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height:90vh;
    width:35vw;
    margin:auto;
    box-shadow: 6px -10px 49px -20px rgba(255,255,255,0.68);
    background-color: #f1f1f1;
    border-radius:20px;
}
.otpScreen h1{
    font-size:1.5rem;
    margin-top: 4rem;
}
.otpScreen p{
    font-size:14px;
    margin-top:0.3rem;
}
.otpField{
    margin:auto;
    width:80%;
    margin-bottom:2rem;
   
}
.otpField input{
    width:12%;
    margin:0rem 0.5rem;
    text-align: center;
    border:none;
    padding:0.5rem 0.5rem;
    font-size:16px;
    border-bottom: 2px solid black;
    color:#000;
    background: none;
}
.otpField input:focus{
    outline:none;
}
.verificationOption{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width:100%;
    margin-bottom:8rem;
}
.verificationOption a{
    font-size:18px;
    font-weight:600;
    color:#3944F7;
    text-decoration: none;
}
.verifyButton{
    margin-bottom:5rem;
    border-radius: 20px;
    padding:0.5rem 2rem;
    font-size:16px;
    font-family: 'Poppins', sans-serif;
    border:none;
    outline:none;
    background-color: #E03B8B;
    color:#f1f1f1;
}

@media (max-width: 768px){
    .otpScreen{
        top:2%;
        left:2%;
        height:88vh;
        width:95vw;
    }
    .otpField{
        width:90%;
        margin:auto;
    }
    .otpField input{
        width:10%;
        margin:0rem 0.6rem;  
    }
    .verificationOption a{
        font-size:16px;
    }
}

That's it we have successfully developed the OTP Verification Design Using ReactJS.

If your code does not work or you’ve faced any error/problem then you can download the source code files from the given download button. 

If you have any query related to OTP Verification Design Using ReactJS write down it below in the comment section. You can also connect with me on social media platform and email for other discussion related to article and etc.