Ra-data-firestore NPM

ra-data-firestore

A react-admin firebase/firestore dataProvider

Installation

npm install ra-data-firestore --save

Usage

As a parameter of the `<Admin>` component

// in src/App.js
import React from 'react';
import { Admin, Resource } from 'react-admin';
import { RestClient } from 'ra-firebase-client';

const firebaseConfig = {
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  storageBucket: '<your-storage-bucket>',
  messagingSenderId: '<your-sender-id>',
};

const clientOptions = {
  timestampFieldNames: {
    createdAt: 'createdAt',
    updatedAt: 'updatedAt',
  },
  trackedResources: [
    {
      name: 'posts', // The name reference to be used in all other places in AOR
      path: 'blog', // The path in the database. If missing will use the name
      public: true,
      uploadFields: [], // The string name of the field
    },
    'contacts',
  ], // A single string assumes path and name as equal, non private and without upload fields
};

const App = () => (
  <Admin restClient={RestClient(trackedResources, clientOptions)}>
    <Resource name="posts" list={PostList} />
    <Resource name="contacts" list={ContactList} />
  </Admin>
);

export default App;

Auth Client

The package lets you manage the login/logout process implementing an optional authClient prop of the Admin component (see documentation).
It stores a firebaseToken in localStorage. The configuration options available are:

userProfilePath: The database path to user profiles. Defaults to /users/. Mind the slashes.
userAdminProp: The database key to point if a user has admin powers. Defaults to isAdmin

The final path is: {userProfilePath}/{uid}/{userAdminProp}

localStorageTokenName: Local storage identifier to hold the firebase client token, defaults to aorFirebaseClientToken
handleAuthStateChange: A way to override the auth process

// in src/App.js
...
import {RestClient, AuthClient} from 'aor-firebase-client';

const firebaseConfig = {
    apiKey: '<your-api-key>',
    authDomain: '<your-auth-domain>',
    databaseURL: '<your-database-url>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-sender-id>'
};

const authConfig = {
    userProfilePath: 'profiles',
    userAdminProp: 'superuser'
}

const App = () => (
    <Admin restClient={RestClient(firebaseConfig)} authClient={AuthClient(authConfig)}>
        <Resource name="posts" list={PostList} />
    </Admin>
);

export default App;

Note: AuthClient does require using the RestClient in order to initialize firebase. Alternatively, you can opt to not use the RestClient and initialize firebase yourself like this:

import { RestClient, AuthClient } from 'aor-firebase-client';
import firebase from 'firebase';

const firebaseConfig = {
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  storageBucket: '<your-storage-bucket>',
  messagingSenderId: '<your-sender-id>',
};

firebase.initializeApp(firebaseConfig);

const App = () => (
  <Admin authClient={AuthClient()}>
    <Resource name="posts" list={PostList} />
  </Admin>
);

export default App;

Changelog

v2.0.0-beta.1

firestore AuthProvider

v1.1.0

firestore supports
drop firebase support

v0.0.10

Documentation fix for authClient #17
Handle empty collections #18
Build lib on prepare #19
Thanks to @grahamlyus who worked a LOT this month to make this release possible! Kudos!