Solid primitives for Firebase.
⚠️ This package only works with Firebase 9 or above with the modular style.
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'),
)
The primitive useFirebaseApp gives you access to the initialized firebase app.
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'
const Login = () => {
const app = useFirebaseApp()
const signIn = () => signInWithPopup(getAuth(app), new GoogleAuthProvider())
return <button onClick={signIn}>Sign In with Google</button>
}
const 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>
)
}
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'
const 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>
)
}
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'
const 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>
)
}
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'
const 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>
)
}
MIT