{"id":13533343,"url":"https://github.com/wobsoriano/solid-firebase","last_synced_at":"2025-04-13T18:20:49.099Z","repository":{"id":38370175,"uuid":"456372793","full_name":"wobsoriano/solid-firebase","owner":"wobsoriano","description":"Solid primitives for Firebase v9.","archived":false,"fork":false,"pushed_at":"2023-08-07T01:42:53.000Z","size":328,"stargazers_count":75,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T18:05:54.703Z","etag":null,"topics":["firebase","solid","solid-js"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wobsoriano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-02-07T05:40:49.000Z","updated_at":"2024-04-26T03:27:15.000Z","dependencies_parsed_at":"2024-01-14T02:17:45.710Z","dependency_job_id":null,"html_url":"https://github.com/wobsoriano/solid-firebase","commit_stats":{"total_commits":16,"total_committers":2,"mean_commits":8.0,"dds":0.1875,"last_synced_commit":"ec7ce77fa4ce590c212492bc8d2b7256cac6e4c3"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fsolid-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wobsoriano","download_url":"https://codeload.github.com/wobsoriano/solid-firebase/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248758854,"owners_count":21157041,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","solid","solid-js"],"created_at":"2024-08-01T07:01:18.892Z","updated_at":"2025-04-13T18:20:49.076Z","avatar_url":"https://github.com/wobsoriano.png","language":"TypeScript","readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=solid-firebase\u0026background=tiles\u0026project=%20\" alt=\"solid-firebase\"\u003e\n\u003c/p\u003e\n\n# solid-firebase\n\nSolid primitives for Firebase.\n\n\u003e ⚠️ This package only works with [Firebase 9 or above with modular style](https://firebase.google.com/docs/web/modular-upgrade).\n\n## Quick start\n\nInstall it:\n\n```bash\nnpm install firebase solid-firebase\n```\n\nConfigure firebase app:\n\n```tsx\nimport { render } from 'solid-js/web'\nimport { initializeApp } from 'firebase/app'\nimport { FirebaseProvider } from 'solid-firebase'\nimport App from './App'\n\nconst app = initializeApp({ projectId: 'MY PROJECT ID' })\n\nrender(\n  () =\u003e (\n    \u003cFirebaseProvider app={app}\u003e\n      \u003cApp /\u003e\n    \u003c/FirebaseProvider\u003e\n  ),\n  document.getElementById('root'),\n)\n```\n\n## Primitives\n\nThe primitive [useFirebaseApp](https://github.com/wobsoriano/solid-firebase/blob/master/packages/lib/src/hooks/useFirebaseApp.tsx) gives you access to the initialized firebase app.\n\n### Authentication\n\n[useAuth](https://github.com/wobsoriano/solid-firebase/blob/master/packages/lib/src/hooks/useAuth.tsx) is a [Firebase Auth](https://firebase.google.com/docs/auth) binding to easily react to changes in the users' authentication status.\n\n```tsx\nimport { Match, Switch } from 'solid-js'\nimport { GoogleAuthProvider, getAuth, signInWithPopup } from 'firebase/auth'\nimport { useAuth, useFirebaseApp } from 'solid-firebase'\n\nfunction Login() {\n  const app = useFirebaseApp()\n  const signIn = () =\u003e signInWithPopup(getAuth(app), new GoogleAuthProvider())\n\n  return \u003cbutton onClick={signIn}\u003eSign In with Google\u003c/button\u003e\n}\n\nfunction App() {\n  const app = useFirebaseApp()\n  const state = useAuth(getAuth(app))\n\n  return (\n    \u003cSwitch fallback={\u003cLogin /\u003e}\u003e\n      \u003cMatch when={state.loading}\u003e\n        \u003cp\u003eLoading...\u003c/p\u003e\n      \u003c/Match\u003e\n      \u003cMatch when={state.error}\u003e\n        \u003cLogin /\u003e\n      \u003c/Match\u003e\n      \u003cMatch when={state.data}\u003e\n        \u003cUser data={state.data} /\u003e\n      \u003c/Match\u003e\n    \u003c/Switch\u003e\n  )\n}\n```\n\n### Cloud Firestore\n\n[useFirestore](https://github.com/wobsoriano/solid-firebase/blob/master/packages/lib/src/hooks/useFirestore.tsx) is a [Cloud Firestore](https://firebase.google.com/docs/firestore) binding that makes it straightforward to always keep your local data in sync with remotes databases.\n\n```tsx\nimport { Match, Switch, createMemo, createSignal } from 'solid-js'\nimport { collection, getFirestore, limit, orderBy } from 'firebase/firestore'\nimport { useFirebaseApp, useFirestore } from 'solid-firebase'\n\nfunction App() {\n  const app = useFirebaseApp()\n  const db = getFirestore(app)\n  const todos = useFirestore(collection(db, 'todos'))\n\n  // or for doc reference\n  const todo = useFirestore(doc(db, 'todos', 'todo-id'))\n\n  // you can also use an accessor for reactive query\n  const [postsLimit] = createSignal(10)\n  const postsQuery = createMemo(() =\u003e query(\n    collection(db, 'posts'),\n    orderBy('createdAt', 'desc'),\n    limit(postsLimit())\n  ))\n  const posts = useFirestore(postsQuery)\n\n  return (\n    \u003cSwitch\u003e\n      \u003cMatch when={todos.loading}\u003e\n        \u003cp\u003eLoading...\u003c/p\u003e\n      \u003c/Match\u003e\n      \u003cMatch when={todos.error}\u003e\n        \u003cp\u003eAn error occurred.\u003c/p\u003e\n      \u003c/Match\u003e\n      \u003cMatch when={todos.data}\u003e\n        \u003cTodoList data={todos.data} /\u003e\n      \u003c/Match\u003e\n    \u003c/Switch\u003e\n  )\n}\n```\n\n### Realtime Database\n\n[useDatabase](https://github.com/wobsoriano/solid-firebase/blob/master/packages/lib/src/hooks/useDatabase.tsx) is a [Realtime Database](https://firebase.google.com/docs/database) binding that makes it straightforward to always keep your local data in sync with remotes databases.\n\n```tsx\nimport { Match, Switch } from 'solid-js'\nimport { getDatabase, ref } from 'firebase/database'\nimport { useDatabase, useFirebaseApp } from 'solid-firebase'\n\nfunction App() {\n  const app = useFirebaseApp()\n  const db = getDatabase(app)\n  const todos = useDatabase(ref(db, 'todos'))\n\n  return (\n    \u003cSwitch\u003e\n      \u003cMatch when={todos.loading}\u003e\n        \u003cp\u003eLoading...\u003c/p\u003e\n      \u003c/Match\u003e\n      \u003cMatch when={todos.error}\u003e\n        \u003cp\u003eAn error occurred.\u003c/p\u003e\n      \u003c/Match\u003e\n      \u003cMatch when={todos.data}\u003e\n        \u003cTodoList data={todos.data} /\u003e\n      \u003c/Match\u003e\n    \u003c/Switch\u003e\n  )\n}\n```\n\n### Cloud Storage\n\n[useDownloadURL](https://github.com/wobsoriano/solid-firebase/blob/master/packages/lib/src/hooks/useDownloadURL.tsx) is a hook that wraps the [getDownloadURL](https://firebase.google.com/docs/storage/web/download-files#download_data_via_url) method of [Cloud Storage](https://firebase.google.com/docs/storage).\n\n```tsx\nimport { Match, Switch } from 'solid-js'\nimport { getStorage, ref } from 'firebase/storage'\nimport { useDownloadURL, useFirebaseApp } from 'solid-firebase'\n\nfunction App() {\n  const app = useFirebaseApp()\n  const storage = getStorage(app)\n  const data = useDownloadURL(ref(\n    storage,\n    'images/yourimage.jpg',\n  ))\n\n  // or with an accessor\n  const [location] = createSignal('images/yourimage.jpg')\n  const downloadRef = createMemo(() =\u003e ref(storage, location()))\n  const data = useDownloadURL(downloadRef)\n\n  return (\n    \u003cSwitch\u003e\n      \u003cMatch when={data.loading}\u003e\n        \u003cp\u003eDownload URL: Loading...\u003c/p\u003e\n      \u003c/Match\u003e\n      \u003cMatch when={data.error}\u003e\n        \u003cp\u003eError: {data.error?.name}\u003c/p\u003e\n      \u003c/Match\u003e\n      \u003cMatch when={data()}\u003e\n        \u003cimg src={data()} alt=\"pic\" /\u003e\n      \u003c/Match\u003e\n    \u003c/Switch\u003e\n  )\n}\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":["📦 Components \u0026 Libraries","TypeScript"],"sub_categories":["Misc."],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwobsoriano%2Fsolid-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwobsoriano%2Fsolid-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwobsoriano%2Fsolid-firebase/lists"}