react-admin-firebase
A firebase data provider for the React-Admin framework. It maps collections from the Firebase database (Firestore) to your react-admin application. It's an npm package!
Features
- Firestore Dataprovider (details below)
- Firebase AuthProvider (email, password)
- Login with: Google, Facebook, Github etc... (Example Here)
- Firebase storage upload functionality
Pull requests welcome!!
Firestore Dataprovider Features
- Dynamic caching of resources
- All methods implemented;
(GET, POST, GET_LIST ect...)
- Filtering, sorting etc...
- Ability to manage sub collections through app configuration
- Ability to use externally initialized firebaseApp instance
- Override firestore random id by using "id" as a field in the Create part of the resource
- Upload to the firebase storage bucket using the standard
<FileInput />
field - Realtime updates, using ra-realtime
- Optional watch collection array or dontwatch collection array
Get Started
yarn add react-admin-firebase firebase
or
npm install --save react-admin-firebase firebase
Demos Basic
A simple example based on the React Admin Tutorial.
Prerequisits
- Create a
posts
collection in the firebase firestore database - Get config credentials using the dashboard
Options
;const config =apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"authDomain: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"databaseURL: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"projectId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"storageBucket: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"messagingSenderId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa";// All options are optionalconst options =// Use a different root document to set your resource collections, by default it uses the root collections of firestorerootRef: 'root-collection/some-doc'// Your own, previously initialized firebase app instanceapp: firebaseAppInstance// Enable logging of react-admin-firebaselogging: true// Resources to watch for realtime updates, will implicitly watch all resources by default, if not set.watch: 'posts'// Resources you explicitly dont want realtime updates fordontwatch: 'comments'// Authentication persistence, defaults to 'session', options are 'session' | 'local' | 'none'persistence: 'session'// Disable the metadata; 'createdate', 'lastupdate', 'createdby', 'updatedby'disableMeta: false// Prevents document from getting the ID field added as a propertydontAddIdFieldToDoc: falseconst dataProvider = ;const authProvider = ;const firebaseRealtime = ;
Data Provider
;;;;const config =apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"authDomain: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"databaseURL: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"projectId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"storageBucket: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"messagingSenderId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa";const options = {};const dataProvider = ;...<AdmindataProvider=dataProvider><Resource name="posts" list=PostList show=PostShow create=PostCreate edit=PostEdit/></Admin>...
Auth Provider
Using the FirebaseAuthProvider
you can allow authentication in the application.
const dataProvider = ;const authProvider = ;...<AdmindataProvider=dataProviderauthProvider=authProvider>...
Note
To 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.
Realtime Updates!
NOTE: 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 functionalaity in react-admin
v2.x remains - including the documentation below. For updates on the implementation of realtime please follow these issues:
- https://github.com/benwinding/react-admin-firebase/issues/49
- https://github.com/benwinding/react-admin-firebase/issues/57
Get realtime updates from the firebase server instantly on your tables, with minimal overheads, using rxjs observables!
...;...const dataProvider = ;const firebaseRealtime = ;...<AdmindataProvider=dataProvidercustomSagas=firebaseRealtime>...
Realtime Options
Trigger realtime on only some routes using the options object.
...const dataProvider = ;const options =watch: 'posts' 'comments'dontwatch: 'users'const firebaseRealtime = ;...
react-admin-firebase
?
Help Develop git clone https://github.com/benwinding/react-admin-firebase
yarn
yarn start-demo
Now all local changes in the library source code can be tested immediately in the demo app.