php Question posted in
Official manual can be found here.

Php – How to send OTP to mobile using Laravel and Firebase

I am trying to implement phone verification in my laravel project using Firebase signInWithPhoneNumber function. I had some problems at first but I managed to put everything together, but now this error is thrown when trying to call signInWithPhoneNumber:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'verify')
    at _verifyPhoneNumber (phone.ts:190:33)
    at signInWithPhoneNumber (phone.ts:190)

I am actually not good at js so I can’t try to debug this error, I tried searching but cou’dn’t find an answer. I found a similar issue on github.

My code:

import {
        initializeApp
    } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js'

    import {
        getAuth,
        signInWithPhoneNumber,
        RecaptchaVerifier
    } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js'

    const firebaseConfig = {
        apiKey: "xxxxxxxxxx",
        authDomain: "xxxxxxxxxxxxx",
        projectId: "puxxxxxxxxxxxxx",
        storageBucket: "pxxxxxxxxxxxxxxxxxxx",
        messagingSenderId: "xxxxxxxxxxxxxx",
        appId: "1:434692xxxxxxxxxxxxxxxxxx168c8757df",
        measurementId: "G-xxxxxxxxxxxxxxxxxx"
    };
    const app = initializeApp(firebaseConfig)
    const auth = getAuth()

    window.onload = function() {
        render();
    };

    function render() {
        window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
            'size': 'normal',
            'callback': (response) => {
                // reCAPTCHA solved, allow signInWithPhoneNumber.
                // ...
                console.log(response)
            },
            'expired-callback': () => {
                // Response expired. Ask user to solve reCAPTCHA again.
                // ...
            }
        });
        window.recaptchaVerifier.render();
    }

    $('#send-code').on('click', function(e) {
        e.preventDefault()
        SendCode()
    })

    function SendCode() {
        var number = $("#phone").val();


        signInWithPhoneNumber(number, window.recaptchaVerifier).then(function(confirmationResult) {

            window.confirmationResult = confirmationResult;
            coderesult = confirmationResult;

            console.log('success')

        });

    }

can someone tell me what am I doing wrong?

Tags:

2

Answers


  1. 0

    The error likely stems from either incomplete reCAPTCHA verification or improper access to phone number or reCAPTCHA verifier variables. Ensure reCAPTCHA completes, double-check variable scope and values, and verify SDK loading and DOM readiness.

    Login or Signup to reply.
  2. 0

    Within the render() function’s callback and expired-callback, log messages to indicate reCAPTCHA completion or expiration:

    'callback': (response) => {
  console.log("reCAPTCHA solved:", response);
  // ...
},
'expired-callback': () => {
  console.log("reCAPTCHA expired");
  // ...
}

    Observe these logs in the browser console to ensure reCAPTCHA completion before sign-in attempts.

    Before calling signInWithPhoneNumber, log the values of number and window.recaptchaVerifier:

    console.log("Phone number:", number);
console.log("reCAPTCHA verifier:", window.recaptchaVerifier);

    If accessibility is an issue, pass number and window.recaptchaVerifier as arguments to SendCode.
    Open developer console: Press F12 in most browsers to access the developer console.
    Inspect network tab: Look for errors or warnings related to loading Firebase SDKs.

    Move render(): Place the render() call within the window.onload event or after the recaptcha-container element is rendered in the DOM.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search