Welcome to Phone Number SMS Verification in Firebase! This project is designed to streamline the process of verifying users' phone numbers through SMS OTP (One-Time Password) using Firebase's authentication capabilities. With a user-friendly interface and seamless integration of Firebase services, this system offers a secure and efficient solution for implementing phone number verification in web applications.

By leveraging Firebase's SDKs for authentication and real-time communication, this project ensures reliable OTP delivery and validation, enhancing the overall security of user authentication processes. Whether you're building a new web application or enhancing an existing one, Phone Number SMS Verification in Firebase provides a robust foundation for ensuring the authenticity of user phone numbers, thereby improving trust and security in your application.

You may also check this simple HTML, CSS and JavaScript projects:

• Key Code Event Listener
• Daily Expense Monitoring Tool
• Previewed Image Magnifier
• Times for Sunrise and Sunset Finder
• Product Price Tag Generator

Features:

1. Phone Number Input: Users can input their phone numbers for verification directly in the web interface.
2. OTP Verification: The system sends a One-Time Password via SMS for verification.
3. Recaptcha Integration: It integrates Google's reCAPTCHA for added security during OTP generation.
4. Verification Status: Provides real-time feedback on whether the OTP entered by the user is correct or not.

Technologies Used:

• Firebase SDK: Specifically, the Firebase Authentication and Firebase App SDKs are utilized.
• HTML/CSS: For creating the user interface and styling elements.
• JavaScript: For client-side functionalities such as handling OTP verification and user interactions.
• Google Fonts: The project utilizes the Poppins font family for a modern and clean look.

How to Use:

1. Input Phone Number: Enter the phone number you wish to verify in the designated input field (e.g., "+639948621564").
2. Recaptcha Verification: Complete the reCAPTCHA challenge, if prompted, to ensure secure OTP generation.
3. Send OTP: Click on "Verify Number" to initiate the OTP sending process.
4. Enter OTP: Once you receive the OTP via SMS, enter it into the "OTP Code" input field.
5. Verify OTP: Click on "Send OTP" to verify the entered OTP.
6. Verification Status: Receive real-time feedback on whether the OTP entered is correct or incorrect.
7. Confirmation: Upon successful verification, the system confirms the phone number. In case of an incorrect OTP, you can retry the verification process.

Sample Screenshots of the Project:

Landing Page

Sent OTP Verification Code

OTP Input

Result

Firebase Setup:

1. Open your browser and navigate to the Firebase Console.
2. Create a Firebase account if you don't have one.
3. Create a new project and set up a web app within that project.
4. Within the Firebase Console, go to Authentication and then Sign-in Method.
5. Enable Phone as a sign-in provider to allow phone number verification for users.

How to Run?

• Download and Install XAMPP.
• Download the provided source code zip file.

Note: This folder must be store in htdocs folder to avoid error with firebase.

Installation/Setup:

• Extract the provided source code to the htdocs folder.
• Change the firebaseConfig  in the JavaScript with your personal web app keys in your personal Firebase account.
• Open your browser with the link "http://localhost/sms-otp-verification/".

Video Demonstration for Installation/Setup:

Conclusion:

In conclusion, Phone Number SMS Verification in Firebase offers a modern and reliable solution for implementing phone number verification in web applications. By utilizing Firebase's authentication and communication capabilities, this project simplifies the process of verifying user phone numbers, enhancing security, and user trust. Whether used in e-commerce platforms, social networking sites, or any other web-based system requiring user authentication, this approach ensures a seamless and secure experience for users while providing developers with a solid foundation for implementing robust authentication mechanisms.

That's it! I hope this "Phone Number SMS Verification in Firebase Using HTML, CSS and JavaScript" will assist you on your programming journey, providing value to your current and upcoming PHP projects.

For additional tutorials and free source code, explore our websites.  

Enjoy Coding :>>