{"id":13572651,"url":"https://github.com/benwinding/react-admin-firebase","last_synced_at":"2025-05-14T13:04:32.854Z","repository":{"id":37390824,"uuid":"148880260","full_name":"benwinding/react-admin-firebase","owner":"benwinding","description":"A firebase data provider for the react-admin framework","archived":false,"fork":false,"pushed_at":"2025-02-10T01:56:51.000Z","size":65377,"stargazers_count":463,"open_issues_count":63,"forks_count":185,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-05-12T13:04:48.378Z","etag":null,"topics":["firebase","firebase-auth","firebase-authui","firestore","firestore-dataprovider","low-code","low-code-development-platform","react","react-admin"],"latest_commit_sha":null,"homepage":"https://benwinding.github.io/react-admin-firebase/","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/benwinding.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-15T07:32:55.000Z","updated_at":"2025-03-21T09:24:04.000Z","dependencies_parsed_at":"2024-06-18T15:24:12.381Z","dependency_job_id":"b9d0e88a-10f8-491b-898a-678daccdb6a5","html_url":"https://github.com/benwinding/react-admin-firebase","commit_stats":{"total_commits":421,"total_committers":37,"mean_commits":"11.378378378378379","dds":0.6437054631828978,"last_synced_commit":"4e684327394662de9c9700bf25ee9d0531bc6faf"},"previous_names":[],"tags_count":79,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Freact-admin-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Freact-admin-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Freact-admin-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Freact-admin-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benwinding","download_url":"https://codeload.github.com/benwinding/react-admin-firebase/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149870,"owners_count":22022850,"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","firebase-auth","firebase-authui","firestore","firestore-dataprovider","low-code","low-code-development-platform","react","react-admin"],"created_at":"2024-08-01T14:01:30.120Z","updated_at":"2025-05-14T13:04:32.768Z","avatar_url":"https://github.com/benwinding.png","language":"TypeScript","readme":"# react-admin-firebase\n\u003c!-- [START badges] --\u003e\n[![NPM Version](https://img.shields.io/npm/v/react-admin-firebase.svg)](https://www.npmjs.com/package/react-admin-firebase) \n[![License](https://img.shields.io/npm/l/react-admin-firebase.svg)](https://github.com/benwinding/react-admin-firebase/blob/master/LICENSE) \n[![Downloads/week](https://img.shields.io/npm/dm/react-admin-firebase.svg)](https://www.npmjs.com/package/react-admin-firebase) \n[![Github Issues](https://img.shields.io/github/issues/benwinding/react-admin-firebase.svg)](https://github.com/benwinding/react-admin-firebase)\n\u003c!-- [END badges] --\u003e\n\nA firebase data provider for the [React-Admin](https://github.com/marmelab/react-admin) framework. It maps collections from the Firebase database (Firestore) to your react-admin application. It's an [npm package](https://www.npmjs.com/package/react-admin-firebase)!\n\n---\n\n## Features\n- [x] Firestore Dataprovider _(details below)_\n- [x] Firebase AuthProvider (email, password)\n- [x] Login with: Google, Facebook, Github etc... [(Example Here)](https://github.com/benwinding/react-admin-firebase/blob/master/src-demo/src/CustomLoginPage.js)\n- [x] Forgot password button... [(Example Here)](https://github.com/benwinding/react-admin-firebase/blob/master/src-demo/src/CustomForgotPassword.js)\n- [x] Firebase storage upload functionality, with upload monitoring... [(Example Here)](https://github.com/benwinding/react-admin-firebase/blob/master/src-demo/src/EventMonitor.js)\n\n_Pull requests welcome!!_\n\n## Firestore Dataprovider Features\n- [x] Dynamic caching of resources\n- [x] All methods implemented; `(GET, POST, GET_LIST ect...)`\n- [x] Filtering, sorting etc...\n- [x] Ability to manage sub collections through app configuration\n- [x] Ability to use externally initialized firebaseApp instance\n- [x] Override firestore random id by using \"id\" as a field in the Create part of the resource\n- [x] Upload to the firebase storage bucket using the standard `\u003cFileInput /\u003e` field\n- [ ] Realtime updates, using ra-realtime\n    - Optional watch collection array or dontwatch collection array\n\n## Get Started\n`yarn add react-admin-firebase firebase`\n\nor\n\n`npm install --save react-admin-firebase firebase`\n\n## Demos Basic\nA simple example based on the [React Admin Tutorial](https://marmelab.com/react-admin/Tutorial.html).\n\n- [Demo Project (javascript)](https://github.com/benwinding/demo-react-admin-firebase)\n- [Demo Project (typescript)](https://github.com/benwinding/react-admin-firebase-demo-typescript)\n\n### Prerequisits\n- Create a `posts` collection in the firebase firestore database\n- Get config credentials using the dashboard\n\n## Options\n\n``` javascript\nimport {\n  FirebaseAuthProvider,\n  FirebaseDataProvider,\n  FirebaseRealTimeSaga\n} from 'react-admin-firebase';\n\nconst config = {\n  apiKey: \"aaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n  authDomain: \"aaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n  databaseURL: \"aaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n  projectId: \"aaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n  storageBucket: \"aaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n  messagingSenderId: \"aaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n};\n\n// All options are optional\nconst options = {\n  // Use a different root document to set your resource collections, by default it uses the root collections of firestore\n  rootRef: 'root-collection/some-doc' | () =\u003e 'root-collection/some-doc',\n  // Your own, previously initialized firebase app instance\n  app: firebaseAppInstance,\n  // Enable logging of react-admin-firebase\n  logging: true,\n  // Resources to watch for realtime updates, will implicitly watch all resources by default, if not set.\n  watch: ['posts'],\n  // Resources you explicitly dont want realtime updates for\n  dontwatch: ['comments'],\n  // Authentication persistence, defaults to 'session', options are 'session' | 'local' | 'none'\n  persistence: 'session',\n  // Disable the metadata; 'createdate', 'lastupdate', 'createdby', 'updatedby'\n  disableMeta: false,\n  // Have custom metadata field names instead of: 'createdate', 'lastupdate', 'createdby', 'updatedby'\n  renameMetaFields: {\n    created_at: 'my_created_at', // default: 'createdate'\n    created_by: 'my_created_by', // default: 'createdby'\n    updated_at: 'my_updated_at', // default: 'lastupdate'\n    updated_by: 'my_updated_by', // default: 'updatedby'\n  },\n  // Prevents document from getting the ID field added as a property\n  dontAddIdFieldToDoc: false,\n  // Adds 'deleted' meta field for non-destructive deleting functionality\n  // NOTE: Hides 'deleted' records from list views unless overridden by filtering for {deleted: true} \n  softDelete: false,\n  // Changes meta fields like 'createdby' and 'updatedby' to store user IDs instead of email addresses\n  associateUsersById: false,\n  // Casing for meta fields like 'createdby' and 'updatedby', defaults to 'lower', options are 'lower' | 'camel' | 'snake' | 'pascal' | 'kebab'\n  metaFieldCasing: 'lower',\n  // Instead of saving full download url for file, save just relative path and then get download url\n  // when getting docs - main use case is handling multiple firebase projects (environments)\n  // and moving/copying documents/storage files between them - with relativeFilePaths, download url\n  // always point to project own storage\n  relativeFilePaths: false, \n  // Add file name to storage path, when set to true the file name is included in the path\n  useFileNamesInStorage: false,\n  // Use firebase sdk queries for pagination, filtering and sorting\n  lazyLoading: {\n    enabled: false\n  },\n  // Logging of all reads performed by app (additional feature, for lazy-loading testing)\n  firestoreCostsLogger: {\n    enabled: false,\n    localStoragePrefix // optional\n  },\n  // Function to transform documentData before they are written to Firestore\n  transformToDb: (resourceName, documentData, documentId) =\u003e documentDataTransformed\n}\n\nconst dataProvider = FirebaseDataProvider(config, options);\nconst authProvider = FirebaseAuthProvider(config, options);\nconst firebaseRealtime = FirebaseRealTimeSaga(dataProvider, options);\n```\n\n## Data Provider\n\n``` javascript\nimport * as React from 'react';\nimport { Admin, Resource } from 'react-admin';\n\nimport { PostList, PostShow, PostCreate, PostEdit } from \"./posts\";\nimport {\n  FirebaseAuthProvider,\n  FirebaseDataProvider,\n  FirebaseRealTimeSaga\n} from 'react-admin-firebase';\n\nconst config = {\n  apiKey: \"aaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n  authDomain: \"aaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n  databaseURL: \"aaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n  projectId: \"aaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n  storageBucket: \"aaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n  messagingSenderId: \"aaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n};\n\nconst options = {};\n\nconst dataProvider = FirebaseDataProvider(config, options);\n...\n      \u003cAdmin \n        dataProvider={dataProvider} \n      \u003e\n        \u003cResource name=\"posts\" list={PostList} show={PostShow} create={PostCreate} edit={PostEdit}/\u003e\n      \u003c/Admin\u003e\n...\n```\n## Auth Provider\nUsing the `FirebaseAuthProvider` you can allow authentication in the application.\n\n``` javascript\nconst dataProvider = FirebaseDataProvider(config);\nconst authProvider = FirebaseAuthProvider(config);\n...\n      \u003cAdmin \n        dataProvider={dataProvider}\n        authProvider={authProvider}\n      \u003e\n...\n```\n\nAlso checkout how to login with: Google, Facebook, Github etc... [(Example Here)](https://github.com/benwinding/react-admin-firebase/blob/master/src-demo/src/CustomLoginPage.js)\n\nAnd you might want a \"Forgot password\" button... [(Example Here)](https://github.com/benwinding/react-admin-firebase/blob/master/src-demo/src/CustomForgotPassword.js)\n\n#### Note\nTo get the currently logged in user run `const user = await authProvider.checkAuth()`, this will return the firebase user object, or null if there is no currently logged in user.\n\n## Realtime Updates!\n\nNOTE: Realtime updates were removed in `react-admin` v3.x (see https://github.com/marmelab/react-admin/pull/3908). As such, `react-admin-firebase` v3.x also does not support Realtime Updates. However, much of the original code used for this functionality in `react-admin` v2.x remains - including the documentation below. For updates on the implementation of realtime please follow these issues:\n- https://github.com/benwinding/react-admin-firebase/issues/49\n- https://github.com/benwinding/react-admin-firebase/issues/57\n\nGet realtime updates from the firebase server instantly on your tables, with minimal overheads, using rxjs observables!\n\n``` javascript\n...\nimport {\n  FirebaseRealTimeSaga,\n  FirebaseDataProvider\n} from 'react-admin-firebase';\n...\nconst dataProvider = FirebaseDataProvider(config);\nconst firebaseRealtime = FirebaseRealTimeSaga(dataProvider);\n...\n      \u003cAdmin \n        dataProvider={dataProvider} \n        customSagas={[firebaseRealtime]}\n      \u003e\n...\n```\n\n### Realtime Options\nTrigger realtime on only some routes using the options object.\n\n``` javascript\n...\nconst dataProvider = FirebaseDataProvider(config);\nconst options = {\n  watch: ['posts', 'comments'],\n  dontwatch: ['users']\n}\nconst firebaseRealtime = FirebaseRealTimeSaga(dataProvider, options);\n...\n```\n\n## Upload Progress\n\nMonitor file upload data using custom React component which listen for following events (`CustomEvent`):\n\n- `FILE_UPLOAD_WILL_START`\n- `FILE_UPLOAD_START`\n- `FILE_UPLOAD_PROGRESS`\n- `FILE_UPLOAD_PAUSED`\n- `FILE_UPLOAD_CANCELD`\n- `FILE_UPLOAD_COMPLETE`\n- `FILE_SAVED`\n\nAll events have data passed in `details` key:\n\n- `fileName`: the file anme\n- `data`: percentage for `FILE_UPLOAD_PROGRESS`\n\nEvents are sent to HTML DOM element with id \"eventMonitor\". See demo implementation for example at [src-demo/src/App.js](src-demo/src/App.js);\n\n# Help Develop `react-admin-firebase`?\n\n1. `git clone https://github.com/benwinding/react-admin-firebase`\n2. `yarn`\n3. `yarn start-demo`\n\nNow all local changes in the library source code can be tested immediately in the demo app.\n\n### Run tests\nTo run the tests, either watch for changes or just run all tests.\n\n- `yarn test-watch`\n- `yarn test`\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=ben.winding%40gmail.com\u0026item_name=Development\u0026currency_code=AUD\u0026source=url)\n","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=ben.winding%40gmail.com\u0026item_name=Development\u0026currency_code=AUD\u0026source=url"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenwinding%2Freact-admin-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenwinding%2Freact-admin-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenwinding%2Freact-admin-firebase/lists"}