"TypeError: app.auth is not a function" when using PhoneAuthProvider

[manubamba]

Copied from #901
My project is React and when I run this code, I get this error TypeError: app.auth is not a function.
This only happens when I use PhoneAuthProvider.PROVIDER_ID, when I insert GoogleAuthProvider.PROVIDER_ID everything works fine.

firebase no longer exposes compat functions. This becomes a major blocker to use firebaseui-web.

[Jerit3787]

Hi, I wanted to help you but I'm not a react developer. But I'm using firebaseui just by using CDN. As far as I know, firebase compat does not work in modular. That's why you couldn't import it.

Based on firebase documentation, firebase/compat only works if you're still using the v8 code style. The documentation asks to import by this way.

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Thus, it only works if you use the v8 code style. I tried modified the code from the issue.

import {useEffect} from "react";
import "firebase/compat/auth";
import firebase from "firebase/compat/app";
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';

function App() {
    const firebaseConfig = {
      ....
    };
    const app = firebase.initializeApp(firebaseConfig);
    const auth = firebase.auth();

    const uiConfig = {
        signInSuccessUrl: '<url-to-redirect-to-on-success>',
        signInOptions: [
            firebase.auth.PhoneAuthProvider.PROVIDER_ID
        ],
        tosUrl: () => alert('Terms of service'),
        privacyPolicyUrl: () => alert('Privacy policy')
    };

    // SOURCE: https://github.com/firebase/firebaseui-web/issues/216#issuecomment-459302414
    const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth);
    useEffect(() => {
        ui.start('#firebaseui-auth-container', uiConfig);
    }, []);

    return (
        <div className="App">
            <div id="firebaseui-auth-container"/>
        </div>
    );
}

export default App;

Now it works as expected.

I have also tried using React with the version of he was using including the instruction the devs asked to try but also to no avail. I think the devs might have mistaken on how to import the library. Firebase v9 Compat is there to help developers move to v9 with the old code style. I hope I might have helped you in this situation.

Note : You can't use both v9 Compat and v9 Modular at the same time as both cannot be firebase cannot be initialized twice. What I mean is that when you are using the old compat with firebaseui, the login state only remain in the compat library, not the modular one. When you enter other pages, you'll face problems as you can't prove the user is already authenticated.

[Jerit3787]

After deeper analysis, I think this a bug due to the recaptcha is still using the compat library, making it throwing error when we are using the modular ones. This could be solved once firebaseui is fully utilising modular ones

[dr-aiuta]

Getting same error here... I'm trying to use with next-firebase-auth

[sashatc]

same issue here .... cannot really fallback to compat mode

[thanhtutzaw]

I also have this issue. I use next-firebase-auth and firebaseui-react
<StyledFirebaseAuth
84 | uiConfig={firebaseAuthConfig}

85 | firebaseAuth={firebase.auth()}
^

[thanhtutzaw]

I fixed problem by importing PhoneAuthProvider from 'firebase/auth' .
I use firebase v9 . And in firebaseAuth in styledfirebaseui props I use getAuth() alse import from 'firebase/auth' .

ps: I have fixing this for two weeks . I am ok with firebase v8 but firebase v9 error happened . Now everything is fine.

[leolux]

After deeper analysis, I think this a bug due to the recaptcha is still using the compat library, making it throwing error when we are using the modular ones. This could be solved once firebaseui is fully utilising modular ones

Same issue for me. The error on the console gets thrown by the compat library:

JS error: Uncaught TypeError: app.auth is not a function
Source: webpack-internal:///./node_modules/@firebase/auth-compat/dist/index.esm2017.js
Line: 938
Column: 13

This issue makes mobile signin impossible.
Please fix that, it is almost 3 months pending.

[coolcorexix]

I found the fix here and it worked for me: firebase/firebaseui-web-react#166 (comment)

[jhuleatt]

FirebaseUI still requires the compat libraries to work. Requests for compatibility with the modular SDK are tracked in #877