Firebase Phone Authentication With Invisible reCaptcha in Laravel5.6

Today, we are share with you how to implement firebase phone authentication with invisible reCaptcha with custome UI in your laravel application.

Many developer need to built firebase phone auth with invisible reCaptcha with cusome UI not use Google Firebase UI. so in this tutorials we are show you how to integrate and make this functionality in your application. this is very easy and use in any php application

if you don’t know how to create firebase project or set up then please you can visit this link and easily create it How to create firebase project.

So, please simply follow this step

Create Route:

First, we need to create following route in routes/web.php file.

Route::get('firebase-phone-authentication', 'HomeController@invisiblecaptcha')->name('invisiblecaptcha');
	

Add method in Homecontroller:

Now, we are open HomeController.php file and add following method in home controller.

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppHttpRequests;

class HomeController extends Controller
{
    public function __construct()
    {
        // $this->middleware('auth');
    }

    public function invisiblecaptcha()
    {
        return view('invisiblecaptcha');
    }
	

Create invisiblecaptcha.blade.php file:

Now, we are cleare one invisiblecaptcha.blade.php file in our resources/views folder and simple add following in this file.

Note : Here we are also add some css/js cdn so please first you need also create style or jquery section in your layout.blade.php file.

@extends('layouts.app')

@section('style')
<link rel="stylesheet" href="https://.getmdl.io/1.1.3/material.orange-indigo.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script defer src="https://.getmdl.io/1.1.3/material.min.js"></script>
@endsection

@section('content')
<div >
    <div >
    	<div >
    		<div >
                <div >
                    <div >
                        <div >
                            <strong>Laravel - Google Firebase Phone No. Auththentication With No reCaptcha Using Custom UI</strong>
                        </div>
                    </div>
                </div>

                <div >
                    <form id="sign-in-form" action="#">
                    <!-- Input to enter the phone number -->
                    <div >
                      <input  type="text" pattern="+[0-9s-()]+" id="phone-number">
                      <label  for="phone-number">Enter your phone number...</label>
                      <span >Input is not an international phone number!</span>
                    </div>
                      <>Ex. +919898989898</>

                    <!-- Sign-in button -->
                    <button disabled  id="sign-in-button">Sign-in</button>
                  </form>

                  <!-- Button that handles sign-out -->
                  <button  id="sign-out-button">Sign-out</button>

                  <form id="verification--form" action="#">
                    <!-- Input to enter the verification  -->
                    <div >
                      <input  type="text" id="verification-">
                      <label  for="verification-">Enter the verification ...</label>
                    </div>

                    <!-- Button that triggers  verification -->
                    <input type="submit"  id="verify--button" value="Verify Code"/>
                    <!-- Button to cancel  verification -->
                    <button  id="cancel-verify--button">Cancel</button>
                  </form>
                </div>                
            </div>
    	</div>
    </div>
    <br />
    <br />
    <div >
        <div >
            <div >
                <div >
                    <div >
                        <div >
                            <strong>Laravel - User sign-in status</strong>
                        </div>
                    </div>
                </div>

                <div >
                    <div >
                        Firebase sign-in status: <span id="sign-in-status">Unknown</span>
                        <div>Firebase auth <>currentUser</> object value:</div>
                        <pre>< id="account-details">null</></pre>
                    </div>
                </div>                
            </div>
        </div>
    </div>
</div>
@endsection	

@section('jquery')
<!-- Here your js  -->
@endsection
	

Now, put following javascript in your jquery section

<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
<script type="text/javascript">
    // Initialize Firebase
    var config = {
        apiKey: "api_key",
        authDomain: "auth_domain",
        databaseURL: "database_url",
        storageBucket: "storage_bucket",
        messagingSenderId: "messagingSenderId",
    };
    firebase.initializeApp(config);

    var database = firebase.database();
  /**
   * Set up UI event listeners and registering Firebase auth listeners.
   */
  window.onload = function() {
    // Listening for auth state changes.
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // User is signed in.
        var uid = user.uid;
        var email = user.email;
        var photoURL = user.photoURL;
        var phoneNumber = user.phoneNumber;
        var isAnonymous = user.isAnonymous;
        var displayName = user.displayName;
        var providerData = user.providerData;
        var emailVerified = user.emailVerified;
      }
      updateSignInButtonUI();
      updateSignInFormUI();
      updateSignOutButtonUI();
      updateSignedInUserStatusUI();
      updateVerificationCodeFormUI();
    });

    // Event bindings.
    document.getElementById('sign-out-button').addEventListener('click', onSignOutClick);
    document.getElementById('phone-number').addEventListener('keyup', updateSignInButtonUI);
    document.getElementById('phone-number').addEventListener('change', updateSignInButtonUI);
    document.getElementById('verification-').addEventListener('keyup', updateVerifyCodeButtonUI);
    document.getElementById('verification-').addEventListener('change', updateVerifyCodeButtonUI);
    document.getElementById('verification--form').addEventListener('submit', onVerifyCodeSubmit);
    document.getElementById('cancel-verify--button').addEventListener('click', cancelVerification);

    // [START appVerifier]
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
      'size': 'invisible',
      'callback': function(response) {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
        onSignInSubmit();
      }
    });
    // [END appVerifier]

    recaptchaVerifier.render().then(function(widgetId) {
      window.recaptchaWidgetId = widgetId;
      updateSignInButtonUI();
    });
  };

  /**
   * Function called when clicking the Login/Logout button.
   */
  function onSignInSubmit() {
    if (isPhoneNumberValid()) {
      window.signingIn = true;
      updateSignInButtonUI();
      var phoneNumber = getPhoneNumberFromUserInput();
      var appVerifier = window.recaptchaVerifier;
      firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
          .then(function (confirmationResult) {
            // SMS sent. Prompt user to type the  from the message, then sign the
            // user in with confirmationResult.confirm().
            window.confirmationResult = confirmationResult;
            window.signingIn = false;
            updateSignInButtonUI();
            updateVerificationCodeFormUI();
            updateVerifyCodeButtonUI();
            updateSignInFormUI();
          }).catch(function (error) {
            // Error; SMS not sent
            console.error('Error during signInWithPhoneNumber', error);
            window.alert('Error during signInWithPhoneNumber:nn'
                + error. + 'nn' + error.message);
            window.signingIn = false;
            updateSignInFormUI();
            updateSignInButtonUI();
          });
    }
  }

  /**
   * Function called when clicking the "Verify Code" button.
   */
  function onVerifyCodeSubmit(e) {
    e.preventDefault();
    if (!!getCodeFromUserInput()) {
      window.verifyingCode = true;
      updateVerifyCodeButtonUI();
      var  = getCodeFromUserInput();
      confirmationResult.confirm().then(function (result) {
        // User signed in successfully.
        var user = result.user;
        window.verifyingCode = false;
        window.confirmationResult = null;
        updateVerificationCodeFormUI();
      }).catch(function (error) {
        // User couldn't sign in (bad verification ?)
        console.error('Error while checking the verification ', error);
        window.alert('Error while checking the verification :nn'
            + error. + 'nn' + error.message);
        window.verifyingCode = false;
        updateSignInButtonUI();
        updateVerifyCodeButtonUI();
      });
    }
  }

  /**
   * Cancels the verification  input.
   */
  function cancelVerification(e) {
    e.preventDefault();
    window.confirmationResult = null;
    updateVerificationCodeFormUI();
    updateSignInFormUI();
  }

  /**
   * Signs out the user when the sign-out button is clicked.
   */
  function onSignOutClick() {
    firebase.auth().signOut();
  }

  /**
   * Reads the verification  from the user input.
   */
  function getCodeFromUserInput() {
    return document.getElementById('verification-').value;
  }

  /**
   * Reads the phone number from the user input.
   */
  function getPhoneNumberFromUserInput() {
    return document.getElementById('phone-number').value;
  }

  /**
   * Returns true if the phone number is valid.
   */
  function isPhoneNumberValid() {
    var pattern = /^+[0-9s-()]+$/;
    var phoneNumber = getPhoneNumberFromUserInput();
    return phoneNumber.search(pattern) !== -1;
  }

  /**
   * Re-initializes the ReCaptacha widget.
   */
  function resetReCaptcha() {
    if (typeof grecaptcha !== 'undefined'
        && typeof window.recaptchaWidgetId !== 'undefined') {
      grecaptcha.reset(window.recaptchaWidgetId);
    }
  }

  /**
   * Updates the Sign-in button state depending on ReCAptcha and form values state.
   */
  function updateSignInButtonUI() {
    document.getElementById('sign-in-button').disabled =
        !isPhoneNumberValid()
        || !!window.signingIn;
  }

  /**
   * Updates the Verify- button state depending on form values state.
   */
  function updateVerifyCodeButtonUI() {
    document.getElementById('verify--button').disabled =
        !!window.verifyingCode
        || !getCodeFromUserInput();
  }

  /**
   * Updates the state of the Sign-in form.
   */
  function updateSignInFormUI() {
    if (firebase.auth().currentUser || window.confirmationResult) {
      document.getElementById('sign-in-form').style.display = 'none';
    } else {
      resetReCaptcha();
      document.getElementById('sign-in-form').style.display = 'block';
    }
  }

  /**
   * Updates the state of the Verify  form.
   */
  function updateVerificationCodeFormUI() {
    if (!firebase.auth().currentUser && window.confirmationResult) {
      document.getElementById('verification--form').style.display = 'block';
    } else {
      document.getElementById('verification--form').style.display = 'none';
    }
  }

  /**
   * Updates the state of the Sign out button.
   */
  function updateSignOutButtonUI() {
    if (firebase.auth().currentUser) {
      document.getElementById('sign-out-button').style.display = 'block';
    } else {
      document.getElementById('sign-out-button').style.display = 'none';
    }
  }

  /**
   * Updates the Signed in user status panel.
   */
  function updateSignedInUserStatusUI() {
    var user = firebase.auth().currentUser;
    if (user) {
      document.getElementById('sign-in-status').textContent = 'Signed in';
      document.getElementById('account-details').textContent = JSON.stringify(user, null, '  ');
    } else {
      document.getElementById('sign-in-status').textContent = 'Signed out';
      document.getElementById('account-details').textContent = 'null';
    }
  }
</script>	
	

Now we are ready to run our example so run bellow command ro quick run:

php artisan serve

Now you can open bellow URL on your browser:

	
http://localhost:8000/firebase-phone-authentication

Please also check our demo for realtime CRUD system.

We are hope you like this tutorials, if any question regarding any query please post your question in our forums click on bellow link Laravel’s Forums