[alpha][auth] FirebaseError: Firebase: Error (auth/already-initialized)

[retronav]

Describe your environment

• Operating System version: Windows 10
• Browser version: 88.0.4324.182
• Firebase SDK version: ^0.900.14
• Firebase Product: auth

Describe the problem

I'm setting up a basic web app using Next.js with the Firebase Alpha SDK. On the first compile, everything works fine, but as soon as subsequent hot/cold reloads occur(on code change), an error shows up like this:
Browser

Terminal

I think that this might not be an issue related with Next.js, it might occur with any module bundler/framework.

Relevant Code:

import { getApp, getApps, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import config from "../firebase/config.ts";
export const firebaseApp = initializeApp(config)
const auth = getAuth(firebaseApp); //This line causes an error

export default function page() {
   // Any auth logic can be here, regardless of error
   return <h1>Hello</h1>
}

[sam-gc]

This is interesting, thanks for the report. I'm not able to reproduce in vanilla JS using this code:

const app = initializeApp(config);
getAuth(app);
getAuth(app);

But this code fails in a different way:

initializeApp(config);
initializeApp(config);  // Throws FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

Now I'm not sure how the hot reloading works and how global state is preserved / overwritten. I'll play with this a bit more if I find some time.

[retronav]

Okay guys, an update. I got it working, just the fact that it uses some internal functions:

//@ts-ignore
const authProvider = firebaseApp.container.getProvider("auth-exp");
let auth: Auth;
if (authProvider.isInitialized()) {
  auth = authProvider.getImmediate();
} else {
  auth = getAuth(firebaseApp);
}
//Do whatever with this
export {auth};

So maybe the getAuth function can be re-implemented like this(just a crude idea):

export function getAuth(app: FirebaseApp): Auth { 
   const provider = _getProvider(app, "auth-exp")
   if (provider.isInitialized()) {
    return provider.getImmediate() as AuthImpl;
  }
  else return initializeAuth(app); 
 } 

[Feiyang1]

That makes sense because static generation happens in Nodejs.
#4519 will fix the issue.

[rosnk]

in react native i did this:

import { initializeApp, getApps, getApp } from "firebase/app";

let app;
let auth;
if (!getApps().length) {
try {
app = initializeApp(firebaseConfig);
auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage),
});
} catch (err) {
console.log("error initializing");
}
}
app = getApp();

[SrijanDas]

@rosnk , your suggestion gave me an error so I updated the code for react native (notice the else condition). Now it works perfectly fine 👌

let app, auth;

if (!getApps().length) {
  try {
    app = initializeApp(firebaseConfig);
    auth = initializeAuth(app, {
      persistence: getReactNativePersistence(AsyncStorage),
    });
  } catch (error) {
    console.log("Error initializing app: " + error);
  }
} else {
  app = getApp();
  auth = getAuth(app);
}

[gusta-of]

PERFEITO, consegui solucionar o problema, tenho uma aplicação angular com CapacitorJS e passei pelo mesmo problema ao atualizar minha versão do angular fire auth;
Basicamente alterei a configuração da injeçao do provider para

 provideAuth(() => {
      const auth = getAuth();
      return auth;
      // if (Capacitor.isNativePlatform()) {
      //   return initializeAuth(getApp(), {
      //     persistence: indexedDBLocalPersistence,
      //   });
      // } else {
      //   const auth = getAuth();
      //   return auth;
      // }
    }),