PhoneAuthProvider Error

[dr-aiuta]

Hi! I'm getting a lot of errors when I try to use next-firebase-auth with PhoneAuthProvider because of recaptcha. Does anyone have a code snippet that works?

[Babbili]

@dr-aiuta i upgraded it to Firebase --version 9 everything is going well.
Here's PhoneAuthProvider docs --version 9

[dr-aiuta]

@Babbili I'm running "firebase": "^9.8.4" and "next-firebase-auth": "^1.0.0-canary.9"

That's what I'm trying to do:

// /* globals window */
import React, { useEffect, useState } from 'react'
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'
import { getApp } from 'firebase/app';
import { getAuth, EmailAuthProvider, setPersistence, browserSessionPersistence, PhoneAuthProvider, RecaptchaVerifier} from "firebase/auth";


// Note that next-firebase-auth inits Firebase for us,
// so we don't need to.
const firebaseAuthConfig = {
  signInFlow: 'popup',
  // Auth providers
  // https://github.com/firebase/firebaseui-web#configure-oauth-providers
  signInOptions: [
    {
      provider: EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: true,
    },
    {
      provider: PhoneAuthProvider.PROVIDER_ID,
      requireDisplayName: true,
      recaptchaParameters: {
        type: 'image', // 'audio'
        size: 'invisible', // 'invisible' or 'compact'
        badge: 'bottomright' //' bottomright' or 'inline' applies to invisible.
      },
      whitelistedCountries: ['BR'],
      
    },
  ],
  // signInSuccessUrl: '/',
  credentialHelper: 'none',
  callbacks: {
    // https://github.com/firebase/firebaseui-web#signinsuccesswithauthresultauthresult-redirecturl
    signInSuccessWithAuthResult: () =>
      // Don't automatically redirect. We handle redirects using
      // `next-firebase-auth`.
      false,
  },
};

const FirebaseAuth = () => {
  // Do not SSR FirebaseUI, because it is not supported.
  // https://github.com/firebase/firebaseui-web/issues/213
  const [renderAuth, setRenderAuth] = useState(false);
  const auth = getAuth();
  setPersistence(auth, browserSessionPersistence);
  auth.settings.appVerificationDisabledForTesting = true;
  useEffect(() => {
    if (typeof window !== 'undefined') {
      setRenderAuth(true);
    }
    
    
    window.recaptchaVerifier = new RecaptchaVerifier('recaptcha', {
        size: 'invisible',
        callback: (response) => {
            console.log("This is not fired on loading", response)
        }
    }, getAuth(getApp()));


  }, []);

  return (
    <div>
       {renderAuth ? (
        <>
        <StyledFirebaseAuth
          uiConfig={firebaseAuthConfig}
          firebaseAuth={getAuth(getApp())}
        />
        
        </>
        ) : null}
    </div>
  )
}

export default FirebaseAuth

and getting this error:

Unhandled Runtime Error
TypeError: app.auth is not a function

Call Stack
new RecaptchaVerifier
node_modules/@firebase/auth-compat/dist/index.esm2017.js (934:0)
K.phoneSignInStart
node_modules/firebaseui/dist/esm.js (339:309)
L
node_modules/firebaseui/dist/esm.js (172:291)
eval
node_modules/firebaseui/dist/esm.js (341:296)
b
node_modules/firebaseui/dist/esm.js (340:480)
eval
node_modules/firebaseui/dist/esm.js (7:36)
xn.eval
node_modules/firebaseui/dist/esm.js (197:0)
ye
node_modules/firebaseui/dist/esm.js (70:260)
xe
node_modules/firebaseui/dist/esm.js (69:289)
dj
node_modules/firebaseui/dist/esm.js (178:28)
cj.h
node_modules/firebaseui/dist/esm.js (177:457)
ve
node_modules/firebaseui/dist/esm.js (67:60)
HTMLButtonElement.re
node_modules/firebaseui/dist/esm.js (68:95)
HTMLButtonElement.b
node_modules/firebaseui/dist/esm.js (64:356)

[Babbili]

@dr-aiuta it's probably firebase init issue, try to initialize firebase app like firebase docs

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);