Laravel 8 Mobile Number Verification Tutorial

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Hi Developers,
Today in this tutorial I will give you a simple example of laravel 8 firebase phone auth. Now I’m going to show you about how to laravel 8 mobile number verification firebase auth. I will like to show you how to laravel 8 firebase work on mobile otp. Now in this tutorial I will give you a very simple example of firebase phone authentication on laravel 8 application example. Now just follow bellow tutorial steps of laravel 8 phone number verification by using firebase.

So in this tutorial, i will create it step by step simple example of firebase phone auth in laravel 8 application. Now i will create a firebase app and give login with phone enable. Then i will write simple code to mobile verification (opt) in laravel 8 application.

let’s see bellow steps to complete mobile verification:

Step 1: Create Firebase Project and App

At in our first step, we need to go Firebase Console and create a new project. Then we have to create web app on that project.

After give name and next then we will received firebase sdk.

Now next step we need to enable our phone number auth from bellow link:

Authentication

we need to save all information because we will use all in our application.

Read Also: Get Checked Radio Button Value in Vue JS

Step 2: Install Laravel

First of all now we need a fresh Laravel application by using bellow command, So open your terminal and run bellow command for new project:

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

Step 3: Create Route

Here, we need to add one new route with FirebaseController controller. So let’s add this route in 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 new controller as like bellow commend:

php artisan make:controller FirebaseController

now, so let’s add like as bellow and put bellow code:

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');
    }
}

Read Also: How to Send Mail in Laravel 8 using Mailtrap?

Step 5: Create Blade File

Now let’s create a new blade file that where we will write our all logic for phone auth.

resources/views/firebase.blade.php

<html>
<head>
    <title>Laravel Phone Number Authentication using Firebase - Codingspoint.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 - Codingspoint.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="+88********">
            <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>

Read Also: Laravel 8 Socialite Login with Facebook Account Example

Ok, now we totally ready to run this project.

So let’s run project by using this command:

php artisan serve

thank you for reading this. I hope it will be help you.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →

One Comment on “Laravel 8 Mobile Number Verification Tutorial”

Comments are closed.