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

[FinnUpstreet]

[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>
  )
}

[icopp]

I've run into the same issue. Any idea on what the fix is?

[schpaa]

Same issue here, recapchta does not show and app.auth missing in console

[dr-aiuta]

same issue here. not clear why it was closed

[m-elgamal]

Same issue here!!

[dr-aiuta]

any updates?

[m-elgamal]

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

[daltongray]

I just ran into this and was able to get a workaround up - so far it's working for me, if anyone comes across this in the future, maybe it'll help.

It seems this error is caused when firebaseui-web-react is passed a v9/modular firebase auth instance, instead of the v8/v9-compat firebase auth instance. In other words, if you import and initialize your auth instance like below, you'll get this error when you feed it into <StyledFirebaseAuth /> as it's firebaseAuth prop.

import { getAuth } from "firebase/auth";
import { initializeApp } from "firebase/app";
  
const app = initializeApp(firebaseConfig);

export const authThatWillBreakFirebaseUI = getAuth(app)

It will work if you initialize your firebase app, in the compat style and feed that into firebaseui-web-react. Looks like this:

import "firebase/compat/auth";
import compatApp from "firebase/compat/app";
 
compatApp.initializeApp(firebaseConfig);
export const authForFirebaseUI = compatApp.auth()

I don't want my whole application to use the compat app, so what I did was initialize a second firebase app in the compat style. If you do this, you'll have two firebase app instances in your app - so there's a bit of overhead for managing them, but this solved my problem and allowed me to use phone sign in with this UI library.

[coolcorexix]

I just ran into this and was able to get a workaround up - so far it's working for me, if anyone comes across this in the future, maybe it'll help.

It seems this error is caused when firebaseui-web-react is passed a v9/modular firebase auth instance, instead of the v8/v9-compat firebase auth instance. In other words, if you import and initialize your auth instance like below, you'll get this error when you feed it into <StyledFirebaseAuth /> as it's firebaseAuth prop.

import { getAuth } from "firebase/auth";
import { initializeApp } from "firebase/app";
  
const app = initializeApp(firebaseConfig);

export const authThatWillBreakFirebaseUI = getAuth(app)

It will work if you initialize your firebase app, in the compat style and feed that into firebaseui-web-react. Looks like this:

import "firebase/compat/auth";
import compatApp from "firebase/compat/app";
 
compatApp.initializeApp(firebaseConfig);
export const authForFirebaseUI = compatApp.auth()

I don't want my whole application to use the compat app, so what I did was initialize a second firebase app in the compat style. If you do this, you'll have two firebase app instances in your app - so there's a bit of overhead for managing them, but this solved my problem and allowed me to use phone sign in with this UI library.

thank you so much for leave this back, many people are scratching their heads for this problem