Firebase client initialization error when using firebase 9.17.1 (latest)

[joeyscarim]

When filing a bug report, please confirm you've done the following:

1. Have you set onVerifyTokenError and onTokenRefreshError in your config and checked for any helpful errors?
   Yes

2. Have you set debug: true in your config and read through server-side and client-side debug logs for any helpful messages?
   Yes

3. Have you tried the example app with your own Firebase credentials?
   Yes, see below for how I reproduced this using the canary example

4. Have you read through the troubleshooting Q&A?
   Yes

Describe the bug
When using the client side firebase as shown in the examples in the readme i.e. getFirestore(getApp()) with the latest version of firebase 9.17.1 the error FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options). appears.

Seems to be an initialization error because doing my own client side initialization instead, like the example here https://github.com/shadeemerhi/reddit-clone-yt/blob/main/src/firebase/clientApp.ts, works as expected.

Versions
next-firebase-auth version: 1.0.0-canary.19
Firebase JS SDK: 9.17.1
Next.js: 12.2.3 (also experienced same issue in my [email protected] project)

To Reproduce
Steps to reproduce the behavior:

• Cloned the repo and added my dev firebase env variables
• Logged in
• Added an example use effect that fetches a document on the ssr-auth-required page:

import { getApp } from 'firebase/app'
import {getFirestore, doc, getDoc} from 'firebase/firestore';

...

  useEffect(() => {
    const getUser = async () => {
      const ref = doc(getFirestore(getApp()), "events/mtv/users", AuthUser.id);
      const docSnap = await getDoc(ref);
      if (docSnap.exists()) {
        console.log("Document data:", docSnap.data());
      } else {
        console.log("No such document!");
      }
    }

    getUser();
  }, []);

• Works as expected
• Next I updated firebase to latest, and re-ran. I now get the error: FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).
• Next I updated next-firebase-auth to latest canary yarn add [email protected], but same error persists

Expected behavior
Expected the client to be initialized and getFirestore to work, like with previous version of firebase and in the example at https://github.com/gladly-team/next-firebase-auth#using-the-firebase-apps

Debug and error logs
Please provide debug logs or errors from onVerifyTokenError and onTokenRefreshError.
Not relevant

Additional context
Add any other context about the problem here.
Thank you for any help/explanations!

[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

[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

[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.

[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

[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);
}

[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.

[cookrn]

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

[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.

[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.