Laravel with Packages | Laravel Phone Number Verification using Firebase Example
Hello,
This article will give you an example of laravel firebase phone auth. we will help you to give an example of laravel mobile number verification firebase auth. I would like to show you laravel firebase mobile OTP. it’s a simple example of firebase phone authentication laravel example. Let’s get started with laravel phone number verification with firebase.
you can easily use this example with laravel 6, laravel 7, laravel 8, and laravel 9 versions.
In this tutorial, I will create step by step simple example of firebase phone auth in laravel. we will create a firebase app and give login with phone enable. then we will write simple code for mobile verification(opt) in laravel.
let’s see below the preview and step to complete mobile verification:
Preview:
Step 1: Create Firebase Project and App
In the first step, we have to go to Firebase Console and create a project. then you have to create a web app for that project as I added bellow screenshot:
After the given name and next then you will receive firebase SDK as like below screenshot:
Next, you need to enable phone number auth from the below link:
You have to save all information because we will use it in our app.
Step 2: Install Laravel
first of all, we need to get a fresh Laravel application using bellow command, So open your terminal OR command prompt and run the below command:
composer create-project --prefer-dist laravel/laravel blogFirebaseStep 3: Create Route
Here, we need to add one route with the FirebaseController controller so let’s add that route in the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FirebaseController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('firebase-phone-authentication', [FirebaseController::class, 'index']);Step 4: Create Controller
we will create a new controller as below
now, so let’s add like as below:
app/Http/Controllers/FirebaseController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FirebaseController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index()
{
return view('firebase');
}
}Step 5: Create Blade File
let’s create a new blade file where we write all logic on phone auth.
resources/views/firebase.blade.php
<html>
<head>
<title>Laravel Phone Number Authentication using Firebase - raviyatechnical</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel Phone Number Authentication using Firebase - raviyatechnical</h1>
<div class="alert alert-danger" id="error" style="display: none;"></div>
<div class="card">
<div class="card-header">
Enter Phone Number
</div>
<div class="card-body">
<div class="alert alert-success" id="sentSuccess" style="display: none;"></div>
<form>
<label>Phone Number:</label>
<input type="text" id="number" class="form-control" placeholder="+91********">
<div id="recaptcha-container"></div>
<button type="button" class="btn btn-success" onclick="phoneSendAuth();">SendCode</button>
</form>
</div>
</div>
<div class="card" style="margin-top: 10px">
<div class="card-header">
Enter Verification code
</div>
<div class="card-body">
<div class="alert alert-success" id="successRegsiter" style="display: none;"></div>
<form>
<input type="text" id="verificationCode" class="form-control" placeholder="Enter verification code">
<button type="button" class="btn btn-success" onclick="codeverify();">Verify code</button>
</form>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyBPdVwUIYOY0qRr9kbIMTnxKpFw_nkneYk",
authDomain: "itdemo-push-notification.firebaseapp.com",
databaseURL: "https://itdemo-push-notification.firebaseio.com",
projectId: "itdemo-push-notification",
storageBucket: "itdemo-push-notification.appspot.com",
messagingSenderId: "257055232313",
appId: "1:257055232313:web:3f09127acdda7298dfd8e8",
measurementId: "G-VMJ68DFLXL"
};
firebase.initializeApp(firebaseConfig);
</script>
<script type="text/javascript">
window.onload=function () {
render();
};
function render() {
window.recaptchaVerifier=new firebase.auth.RecaptchaVerifier('recaptcha-container');
recaptchaVerifier.render();
}
function phoneSendAuth() {
var number = $("#number").val();
firebase.auth().signInWithPhoneNumber(number,window.recaptchaVerifier).then(function (confirmationResult) {
window.confirmationResult=confirmationResult;
coderesult=confirmationResult;
console.log(coderesult);
$("#sentSuccess").text("Message Sent Successfully.");
$("#sentSuccess").show();
}).catch(function (error) {
$("#error").text(error.message);
$("#error").show();
});
}
function codeverify() {
var code = $("#verificationCode").val();
coderesult.confirm(code).then(function (result) {
var user=result.user;
console.log(user);
$("#successRegsiter").text("you are register Successfully.");
$("#successRegsiter").show();
}).catch(function (error) {
$("#error").text(error.message);
$("#error").show();
});
}
</script>
</body>
</html>Ok, now we are ready to run.
So let’s run the project using this command:
php artisan serveI hope it can help you...