react-admin-firebase-01tek

Custom version for 01TEK with patches
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
Pull requests welcome!!
Firestore Dataprovider Features
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
import {
FirebaseAuthProvider,
FirebaseDataProvider,
FirebaseRealTimeSaga
} from 'react-admin-firebase';
const config = {
apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
authDomain: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
databaseURL: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
projectId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
storageBucket: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
messagingSenderId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
};
const options = {
rootRef: 'root-collection/some-doc' | () => 'root-collection/some-doc',
app: firebaseAppInstance,
logging: true,
watch: ['posts'],
dontwatch: ['comments'],
persistence: 'session',
disableMeta: false,
renameMetaFields: {
created_at: 'my_created_at',
created_by: 'my_created_by',
updated_at: 'my_updated_at',
updated_by: 'my_updated_by',
},
dontAddIdFieldToDoc: false,
softDelete: false,
associateUsersById: false,
metaFieldCasing: 'lower',
relativeFilePaths: false,
useFileNamesInStorage: false,
lazyLoading: {
enabled: false
},
firestoreCostsLogger: {
enabled: false,
localStoragePrefix
},
transformToDb: (resourceName, documentData, documentId) => documentDataTransformed
}
const dataProvider = FirebaseDataProvider(config, options);
const authProvider = FirebaseAuthProvider(config, options);
const firebaseRealtime = FirebaseRealTimeSaga(dataProvider, options);
Data Provider
import * as React from 'react';
import { Admin, Resource } from 'react-admin';
import { PostList, PostShow, PostCreate, PostEdit } from "./posts";
import {
FirebaseAuthProvider,
FirebaseDataProvider,
FirebaseRealTimeSaga
} from 'react-admin-firebase';
const config = {
apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
authDomain: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
databaseURL: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
projectId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
storageBucket: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
messagingSenderId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
};
const options = {};
const dataProvider = FirebaseDataProvider(config, options);
...
<Admin
dataProvider={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 = FirebaseDataProvider(config);
const authProvider = FirebaseAuthProvider(config);
...
<Admin
dataProvider={dataProvider}
authProvider={authProvider}
>
...
Also checkout how to login with: Google, Facebook, Github etc... (Example Here)
And you might want a "Forgot password" button... (Example Here)
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 functionality in react-admin
v2.x remains - including the documentation below. For updates on the implementation of realtime please follow these issues:
Get realtime updates from the firebase server instantly on your tables, with minimal overheads, using rxjs observables!
...
import {
FirebaseRealTimeSaga,
FirebaseDataProvider
} from 'react-admin-firebase';
...
const dataProvider = FirebaseDataProvider(config);
const firebaseRealtime = FirebaseRealTimeSaga(dataProvider);
...
<Admin
dataProvider={dataProvider}
customSagas={[firebaseRealtime]}
>
...
Realtime Options
Trigger realtime on only some routes using the options object.
...
const dataProvider = FirebaseDataProvider(config);
const options = {
watch: ['posts', 'comments'],
dontwatch: ['users']
}
const firebaseRealtime = FirebaseRealTimeSaga(dataProvider, options);
...
Upload Progress
Monitor file upload data using custom React component which listen for following events (CustomEvent
):
FILE_UPLOAD_WILL_START
FILE_UPLOAD_START
FILE_UPLOAD_PROGRESS
FILE_UPLOAD_PAUSED
FILE_UPLOAD_CANCELD
FILE_UPLOAD_COMPLETE
FILE_SAVED
All events have data passed in details
key:
fileName
: the file anme
data
: percentage for FILE_UPLOAD_PROGRESS
Events are sent to HTML DOM element with id "eventMonitor". See demo implementation for example at src-demo/src/App.js;
Help Develop react-admin-firebase
?
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.
Run tests
To run the tests, either watch for changes or just run all tests.
yarn test-watch
yarn test
