Typescript types for Firebase

Viewed 1664

I want to be able to reference the interface for IdTokenResult so I can use like in the below code.

export interface AppContextProps {
  token: firebase.auth.IdTokenResult | undefined,
  updateAppContext(newContext: any): void | undefined,
}

If I import firebase like this as pretty much all online documentation recommends

import firebase from "firebase/app"
import "firebase/auth"
import "firebase/database"
import "firebase/firestore"
import "firebase/firebase-storage"

I can't figure out how to access that interface since firebase.auth.IdTokenResult doesn't seem to exist. However if I import firebase like this...

import firebase from "firebase"

I am able to access the interface I desire but I get warnings in the browser about running firebase in dev mode. How can I do what I want correctly?

1 Answers

It seems like every file I want to use firebase stuff in I need to do...

import firebase from "firbase/app"
import "firebase/<whatever>"

To avoid doing this everywhere I was doing something like this...

import firebase from "firbase/app"
import "firebase/auth"
import "firebase/database"
import "firebase/firestore"
import "firebase/firebase-storage"

const auth: firebase.auth.Auth = firebase.auth()
const storage: firebase.storage.Storage = firebase.storage()
const app: firebase.app.App = firebase.app()
export {auth, storage, app}

Then I was trying to just import the auth object where ever I wanted but it seems like firebase sdk objects to this pattern because it thinks I'm importing more than I need. IDK maybe this can still work but as soon as I just went straight to importing on a per file basis the warning message went away.

Related