firebase/app#initializeApp TypeScript Examples

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  const firebaseConfig = {
    apiKey: 'AIzaSyCm61E2xdQgQJGaOupsnEiARFhk2FNmub4',
    authDomain: 'vitty-dscvit.firebaseapp.com',
    projectId: 'vitty-dscvit',
    storageBucket: 'vitty-dscvit.appspot.com',
    messagingSenderId: '272763363329',
    appId: '1:272763363329:web:03c63b25f47d2414e2e000',
    measurementId: 'G-8KRDV5SK87'
  }

  initializeApp(firebaseConfig)
  if (message === 'loginGoogle') {
    const auth = getAuth()
    const googleProvider = new GoogleAuthProvider()
    signInWithPopup(auth, googleProvider)
      .then((result) => {
        const userId = result.user.uid
        sendResponse(userId)
      }).catch(err => {
        console.log(err)
      })
  }
  if (message === 'loginApple') {
    const auth = getAuth()
    const appleProvider = new OAuthProvider('apple.com')
    appleProvider.addScope('email')
    appleProvider.addScope('name')
    signInWithPopup(auth, appleProvider)
      .then((result) => {
        const userId = result.user.uid
        sendResponse(userId)
      }).catch(err => {
        console.log(err)
      })
  }
})

constructor(
    config: any,
    backendApi: BackendApiClient,
    storageService: ServerStorage,
    analyticsService: AnalyticsService,
    appFeatures: FeatureSettings
  ) {
    this.firebaseApp = initializeApp(config)
    this.backendApi = backendApi
    this.storageService = storageService
    this.analyticsService = analyticsService
    this.appFeatures = appFeatures
  }

getFirebase = () => {
  if (env.LEEK_API_ENABLE_AUTH === "false") return;

  if (auth) {
    return auth;
  }

  initializeApp(firebaseConfig);
  auth = getAuth();

  return auth;
}

/**
 * Function used to initialise Firebase, either by using the provided config,
 * or by fetching it by Firebase Hosting, if not specified.
 *
 * It works as a hook that gives you the loading state and the used
 * configuration.
 *
 * You most likely only need to use this if you are developing a custom app
 * that is not using {@link FirebaseCMSApp}. You can also not use this component
 * and initialise Firebase yourself.
 *
 * @param onFirebaseInit
 * @param firebaseConfig
 * @category Firebase
 */
export function useInitialiseFirebase({ firebaseConfig, onFirebaseInit }: {
    onFirebaseInit?: ((config: object) => void) | undefined,
    firebaseConfig: Object | undefined
}): InitialiseFirebaseResult {

    const [firebaseApp, setFirebaseApp] = React.useState<FirebaseApp | undefined>();
    const [firebaseConfigLoading, setFirebaseConfigLoading] = React.useState<boolean>(false);
    const [configError, setConfigError] = React.useState<string>();
    const [firebaseConfigError, setFirebaseConfigError] = React.useState<Error | undefined>();

    const initFirebase = useCallback((config: Object) => {
        try {
            const initialisedFirebaseApp = initializeApp(config);
            setFirebaseConfigError(undefined);
            setFirebaseConfigLoading(false);
            if (onFirebaseInit)
                onFirebaseInit(config);
            setFirebaseApp(initialisedFirebaseApp);
        } catch (e: any) {
            console.error(e);
            setFirebaseConfigError(e);
        }
    }, [onFirebaseInit]);

    useEffect(() => {

        setFirebaseConfigLoading(true);

        if (firebaseConfig) {
            console.log("Using specified config", firebaseConfig);
            initFirebase(firebaseConfig);
        } else if (process.env.NODE_ENV === "production") {
            fetch("/__/firebase/init.json")
                .then(async response => {
                    console.debug("Firebase init response", response.status);
                    if (response && response.status < 300) {
                        const config = await response.json();
                        console.log("Using configuration fetched from Firebase Hosting", config);
                        initFirebase(config);
                    }
                })
                .catch(e => {
                        setFirebaseConfigLoading(false);
                        setConfigError(
                            "Could not load Firebase configuration from Firebase hosting. " +
                            "If the app is not deployed in Firebase hosting, you need to specify the configuration manually" +
                            e.toString()
                        );
                    }
                );
        } else {
            setFirebaseConfigLoading(false);
            setConfigError(
                "You need to deploy the app to Firebase hosting or specify a Firebase configuration object"
            );
        }
    }, [firebaseConfig, initFirebase]);

    return {
        firebaseApp,
        firebaseConfigLoading,
        configError,
        firebaseConfigError
    };
}

app = initializeApp(firebaseConfig)

constructor(private fas: FireAdminService) {
    const config = FireAdminService.getFirebaseConfig(this.fas);
    // console.log(config);
    this.app = initializeApp(config, 'FirebaseUserApp');
  }

App: React.FC = () => {
  const firebaseConfig = {
    apiKey: 'AIzaSyCm61E2xdQgQJGaOupsnEiARFhk2FNmub4',
    authDomain: 'vitty-dscvit.firebaseapp.com',
    projectId: 'vitty-dscvit',
    storageBucket: 'vitty-dscvit.appspot.com',
    messagingSenderId: '272763363329',
    appId: '1:272763363329:web:03c63b25f47d2414e2e000',
    measurementId: 'G-8KRDV5SK87'
  }

  const app = initializeApp(firebaseConfig)
  const db = getFirestore(app)

  const { userState } = useContext(AppContext)
  const [user, setUser] = userState

  const [email, setEmail] = useState<string|null>('')
  const [name, setName] = useState<string|null>('')
  const [pic, setPic] = useState<string|null>('')

  const [showProfile, setShowProfile] = useState(false)

  useEffect(() => {
    const auth = getAuth()
    onAuthStateChanged(auth, (user1) => {
      if (user1 !== null) {
        setEmail(user1.email)
        setPic(user1.photoURL)
        setUser(user1.uid)
        setName(user1.displayName)
      } else setUser('')
    })
  }, [setUser])

  const logOut = (): void => {
    const auth = getAuth()
    signOut(auth).then(() => {
      setUser('')
      setEmail('')
      setName('')
      setPic('')
      void chrome.alarms.clearAll()
    }).catch((error) => {
      console.error(error)
    })
  }

  return (
    <>
      <Nav pic={pic} onShow={() => setShowProfile(true)} />
      <main>
        {
          user === 'loading'
            ? <Loader />
            : user === ''
              ? <div className='landing'>
                  <HomeCarousel />
                  <Auth />
                </div>
              : <LoggedIn db={db} />
        }
        <div className='ellipse ellipse-tr'><img src={EllipseTR} alt='Vitty' /></div>
        <div className='ellipse ellipse-bl'><img src={EllipseBL} alt='Vitty' /></div>
        {showProfile &&
          <Profile
            onClose={() => { setShowProfile(false) }}
            onLogOut={() => {
              logOut()
              setShowProfile(false)
            }}
            name={name}
            email={email}
          />}
      </main>
    </>
  )
}

firebase = initializeApp(config)

app = initializeApp(config)

initializeApp(config);