usmanxs / solid-firebase

Solid primitives for Firebase v9.

solid-firebase

Solid primitives for Firebase.

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

Quick start

Install it:

npm install firebase solid-firebase

Configure firebase app:

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

const firebaseConfig = {}

render(
  () => (
    <FirebaseProvider config={firebaseConfig}>
      <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 } from 'solid-js'
import { collection, getFirestore } 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'))

  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 state = useDownloadURL(ref(
    storage,
    'images/yourimage.jpg',
  ))

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

License

MIT