Laravel 8 Firebase Mobile Number (OTP) Authentication Example

Hi Dev,

Today, i we will show you laravel 8 firebase mobile number (OTP) authentication example. This article will give you simple example of laravel 8 firebase mobile number (OTP) authentication example. you will learn laravel 8 firebase mobile number (OTP) authentication example.

In this example, i will create step by step simple example of laravel 8 firebase mobile number (OTP) authentication example. we will create firebase app and give login with phone enable. then we will write simple example to mobile number verification(otp) in laravel 8.

So let’s follow few step to create example of laravel 8 firebase mobile number (OTP) authentication example.

Preview:-

Step 1: Create Firebase Project

First of all, we have to go Firebase Console and create a project. then you have to create web app on that project as like i added below screenshot:

Step 2: Install Laravel

first of all we need to install fresh Laravel application using below command:

composer create-project --prefer-dist laravel/laravel firebaseotp

Step 3: Create Route

use App\Http\Controllers\FirebaseController;
Route::get('firebase-phone', [FirebaseController::class, 'index']);

Step 4: Create Controller

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

resources/views/firebase.blade.php

<html>
<head>
    <title>Laravel 8 Firebase Mobile Number (OTP) Authentication Example</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 style="background:#9C0;">

<div class="container">
    <h1>Laravel 8 Firebase Mobile Number (OTP) Authentication Example</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/8.8.0/firebase.js"></script>

<script>

  var firebaseConfig = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    measurementId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  };



  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>

So let’s run project using this command:

php artisan serve