Receiving " Firebase: No Firebase App '[DEFAULT]' has been created", even though it has been created

[vpaladino778]

I'm receiving the following error on my project, even though not much is different from the example project.

One thing that I made a change to was the import statement in login.tsx. In the example, they import firebase/app, but I had to import firebase/compact/app (I was getting Property 'auth' does not exist on type with the former)

Does anyone have any ideas or suggestions? Maybe I'm missing something, i figured since initAuth is being called in _app.tsx, then firebase should be initialized. Could this be because I'm importing firebase/app/compact?

_app.tsx

import '../styles/globals.css'
import initAuth from '../service/auth/initAuth'
import type { AppProps } from 'next/app'

initAuth()
function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

api/logout.ts
api/login.ts
login.tsx
initAuth.tsx

File Structure:

pages/
├─ api/
│  ├─ login.ts
│  ├─ logout.ts
├─ index.tsx
├─ _app.tsx
├─ dashboard.tsx
├─ login.tsx
service/auth/
├─ initAuth.tsx

[vpaladino778]

Here's my package.json

{
  "name": "dashboard",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.1",
    "@mui/material": "^5.2.3",
    "dotenv": "^10.0.0",
    "firebase": "^9.6.1",
    "firebase-admin": "^10.0.1",
    "next": "^12.0.7",
    "next-firebase-auth": "^1.0.0-canary.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-firebaseui": "^6.0.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.4"
  },
  "devDependencies": {
    "@types/node": "16.11.12",
    "@types/react": "17.0.37",
    "eslint": "8.4.1",
    "eslint-config-next": "12.0.7",
    "typescript": "4.5.3"
  }
}

[kmjennison]

My suspicion is that you need to update how you're getting the auth app for Firebase v9 where you're passing it to Firebase UI. Remove Firebase compat, then rather than firebaseAuth={firebase.auth()}, use firebaseAuth={getAuth(getApp())}. See v1.x example.

[vpaladino778]

Whoops, should have included that the first time around:

Could the token be missing from the request header? It's also possible that this is just something wrong with my configuration.

FirebaseAuthError: Firebase ID token has invalid signature. See https://firebase.google.com/docs/auth/admin/verify-id-tokens for details on how to retrieve an ID token.
    at FirebaseAuthError.FirebaseError [as constructor] (C:\Users\Vincent\Desktop\Repositories\dashboard\node_modules\firebase-admin\lib\utils\error.js:44:28)
    at FirebaseAuthError.PrefixedFirebaseError [as constructor] (C:\Users\Vincent\Desktop\Repositories\dashboard\node_modules\firebase-admin\lib\utils\error.js:90:28)
    at new FirebaseAuthError (C:\Users\Vincent\Desktop\Repositories\dashboard\node_modules\firebase-admin\lib\utils\error.js:149:16)
    at FirebaseTokenVerifier.mapJwtErrorToAuthError (C:\Users\Vincent\Desktop\Repositories\dashboard\node_modules\firebase-admin\lib\auth\token-verifier.js:237:20)
    at C:\Users\Vincent\Desktop\Repositories\dashboard\node_modules\firebase-admin\lib\auth\token-verifier.js:217:25
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  errorInfo: {
    code: 'auth/argument-error',
    message: 'Firebase ID token has invalid signature. See https://firebase.google.com/docs/auth/admin/verify-id-tokens for details on how to retrieve an ID token.'
  },
  codePrefix: 'auth'
}

[kmjennison]

Check out this troubleshooting note:
https://github.com/gladly-team/next-firebase-auth/tree/v1.x#i-get-an-authargument-error-with-message-firebase-id-token-has-invalid-signature

[vpaladino778]

Marking this as the answer, as it solved the problem related to my post. Thanks for all your help @kmjennison

I'm still running into the Firebase ID token has invalid signature issue. I took a look at the trouble shooting guide. This is where i am pulling 'FIREBASE_CLIENT_EMAIL' from:

Does that look right?

This is what my .env looks like:

Here's my initAuth.tsx: https://gist.github.com/vpaladino778/1020d0cb633d16cb5884ec50b7dc2697

Do I need the database URL to get this to work? Thanks again for all you're help. You should get a donation link going so I can buy you a coffee.

[kmjennison]

Yes, that should be the right email. I'm not sure what's going on, but I see you're using the Firebase emulator, which has caused problems for others: https://stackoverflow.com/a/68803294. Maybe try without the emulator if you haven't already?

Thanks for the kind words and appreciate the ☕ offer! But, no donation needed at this point—happy to be supporting open source when I can.

[vpaladino778]

That did the trick! I had to comment out firebaseAuthEmulatorHost from initAuth, and I had to remove the variable from the .env file.

I'll open a PR to add that suggestion to the 'Troubleshooting Guide'. Thanks again for your help.

[jonbattista]

@kmjennison Hello, I am trying to upgrade to Firebase 9.x as well. I am still calling initAuth() in _app.js but getApp() isnt returning the next-firebase-auth initialized app:

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at getApp (file:///Users/jon.battista/ltpro-frontend/node_modules/@firebase/app/dist/esm/index.esm2017.js:469:29)
    at eval (webpack-internal:///./pages/_app.js:36:65)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  code: 'app/no-app',
  customData: { appName: '[DEFAULT]' },
  page: '/app'
}

I am using "next": "12.0.7", "next-firebase-auth": "^1.0.0-canary.7", and "firebase": "^9.6.10"

It should be initializing the app here:

next-firebase-auth/src/initFirebaseClientSDK.js

Line 13 in 75bc40f

initializeApp(firebaseClientInitConfig)

and if I call const firebaseApp = initializeApp(firebaseClientInitConfig); right after init() everything works fine. So my config is valid, but next-firebase-auth isn't initializing the app

[kmjennison]

@jonbattista Could you try the example app in this repo to see if that works for you? Then, if you're still having trouble, please share a reproduction of the issue.