FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created

[borjalo]

I'm getting this error in my login.tsx file:

This is my _app.tsx file:

and this is my login.tsx file:

Any idea of what is happening?

[borjalo]

I just needed to add initializeApp({...}) from the Firebase JS SDK in the _app.tsx file and it worked. I don't know why because I thought that initAuth() was already initializing the Firebase app. Weird...

[borjalo]

I think that something is not working properly. When I try to access the auth object from firebase/auth in my login.tsx it seems to not be initialized yet so that's why it's crashing. How can I wait until the initAuth() in executed before calling the getAuth() from Firebase SDK?

[borjalo]

@kmjennison I've created this blank repository with next-firebase-auth and, as I am experimenting in my project, when you try to call const auth = getAuth() in the page, the app crashes as it says that there's no app initialized. Take a look and keep me posted. Thanks!

https://github.com/borjalo/next-firebase-auth-test

[TobiasKrok]

Did you solve this issue?

[borjalo]

@TobiasKrok not yet. I'm waiting for a response. I think it's a bug in the package.

[kmjennison]

@borjalo I see—thanks for the additional info. You're currently trying to use the Firebase JS SDK during server-side rendering, but it's meant for use on the client side. You'll need to use useEffect:

import React, { useEffect } from 'react'
import { getAuth } from 'firebase/auth'

const ExamplePage = () => {
  useEffect(() => {
    const auth = getAuth()
    // ...
  })
  // ...
}

Here's the example we have in docs.

Let me know if this helps.

[borjalo]

@kmjennison thanks for your response. Makes sense. I don't know why I didn't figure that out 😅.

[TobiasKrok]

I solved this by using React Contexts. I have not built my app completely so I'm not sure how it will work later with queries and such, but using this code you can access what you need from firebase in your react components

FirebaseContext.tsx

import { FirebaseApp, initializeApp } from "firebase/app";
import { Auth, getAuth } from "firebase/auth";
import { Firestore, getFirestore } from "firebase/firestore";
import {
  createContext,
  PropsWithChildren,
  useContext,
  useEffect,
  useState,
} from "react";


type FirebaseState = {
  firebase: FirebaseApp;
  firestore: Firestore;
  auth: Auth;
};

const FirebaseContext = createContext<FirebaseState>({} as FirebaseState);

export const FirebaseProvider: React.FC<PropsWithChildren> = ({ children }) => {
  const [firebase, setFirebase] = useState<FirebaseApp>();
  const [firestore, setFirestore] = useState<Firestore>();
  const [auth, setAuth] = useState<Auth>();

  useEffect(() => {
    setFirebase(initializeApp(FIREBASE_CONFIG));
    setFirestore(getFirestore());
    setAuth(getAuth());
  }, []);

  return (
    <FirebaseContext.Provider
      value={{ firebase, firestore, auth } as FirebaseState}
    >
      {children}
    </FirebaseContext.Provider>
  );
};

export const useFirestore = () => {
  const { firestore } = useContext(FirebaseContext);
  return firestore;
};

export const useFirebaseAuth = () => {
  const { auth } = useContext(FirebaseContext);
  return auth;
};
export const useFirebase = () => {
  const { firebase } = useContext(FirebaseContext);
  return firebase;
};

_app.tsx

export default App(props: Props) {
    const { Component, pageProps } = props;

    return (
    <FirebaseProvider>
        <Component {...pageProps}/>
    </FirebaseProvider>
    )

You can then use whichever hooks you need to do your authentication or firestore querying
login,tsx

const Login = () => {
  const auth = useFirebaseAuth();
  //.... auth logic 
  return (
    <PaddedLayout>
      <Typography variant="h3">Login</Typography>
    </PaddedLayout>
  );
};
export default Login;

You can of course use Redux or whatever you want instead of contexts

[borjalo]

You're not using next-firebase-auth in your solution. It will work, but without SSR.

[kmjennison]

You're currently using the Firebase JS SDK during server-side rendering, but it's meant for use on the client side. You'll need to use useEffect:

import React, { useEffect } from 'react'
import { getAuth } from 'firebase/auth'

const ExamplePage = () => {
  useEffect(() => {
    const auth = getAuth()
    // ...
  })
  // ...
}

Here's the example we have in docs.

(Taken from this comment thread to make it easier for other people to find the answer.)