Firebase is a realtime cloud-hosted NoSQL database platform developed by Google. With Firebase, you can create real-time chat application, send notification and lots of stuff. Firebase offers free services up to some limits.
In this tutorial, I will share you how you can add OTP feature in authentication system in Laravel 8. This will add extra security to user account.
We will start from step by step from starting. So let's start from creating Firebase account.
First of all create a account at Firebase. Then you will need to create a project in Firebase. Once you have created account. You need to enable phone authentication.
We also need to download the Firebase config file from project's apps from project settings page. We need this config file to configure your app to use Firebase. It is credentials of firebase project like that. We will put this file into blade view.
const config = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXX.firebaseapp.com",
databaseURL: "XXXXXXXXX.firebaseio.com",
projectId: "XXXXXXXXX",
storageBucket: "XXXXXXXXX.appspot.com",
messagingSenderId: "XXXX",
appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
measurementId: "XXXXXX"
};
In the second step, we create Laravel 8 application using composer command. So Open your Terminal and run below command:
composer create-project laravel/laravel firebase
And change current directory to project root
cd firebase
In this step, we will create a controller using artisan command. So run below command to create controller.
php artisan make:controller FirebaseController
It will create a controller file at app/Http/Controllers/FirebaseController.php
. Now open that file and add otp method.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FirebaseController extends Controller
{
/**
* otp view.
*
* @return view
*/
public function otp()
{
return view('otp');
}
}
We need to create a route to handle controller method. So open routes/web.php file and add new route.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FirebaseController;
Route::get('otp', [FirebaseController::class, 'otp'])->name('otp');
In this step, we will create a blade view otp.blade.php in resources/views
directory. In this blade view we will include Firebase Javascript code for send and verify OTP. We will use Firebase CDN so we can user Firebase without installing in project.
<!doctype html>
<html>
<head>
<title>Phone number authentication</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.hide {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center m-3">Phone number authentication</h1>
<div class="alert alert-danger hide" id="error-message"></div>
<div class="alert alert-success hide" id="sent-message"></div>
<div class="card">
<div class="card-body">
<form>
<div class="mb-3">
<label for="phone-number" class="form-label">Phone Number:</label>
<input type="text" id="phone-number" class="form-control" placeholder="+1XXXXXXXXXX">
</div>
<div id="recaptcha-container"></div>
<button type="button" class="btn btn-info" onclick="otpSend();">Send OTP</button>
</form>
</div>
</div>
<div class="card mt-3">
<div class="card-body">
<form>
<div class="mb-3">
<label for="otp-code" class="form-label">OTP code:</label>
<input type="text" id="otp-code" class="form-control" placeholder="Enter OTP Code">
</div>
<button type="button" class="btn btn-info" onclick="otpVerify();">Verify OTP</button>
</form>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-auth.js"></script>
<script type="text/javascript">
const config = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXX.firebaseapp.com",
databaseURL: "XXXXXXXXX.firebaseio.com",
projectId: "XXXXXXXXX",
storageBucket: "XXXXXXXXX.appspot.com",
messagingSenderId: "XXXX",
appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
measurementId: "XXXXXX"
};
firebase.initializeApp(config);
</script>
<script type="text/javascript">
// reCAPTCHA widget
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
onSignInSubmit();
}
});
function otpSend() {
var phoneNumber = document.getElementById('phone-number').value;
const appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then((confirmationResult) => {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
document.getElementById("sent-message").innerHTML = "Message sent succesfully.";
document.getElementById("sent-message").classList.add("d-block");
}).catch((error) => {
document.getElementById("error-message").innerHTML = error.message;
document.getElementById("error-message").classList.add("d-block");
});
}
function otpVerify() {
var code = document.getElementById('otp-code').value;
confirmationResult.confirm(code).then(function (result) {
// User signed in successfully.
var user = result.user;
document.getElementById("sent-message").innerHTML = "You are succesfully logged in.";
document.getElementById("sent-message").classList.add("d-block");
}).catch(function (error) {
document.getElementById("error-message").innerHTML = error.message;
document.getElementById("error-message").classList.add("d-block");
});
}
</script>
</body>
</html>
In the above blade, we first create Firebase app instance using firebase.initializeApp() method. An invisible recaptcha is also loaded. we call Javascript otpSend() method when user click send OTP button and otpVerify() method when user click Verify OTP button.
Now everything is ready for testing. From the Terminal, run Laravel server using artisan command.
php artisan serve
In your web browser, go to http://localhost:8000/otp
and try it. For debugging purpose, open and keep watch on browser console.
I hope you liked this article.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Create Multilevel Nested Comment System in Laravel 7.x Example
Hey Artisan Hope you are doing well i...How to Check If an Array Includes an Object in JavaScript
Use the JavaScript some() Method You...No application encryption key has been specified.
Today i will share with you one of the c...How to add or remove package in Laravel application
When you upgrade your Laravel applicatio...PHP - How To Integrate Paypal Payment Gateway In PHP
Today, laravelcode share with you how to...