getlost01/phone_otp_verification_react_firebase

phone number authentication useing firebase and react js

OTP Verification App

Table of Contents

1. Introduction
2. Good to Have
3. Tech Stack
4. Getting Started
5. Usage

Introduction

The OTP Verification App is a web application that verifies mobile phone numbers using one-time passwords (OTP). It's a simple and user-friendly solution. Having 3 pages: Screen-1: Mobile Number Screen Screen-2: OTP Verification Screen Screen-3: Success Screen

Preview

Good to Have

• Country Code Selection: Allow users to choose their country code.
• Comprehensive Field Validations: Prevent users from entering incorrect values.
• Error Handling: Handle various scenarios, like incorrect numbers or failed OTP delivery.
• Responsive Design: Ensure the app works on different devices.

Tech Stack

• React.js: For the front-end.
• JavaScript (JS): For scripting.
• Firebase: For user accounts and OTP storage.
• SMS Service: For sending OTPs.
• REST API: For backend servers communication

Getting Started

To get started with the OTP Verification App, follow these steps:

1. Clone this repository to your local machine.

git clone https://github.com/your-username/otp-verification-app.git

2. Navigate to the project directory.

cd otp-verification-app

3. Install the required dependencies.

npm install

4. Configure Firebase and the SMS service with your credentials and API keys. Refer to the project's documentation for specific configuration details.
5. Start the development server.

npm start

6. Open your web browser and access the app at http://localhost:3000.

Usage

1. Open the app.
2. Enter your mobile number and, if necessary, select the country code.
3. Click "Send OTP."
4. Check your phone for the OTP.
5. Enter the OTP.
6. Click "Verify OTP."
7. See a success message or error.
8. Change the country code or mobile number as needed.

Made with ❤️ and ReactJS (aka Javascript)