feat(authentication): implement `signInWithPhoneNumber` for web

Is your feature request related to a problem? Please describe:

signInWithPhoneNumber is currently not supported on the web.

Describe the solution you’d like:

Add support for signInWithPhoneNumber.

[maxbarry]

Thanks for the guidance. I have it working! For anyone looking, below is an Ionic + React implementation that provides phone sign-in on both native devices and the web, and signs the user into both layers of Firebase authentication.

import { useState, useEffect } from 'react'
import { Capacitor } from '@capacitor/core'
import { signInWithCredential, signInWithPhoneNumber, PhoneAuthProvider, RecaptchaVerifier } from 'firebase/auth'
import { useIonAlert, IonButton } from '@ionic/react'
import { FirebaseAuthentication } from '@capacitor-firebase/authentication'
import { getFirebaseAuth } from './firebase'    // As per https://github.com/firebase/firebase-js-sdk/issues/5019#issuecomment-1213244332

const Parent = () => (
    <>
        ...
        <PhoneNumberModal />
        <div id="recaptcha-container" />
    </>
)

const PhoneNumberModal = props => {

    const [ phoneNumber, setPhoneNumber ] = useState()     // Example: "[phone]".
    const [ recaptchaVerifier, setRecaptchaVerifier ] = useState()
    const [ presentAlert ] = useIonAlert()

    useEffect(() => {
        if (!recaptchaVerifier && !Capacitor.isNativePlatform()) {
            // Note: The 'recaptcha-container' must be rendered by this point, or
            // else Firebase throws 'auth/argument-error'
            const auth = getFirebaseAuth()
            const rv = new RecaptchaVerifier('recaptcha-container', { size: 'invisible' }, auth)
            setRecaptchaVerifier(rv)
        }
    }, [ recaptchaVerifier ])

    const proceedWithVerificationCode = (verificationId) => {
        presentAlert({
            header: 'Please enter the verification code sent to your phone.',
            onWillDismiss: async (e) => {
                try {
                    const verificationCode = e.detail.data.values[0]
                    if (verificationCode) {
                        const credential = PhoneAuthProvider.credential(verificationId, verificationCode)
                        const auth = getFirebaseAuth()
                        await signInWithCredential(auth, credential)
                        // Success!
                    }
                } catch (err) {
                    // Failure!
                }
            },
            buttons: [ 'OK' ],
            inputs: [
                {
                    type: 'number',
                    placeholder: 'Enter code',
                },
            ],
        })
    }

    const onClick = async () => {
        let verificationId
        try {
            let result
            if (Capacitor.isNativePlatform()) {
                result = await FirebaseAuthentication.signInWithPhoneNumber({ phoneNumber })
            } else {
                result = await signInWithPhoneNumber(getFirebaseAuth(), phoneNumber, recaptchaVerifier)
            }
            verificationId = result?.verificationId
        } catch (err) { /* Error! */ }
        if (verificationId) {
            proceedWithVerificationCode(verificationId)
        }
    }

    return (
        <>
            <h1>Sign in with phone</h1>
            <PhoneInput
                placeholder="Enter phone number"
                value={phoneNumber}
                onChange={setPhoneNumber}
            />
            <IonButton onClick={onClick}>Verify</IonButton>
        </>
    )
}

[robingenz]

@alexookah Right. ETA is this year.