Firebase provides a powerful and cost-effective solution for sending OTPs (One-Time Passwords) without relying on paid SMS gateways like Twilio, Msg91, or Textlocal. In this guide, you’ll learn how to integrate Firebase OTP verification in a Laravel application — completely free using test numbers or real numbers after enabling billing.

🔗 GitHub Source Code: https://github.com/codehunger-team/send-otp-for-free-using-firebase

Before moving ahead you need to collect your key and other thing from the firebase.

Create a project on firebase first -

To do that you have to create a account on the firebase https://firebase.google.com/

Now see the below image to create a new project on firebase

when you click on that give a name to your project, I have given send free otp

When you click on that it have the look like something below

Now click on all products and choose authentication

When you click on that you have the image like something below click on the get started button

From the authentication you have to choose phone

Now click on the edit button to enable it see the below image

Now click on the gear icon on the left side top then project setting and come bottom, you can see the code <> like symbol as shown in the below image.

When you click on that you have something like the below one

From here you can collect all your firebase SDK detail which we have used in the below code

🚀 Why Use Firebase for OTP?

Firebase Authentication provides a secure and reliable OTP verification system with the following benefits:

1. ✅ Free testing with predefined numbers
2. ✅ Instant integration via JavaScript
3. ✅ reCAPTCHA protection
4. ✅ Google-backed security & scalability
5. ✅ Easily extendable for mobile apps or production use

🛠️ Prerequisites

Before getting started, make sure:

1. You have a Laravel project running
2. You have a Firebase project created at https://console.firebase.google.com
3. You’ve created a Web App under that Firebase project

📁 Step 1: Setup Your Laravel Blade View

Create a new Blade file named firebase-otp.blade.php inside resources/views.

🔑 Step 2: Add Firebase Config to .env

Update your .env file with values from your Firebase project settings:

You can find these values under:

Firebase Console > Project Settings > General > Your Apps > Firebase SDK Snippet

🧪 Step 3: Add Test Numbers for Free OTP

To test without enabling billing:

1. Go to Authentication > Sign-in Method > Phone in Firebase.
2. Scroll down to Phone numbers for testing.
3. Add a test number and code, e.g.:

When you enter this number in your form, Firebase won’t send an actual SMS, but will accept the code you provide.

💳 Step 4 (Optional): Enable Real SMS (Blaze Plan Required)

To send real OTPs via SMS:

1. Upgrade to Blaze Plan (Pay-as-you-go)
2. Add a billing account to your project
3. Enable Phone Authentication in Firebase

Without this, real SMS OTPs will fail with this error:

🚦 Routes and Controller (Optional)

You can link your view in routes/web.php:

Now open: http://yourdomain.com/firebase-otp

🧠 Pro Tips

1. Always validate user input on both frontend and backend.
2. Use Firebase's onAuthStateChanged to manage user sessions if needed.
3. You can extend this flow with user creation, database linking, or OTP-based login.

📦 GitHub Source Code

All code used in this tutorial is available here:

🔗 GitHub Repository:

https://github.com/codehunger-team/send-otp-for-free-using-firebase