Error when using PhoneAuthProvider - Uncaught TypeError: app.auth is not a function about firebaseui-web-react HOT 8 CLOSED

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.

from firebaseui-web-react.

Same issue here!!

from firebaseui-web-react.

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

from firebaseui-web-react.

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

from firebaseui-web-react.

same issue here. not clear why it was closed

from firebaseui-web-react.

any updates?

from firebaseui-web-react.

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

from firebaseui-web-react.

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

from firebaseui-web-react.