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

• [x] Firestore Dataprovider (details below)
• [x] Firebase AuthProvider (email, password)
• [x] Login with: Google, Facebook, Github etc... (Example Here)
• [x] Forgot password button... (Example Here)
• [x] Firebase storage upload functionality

Pull requests welcome!!

Firestore Dataprovider Features

• [x] Dynamic caching of resources
• [x] All methods implemented; (GET, POST, GET_LIST ect...)
• [x] Filtering, sorting etc...
• [x] Ability to manage sub collections through app configuration
• [x] Ability to use externally initialized firebaseApp instance
• [x] Override firestore random id by using "id" as a field in the Create part of the resource
• [x] 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.

• Demo Project (javascript)
• Demo Project (typescript)

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",
};

// All options are optional
const options = {
  // Use a different root document to set your resource collections, by default it uses the root collections of firestore
  rootRef: 'root-collection/some-doc',
  // Your own, previously initialized firebase app instance
  app: firebaseAppInstance,
  // Enable logging of react-admin-firebase
  logging: 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 for
  dontwatch: ['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 property
  dontAddIdFieldToDoc: false
}

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}
      >
...

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!

...
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);
...

Help Develop react-admin-firebase?

1. git clone https://github.com/benwinding/react-admin-firebase
2. yarn
3. yarn start-demo

Now all local changes in the library source code can be tested immediately in the demo app.