Firebase client initialization error when using firebase 9.17.1 (latest) about next-firebase-auth

[joeyscarim]

@kmjennison The version of firebase i was using was 9.16.0, which was working with next-firebase-auth 1.0.0-canary.18 as expected and as the examples in the docs show. the example in the repo which uses 9.9.1 works as well.

my confusion on it being a firebase bug or a next-firebase-auth bug is when i initialize firebase myself (doing it the exact same way as here: https://github.com/shadeemerhi/reddit-clone-yt/blob/main/src/firebase/clientApp.ts), prior to next-firebase-auth init, it works with the latest firebase version, 9.17.1

[mrnguyentrantam]

Hello, I encountered the same issue when using firebase 9.17 version, works well after downgrading to 9.16. Maybe firebase change the way they init internally @kmjennison

[spife129]

The current version doesn't work with firebase ver > 9.*, you will have to stick with ver 8.9 at the moment. I run into similar issue where the error says firebase.apps is undefined as in ver 9 it uses getApps() but the current lib still uses firebase.apps.

[EvertonMJunior]

This is my workaround until a real fix. I´m using firebase 9.19.1 and next-firebase-auth 1.0.0-canary.19

Configure firebase credential in .env.local file to avoid errors duplicating data

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_DATABASE_URL=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=

Add this code:

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

try {
  const app = initializeApp(firebaseConfig);
} catch (err) {
  console.error(err);
}

This solved it for me. I added the initialization right after the init() command. The issue arose to me when I upgraded to Next 13.

[kmjennison]

I haven't had a chance to investigate whether this is a Firebase bug or something in this package. Help welcome!

I reproduced the problem in the example app here, and in that case, it worked when pinning the Firebase client SDK to version 9.16.0.

[kmjennison]

@spife129 That is not correct. The canary version of next-firebase-auth supports Firebase JS SDK v9. Please see README for more info.

[kmjennison]

@joeyscarim You mention that your app worked prior to upgrading Firebase to 9.17.1. What was the version of Firebase that worked? I'm wondering if this is a Firebase bug. Possibly related: #612

[spife129]

@spife129 That is not correct. The canary version of next-firebase-auth supports Firebase JS SDK v9. Please see README for more info.

As you said, it's the canary version, are you saying we should use canary for production? It's the fact that the current version is not working with the ver 9. Please consider the use of words before you reply.

[kmjennison]

@spife129 That's fair. The current canary version will likely see some API changes before v1.x (see roadmap), but it's intended to be usable in production. Of course, each developer should evaluate what makes sense for their production app.

Regardless, this issue specifically references using the canary version with latest Firebase, which should work just fine. I don't want other readers to think those are incompatible, so I'm going to hide these comments as off-topic to this issue.

[spife129]

Maybe make a note at the readme section that talks about upgrading to ver 9? So it's much easier for people to understand which version works. Thanks

[kmjennison]

@joeyscarim Interesting. Looking at that example, one difference is the call to getFirestore outside of the component render. What happens if you try that pattern?

import { getApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

const firestore = getFirestore(getApp())

// component below or in another module

Possibly related StackOverflow post: https://stackoverflow.com/a/74732162/1332513

[wongww]

I've been using functions like getApp() and getAuth() inside a useEffect() hook.

I don't know if that's a "good" of way of accessing the firebase app, but so far that's the only way I've gotten it to work. Ideally, I would like to have access to the firebase before rendering the component.

Correct me if I'm wrong @kmjennison, but it's expected that getApp() returns nothing if it's not called in a useEffect() hook?

[kmjennison]

@wongww That isn't the behavior I'd expect based on the docs on getApp:

When called with no arguments, the default app is returned. When an app name is provided, the app corresponding to that name is returned.

An exception is thrown if the app being retrieved has not yet been initialized.

[mkilp]

Having the same exact issue. I am on firebase 9.16.0 and "next-firebase-auth": "1.0.0-canary.18". Downgrading both does not seem to work for me at all.

[wongww]

@kmjennison I've been calling functions like getApp() in a useEffect hook because I discovered that if I didn't, then getApp() would be called before the initAuth() function is finished (at least that's how I interpreted it :) ). In other words, getApp() was always throwing this initialization error before the component I call it in is finished mounting. Any thoughts on this flow? Would this be something you expected?

[kmjennison]

@wongww I'm not sure what you're running into. You might double-check a few things:

• that you're not calling getApp on the server side, because it's a client SDK
• you're calling init in _app.js outside of the component

The example calls uses getApp outside of useEffect without a problem:

next-firebase-auth/example/components/FirebaseAuth.js

Line 45 in 80e5830

firebaseAuth={getAuth(getApp())}

[FabianRueckert]

I am getting the same error, even if I call

initAuth();
export const auth = getAuth(getApp());

in _app.tsx right behind each other.
And also when calling getAuth(getApp()) inside a component on the client side.
Both on firebase 9.16.0 and 9.17.1.

Debug console also shows that next-firebase-auth has initialized right before.

[mkilp]

I solved my issue - i've been importing getApp() from firebase js vs from firebase-admin (which is initialized).

[martingouy]

FWIW I am having the same issue. Downgrading to 9.16.0 fixed it

[ancashoria]

Same here, downgrading to 9.16.0 didn't fix it

[ellisdod]

I'm getting the same issue. In my case the init() function doesn't seem to be initializing a FirebaseApp instance that can be recognised by future getApp() calls. Calling getApps() within the initAuth file returns an empty array.

Downgrading to 9.9.1 fixed it.

[ZhuBoao]

On client side, Downgrading to 9.9.1 can fix it. But I still cannot get correct response from getApps() or getApp() from server side. I am sure I called initAuth() on the top of the API.

[rafaeldcf]

This is my workaround until a real fix. I´m using firebase 9.19.1 and next-firebase-auth 1.0.0-canary.19

Configure firebase credential in .env.local file to avoid errors duplicating data

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_DATABASE_URL=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=

Add this code:

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

try {
  const app = initializeApp(firebaseConfig);
} catch (err) {
  console.error(err);
}

[cookrn]

Should an issue be opened against firebase/firebase-js-sdk or does it seem like the bug might be in this package?

[cookrn]

When I reproduced in a project yesterday, downgrading to 9.16.0 also fixed. I was not able to see any errors in the browser console or server logs when using 9.17.x and above, which was odd.

[steebchen]

Running into this just on firebase hosting/functions (with experimental web frameworks nextj support), it seems to work on vercel. Not sure if it's the same issue. Everything works on the client, but the server app doesn't get initialized.

# getting this just on firebase functions:
FirebaseAppError: The default Firebase app does not exist. Make sure you call initializeApp() before using any of the Firebase services

I am on:

    "firebase": "9.16.0",
    "firebase-admin": "11.8.0",
    "firebase-tools": "12.4.0",

[steebchen]

Actually I'm also running randomly into this on vercel now 😭

I'm using [email protected] so it doesn't necessarily seem to be related to this version I think?

errorInfo: {
    code: 'app/no-app',
    message: 'The default Firebase app does not exist. Make sure you call initializeApp() before using any of the Firebase services.'
  },

[kmjennison]

This appears to be fixed in firebase ^9.18.0 and 10.0.0. Let me know if you run into the issue again after upgrading!

[kmjennison]

Never mind: these versions worked in development but not after building.

[kmjennison]

Here's the diff in the Firebase JS SDK between the working and broken versions:
https://github.com/firebase/firebase-js-sdk/compare/[email protected]@9.17.0

[kmjennison]

Possible areas of interest:

• Where the error is thrown: https://github.com/firebase/firebase-js-sdk/blob/87c03a4e9105ab0ead8b895f740f218a8b5d564c/packages/app/src/api.ts#L146
• Where Firebase might be calling initializeApp without any options: https://github.com/firebase/firebase-js-sdk/blob/b58a617f007a4ea2ffe82bc5b9c8ca9a7b7853d9/packages/app/src/api.ts#L204-L207

[kmjennison]

Possibly related? This might be affecting our Webpack bundle / webpack-node-externals.

Issue:
firebase/firebase-js-sdk#7005

Fix:
firebase/firebase-js-sdk#7007

[Mrjuanblack]

@steebchen Were you able to find a workaround? I'm also using firebase functions but I ran into the same issue as you.

[steebchen]

Not really, I stayed on 9.16.0 on Vercel, which seems to work fine (on firebase hosting I run into different issue)

[kmjennison]

I've updated the docs and example app to recommend initializing the Firebase JS SDK in your app prior to initializing next-firebase-auth, which avoids this issue.