Error when using PhoneAuthProvider - Uncaught TypeError: app.auth is not a function

[REQUIRED] Describe your environment

Operating System version: macOS Monterey 12.3.1 Browser version: Chrome Version 99.0.4844.84 (Official Build) (arm64) Firebase UI version: 6.0.1 FirebaseUI React Components: 6.0.0 Firebase SDK version: 9.6.10

[REQUIRED] Describe the problem

When using the PhoneAuthProvider the component loads but when you click on the “Sign in with phone number” button, the app crashes and you get the following error:

TypeError: app.auth is not a function
new RecaptchaVerifier
src/github.com/FinnUpstreet/src/recaptcha_verifier.ts:46
  43 | 
  44 |     // TODO: remove ts-ignore when moving types from auth-types to auth-compat
  45 |     // @ts-ignore
> 46 |     app.auth!()
     | ^  47 |   );
  48 |   this.type = this._delegate.type;
  49 | }

Uncaught TypeError: app.auth is not a function
    at new RecaptchaVerifier (static/js/vendors~main.chunk.js:12775:9)
    at push../node_modules/firebaseui/dist/esm.js.K.phoneSignInStart (static/js/vendors~main.chunk.js:187974:15)
    at L (static/js/vendors~main.chunk.js:184007:12)
    at static/js/vendors~main.chunk.js:188035:244
    at b (static/js/vendors~main.chunk.js:188022:11)
    at static/js/vendors~main.chunk.js:178588:18
    at xn.<anonymous> (static/js/vendors~main.chunk.js:184807:9)
    at ye (static/js/vendors~main.chunk.js:180542:24)
    at xe (static/js/vendors~main.chunk.js:180506:66)
    at dj (static/js/vendors~main.chunk.js:184252:11)
    at cj.push../node_modules/firebaseui/dist/esm.js.cj.h (static/js/vendors~main.chunk.js:184242:7)
    at ve (static/js/vendors~main.chunk.js:180403:16)
    at HTMLButtonElement.re (static/js/vendors~main.chunk.js:180454:14)
    at HTMLButtonElement.b (static/js/vendors~main.chunk.js:180350:18)

Steps to reproduce:

1. Run app with StyledFirebaseAuth
2. Attempt to sign in with phone number

Relevant Code:

import React from 'react'
import Firebase from 'firebase/compat/app';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import * as firebaseui from 'firebaseui';
import { getAuth } from 'firebase/auth'

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

// Initialize Firebase
const firebaseApp = Firebase.initializeApp(firebaseConfig);

export const auth = getAuth(firebaseApp);

export const uiConfig = {
  // Popup signin flow rather than redirect flow.
  signInFlow: 'popup',
  // Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
  signInSuccessUrl: '/',
  // We will display Email and Phone as auth providers.
  signInOptions: [
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        type: 'image', // 'audio'
        size: 'invisible', // 'invisible' or 'compact'
        badge: 'bottomRight' //' bottomright' or 'inline' applies to invisible.
      },
      defaultCountry: 'AU',
    }
  ],
};


export const SignUpPage = () => {
  return (
    <div>
        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth}/>
    </div>
  )
}

[m-elgamal]

Same issue here!!

[m-elgamal]

for some reason this issue was opened and closed by OP. may be he can help