Firebase helps us to make our app the best it can be with tools for the entire journey. Firebase provides detailed documentation and cross-platform SDKs to help us build and ship apps on Android, iOS, the web, C++, and Unity. In this tutorial, I will give you an example of laravel 9 firebase phone auth step by step example guide.
This laravel firebase auth tutorial is a bit complex tutorial than other authentication policies in laravel. I’m going to show you about laravel 9 mobile number verification firebase auth tutorial. I want to show you laravel 9 firebase mobile otp verification example. This tutorial will give you a simple example of firebase phone authentication laravel 9 example.
You need to just follow the bellow tutorial step to complete laravel 9 phone number verification with firebase. In this tutorial, I will create step by step simple example of firebase phone auth in laravel 9. I will create firebase app and I will show you also how to enable enable number to get verification. Let's start laravel firebase tutorial.
Preview: Login page
Step 1: Create App
In the first step, we have to go to Firebase Console and create a project. then you have to create a web app on that project as i added bellow screenshot:
After the given name and next then you will receive firebase SDK as like below screenshot:
Next, we need to enable phone number auth from bellow link: Authentication
You need to save that all information because we will use it in our app.
Step 2: Install Laravel
First of all, we need to get a fresh Laravel 9 version application using the bellow command, So open your terminal OR command prompt and run the bellow command to start laravel 9 firebase mobile number otp authentication tutorial:
composer create-project laravel/laravel example-app
Read also: Laravel 9 Google Two Factor (2FA) Authentication Tutorial
Step 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
In this step, we need to create a controller and update it like the 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 - laravelia.com</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 - laravelia.com</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: "AIzaSyBsFTV5BOLHIRfjn1TBeyb33o1vv1NSuAM",
authDomain: "laravel-tutorial-61e1a.firebaseapp.com",
projectId: "laravel-tutorial-61e1a",
storageBucket: "laravel-tutorial-61e1a.appspot.com",
messagingSenderId: "757493199742",
appId: "1:757493199742:web:3a49935a25bc0160d0392f",
measurementId: "G-XXNE1R1BZR"
};
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 go and test our laravel firebase authentication system. So let's run the project using this command:
php artisan serve
Now you can test our application by visiting the below URL:
URL
Read also: Laravel 9 SMS Based Two Factor (2FA) Authentication
Conclusion
Now we know laravel 9 firebase mobile number (OTP) authentication tutorial. Hope this example of firebase phone auth in laravel 9 tutorial will help you.