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

laravel-9-phone-number-authentication-with-firebase

 

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:

laravel-firebase-login

After the given name and next then you will receive firebase SDK as like below screenshot:

laravel-firebase-login-2

Next, we need to enable phone number auth from bellow link: Authentication

laravel-firebase

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
http://127.0.0.1:8000/firebase-phone-authentication

 

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.

Category : #laravel

Tags : #laravel , #laravel auth