Solid-firebase NPM

solid-firebase

Solid primitives for Firebase.

⚠️ This package only works with Firebase 9 or above with modular style.

Quick start

Install it:

npm install firebase solid-firebase

Configure firebase app:

import { render } from 'solid-js/web'
import { initializeApp } from 'firebase/app'
import { FirebaseProvider } from 'solid-firebase'
import App from './App'

const app = initializeApp({ projectId: 'MY PROJECT ID' })

render(
  () => (
    <FirebaseProvider app={app}>
      <App />
    </FirebaseProvider>
  ),
  document.getElementById('root'),
)

Primitives

The primitive useFirebaseApp gives you access to the initialized firebase app.

Authentication

useAuth is a Firebase Auth binding to easily react to changes in the users' authentication status.

import { Match, Switch } from 'solid-js'
import { GoogleAuthProvider, getAuth, signInWithPopup } from 'firebase/auth'
import { useAuth, useFirebaseApp } from 'solid-firebase'

function Login() {
  const app = useFirebaseApp()
  const signIn = () => signInWithPopup(getAuth(app), new GoogleAuthProvider())

  return <button onClick={signIn}>Sign In with Google</button>
}

function App() {
  const app = useFirebaseApp()
  const state = useAuth(getAuth(app))

  return (
    <Switch>
      <Match when={state.loading}>
        <p>Loading...</p>
      </Match>
      <Match when={state.error}>
        <Login />
      </Match>
      <Match when={state.data}>
        <User data={state.data} />
      </Match>
    </Switch>
  )
}

Cloud Firestore

useFirestore is a Cloud Firestore binding that makes it straightforward to always keep your local data in sync with remotes databases.

import { Match, Switch, createMemo, createSignal } from 'solid-js'
import { collection, getFirestore, limit, orderBy } from 'firebase/firestore'
import { useFirebaseApp, useFirestore } from 'solid-firebase'

function App() {
  const app = useFirebaseApp()
  const db = getFirestore(app)
  const todos = useFirestore(collection(db, 'todos'))

  // or for doc reference
  const todo = useFirestore(doc(db, 'todos', 'todo-id'))

  // you can also use an accessor for reactive query
  const [postsLimit] = createSignal(10)
  const postsQuery = createMemo(() => query(
    collection(db, 'posts'),
    orderBy('createdAt', 'desc'),
    limit(postsLimit())
  ))
  const posts = useFirestore(postsQuery)

  return (
    <Switch>
      <Match when={todos.loading}>
        <p>Loading...</p>
      </Match>
      <Match when={todos.error}>
        <p>An error occurred.</p>
      </Match>
      <Match when={todos.data}>
        <TodoList data={todos.data} />
      </Match>
    </Switch>
  )
}

Realtime Database

useDatabase is a Realtime Database binding that makes it straightforward to always keep your local data in sync with remotes databases.

import { Match, Switch } from 'solid-js'
import { getDatabase, ref } from 'firebase/database'
import { useDatabase, useFirebaseApp } from 'solid-firebase'

function App() {
  const app = useFirebaseApp()
  const db = getDatabase(app)
  const todos = useDatabase(ref(db, 'todos'))

  return (
    <Switch>
      <Match when={todos.loading}>
        <p>Loading...</p>
      </Match>
      <Match when={todos.error}>
        <p>An error occurred.</p>
      </Match>
      <Match when={todos.data}>
        <TodoList data={todos.data} />
      </Match>
    </Switch>
  )
}

Cloud Storage

useDownloadURL is a hook that wraps the getDownloadURL method of Cloud Storage.

import { Match, Switch } from 'solid-js'
import { getStorage, ref } from 'firebase/storage'
import { useDownloadURL, useFirebaseApp } from 'solid-firebase'

function App() {
  const app = useFirebaseApp()
  const storage = getStorage(app)
  const data = useDownloadURL(ref(
    storage,
    'images/yourimage.jpg',
  ))

  // or with an accessor
  const [location] = createSignal('images/yourimage.jpg')
  const downloadRef = createMemo(() => ref(storage, location()))
  const data = useDownloadURL(downloadRef)

  return (
    <Switch>
      <Match when={data.loading}>
        <p>Download URL: Loading...</p>
      </Match>
      <Match when={data.error}>
        <p>Error: {data.error?.name}</p>
      </Match>
      <Match when={data()}>
        <img src={data()} alt="pic" />
      </Match>
    </Switch>
  )
}