rakannimer / react-firebase Goto Github PK

🔥Declarative React bindings for Firebase Auth & Realtime Database.

Home Page: https://react-firebase-js.com/

JavaScript 7.82% HTML 2.05% TypeScript 84.70% CSS 0.15% Python 0.93% Java 1.78% Ruby 0.49% Objective-C 2.07%

react firebase firebase-database firebase-auth firebase-firestore react-firebase

react-firebase's Introduction

React Firebase

Building apps with React & Firebase should be easy. The goal of this project is to offer intuitive declarative APIs to make interacting with Firebase fun and easy.

Check the complete docs 👉 Here

React Firebase

Modules

Firebase Realtime Database : @react-firebase/database
Firebase Auth : @react-firebase/auth
Firebase Data Generator: generate-firebase-data
Firestore Data Generator: generate-firestore-data
Linked JSON Data Generator: generate-data

Sandboxes

Auth

Anonymous/Google Auth

Sandbox
Code

Realtime Database

Installation

Web

Install firebase.

yarn add firebase
# Or
npm i firebase

Firebase Auth

yarn add @react-firebase/auth

Firebase Realtime Database

yarn add @react-firebase/database

react-firebase's People

Contributors

Stargazers

Watchers

react-firebase's Issues

Firebase Google Login

Hi. I have been experiencing this error when using Google Auth. Is there something wrong with my code or is this a bug?

How do I enable persistance in firestore

FirebaseError: Firestore has already been started and persistence can no longer be enabled. You can only enable persistence before calling any other methods on a Firestore object.

[Docs][database] Add isList and keysOnly props documentation

Domain for documentation is fake or expired

takes you https://react-firebase-js.com/ and that is not existent

taked from documentation at https://firebaseopensource.com/projects/rakannimer/react-firebase/

TypeError: Cannot read property 'unsub' of undefined

First of all: thank you for this library!

I'm getting the following error TypeError: Cannot read property 'unsub' of undefined when mounting/unmounting nested FirebaseDatabaseNodes.

The error occurs in this block:

if (path in this.state.dataTree) {
  this.state.dataTree[path].unsub && this.state.dataTree[path].unsub();
}

which I think is in: ~/react-firebase/modules/database/src/components/FirebaseDatabaseProvider.tsx on line 116, but I'm not sure.

I think a quick fix would be to do something along the lines of:

this.state.dataTree[path] && this.state.dataTree[path].unsub && this.state.dataTree[path].unsub();

But that looks like compiled output so I'm not sure.

Have you encountered this? What are your recommendations on nesting database nodes?

No way to update a document within a collection

I use FirestoreCollection to render a table of data. I want to allow the user to update any of the items within the collection but i have no access to the id of the document. All that FirestoreCollection exposes are the data.

return (
    <FirebaseAuthConsumer>
        {({ isSignedIn, user, providerId }) => {
            if (!isSignedIn)
                return (
                    <>
                        <div>not signed in</div>
                    </>
                )
            return (
                <>
                    <FirestoreCollection
                        path={`users/${user.uid}/workouts`}
                        orderBy={[{ field: 'date', type: 'desc' }]}
                    >
                        {({ value }) => {
                            if (!value) {
                                return (
                                    <>
                                        <div>loading...</div>
                                    </>
                                )
                            }

                            return (
                                <>
                                    <MaterialTable
                                        columns={[
                                            {
                                                title: 'Exercise',
                                                field: 'exercise', // accessor is the "key" in the data

                                                editComponent: (
                                                    tableData
                                                ) => (
                                                    <ComboBox
                                                        style={
                                                            comboBoxStyle
                                                        }
                                                        selectedKey={
                                                            tableData
                                                                .rowData
                                                                .exerciseId
                                                        }
                                                        label="Select Exercise"
                                                        allowFreeform
                                                        autoComplete="on"
                                                        options={items}
                                                        onChange={onChange}
                                                    />
                                                ),
                                            },
                                            {
                                                title: 'Reps',
                                                field: 'reps',
                                                validate: (rowData) =>
                                                    rowData.reps > 0,
                                            },
                                            {
                                                type: 'date',
                                                title: 'Date',
                                                field: 'date',
                                            },
                                            {
                                                title: 'exerciseId',
                                                field: 'exerciseId',
                                                hidden: true,
                                            },
                                           
                                        ]}
                                        editable={{
                                            onRowAdd: (newData) =>
                                                new Promise(
                                                    (resolve, reject) => {
                                                        setTimeout(() => {
                                                            console.log(
                                                                newData
                                                            )
                                                            FirestoreService.addWorkout(
                                                                {
                                                                    exerciseId: selectedKey,
                                                                    exercise: selectedExercise,
                                                                    date: formatDate(
                                                                        newData.date
                                                                    ),
                                                                    reps:
                                                                        newData.reps,
                                                                }
                                                            )
                                                            resolve(1)
                                                        }, 1000)
                                                    }
                                                ),
                                            onRowUpdate: (
                                                newData,
                                                oldData
                                            ) =>
                                                new Promise(
                                                    (resolve, reject) => {
                                                        setTimeout(() => {
                                                            console.log(
                                                                'newupd',
                                                                newData,
                                                                oldData
                                                            )

                                                            FirestoreService.updateWorkout(
                                                                {
                                                                    exerciseId: selectedKey,
                                                                    exercise: selectedExercise,
                                                                    date: formatDate(
                                                                        newData.date
                                                                    ),
                                                                    reps:
                                                                        newData.reps,
                                                                    id:
                                                                       **Here is where I need an ID**
                                                                }
                                                            )
                                                            resolve(1)
                                                        }, 1000)
                                                    }
                                                ),
                                        }}
                                        title="Workout Log"
                                        actions={[
                                            {
                                                icon: 'delete',
                                                tooltip: 'Delete Workout',
                                                onClick: (rowData) => {
                                                    FirestoreService.deleteWorkout(
                                                       
                                                      **_### Here is where I need and ID_**
                                                    )
                                                },
                                            },
                                        ]}
                                        data={value}
                                        options={{
                                            pageSize: 10,
                                            pageSizeOptions: [10, 25, 50],
                                            toolbar: true,
                                            paging: true,
                                            emptyRowsWhenPaging: false,
                                        }}
                                    ></MaterialTable>
                                </>
                            )
                        }}
                    </FirestoreCollection>
                </>
            )
        }}
    </FirebaseAuthConsumer>

Unexpected re-renders during collection fetch

Hey,

Thanks for making this!

I noticed that my app was re-rendering many times on initial load, and after changing a document, which was being rendered by a FirestoreCollection.

You can observe the behavior like this:

<FirestoreCollection path="bookmarks">
  {({ isLoading, value }) => {
    if (isLoading) {
      return <Loading />
    } else {
      console.log(value.length)
      return null
    }
  }}
</FirestoreCollection>

Assuming you have a couple of documents in bookmarks/ it should count up to the length of the collection.

It seems this happens because setState is being called for each document in the collection here and each setState triggers a re-render.

Is this by design? The current behavior was unexpected for me, as I assumed it would only re-render once and add the documents in one transaction.

How to know if data is loading to display loading screen rather than login page?

I need to display loading screen rather than displaying login screen while data is being fetched. Can you please tell me about it? I have checked docs but I didn't find anything. Thanks.

Is this project maintained?

Not obvious what databaseURL in config should be

Hi, I'm new to Firebase and just created a web app in Firebase, but React Firebase is asking for databaseURL, which is not given in their copy-config panel. The keys I do have are:

apiKey
authDomain
projectId
storageBucket
messagingSenderId
appId

I tried adding a Cloud Firestore, but if this has a databaseURL it's not obvious where I would find it. I'm strongly suspecting this is something they have removed from their API, but React Firebase still thinks it's needed?

Another possibility is I need to create a Realtime Database, but from research so far, I'm not sure this is actually what I want to use.

Add Support for Storage

hello,

I LOVE this package but I want to use more than just the features you currently provide.

I would imagine that adding in a component for Storage would be basically the same as a Firestore document but with a different implementation behind the scenes for generating the mutation functions etc.

are you accepting PRs for this sort of feature request?

Local state is unreachable inside FirestoreMutation render function

In a component, I create some state. I return my jsx with a FirestoreMutation and try to access that state inside it but it is not getting through.
I tried passing what I need as prop to FirestoreMutation in case you are passing unknown props to the child render function but apparently you are not.
Maybe I am missing something obvious because I didn't have time to give it a proper look but it seems local state is unreachable inside FirestoreMutation
Cheers

Potential Security Issue

👋 Hello, we've received a report for a potential critical severity security issue in your repository.

Next Steps

1️⃣ Visit https://huntr.dev/bounties/1-other-rakannimer/react-firebase for more advisory information.

2️⃣ Sign-up to validate or speak to the researcher for more assistance.

3️⃣ Propose a patch or outsource it to our community.

Confused or need more help?

Join us on our Discord and a member of our team will be happy to help! 🤗
Speak to a member of our team: @JamieSlome

This issue was automatically generated by huntr.dev - a bug bounty board for securing open source code.

Demo link moves weather extension

Compatibility with firebase version 9 (modular)

Hi. Is this package compatible with the modular version of firebase?

Allow multiple where clauses.

Firestore api allows for chained "where" conditions but that doesn't seem possible with this library.

FirestoreCollection doesn't refetch when props changed

Hi,

thanks for this library

I've noticed that even when the where props of the FirestoreCollection changes, it doesn't try to re-fetch, I'm not sure if that's intended. It seems that the fetching only happens on FirestoreCollection mount and doesn't happen on re-renders.

If that's an expected behavior, is there a way to trigger a re-fetch on an existing (mounted) FirestoreCollection? Is there something like the refetch prop of react-apollo's Query component?

My code looks something like this, and I'm very sure that the search props it receives changes:

export function Connector(props: PatientListConnectorProps) {
  const { search } = props;

  return (
    <FirestoreCollection
      path="/entity"
      where={
        search
          ? {
              field: 'name',
              operator: '==',
              value: search,
            }
          : null
      }
    >
      {({ isLoading, value }) =>
        props.children({
          fetcher: {
            isLoading: isLoading,
            patients: value,
          },
        })
      }
    </FirestoreCollection>
  );
}

Thank you in advance

Allow npm and yarn support for testing.

Consider the scripts in the root `package.json`:

{
"scripts": {
    "test:auth": "cd modules/auth && yarn test",
    "test:database": "cd modules/database && yarn test",
    "test:firestore": "cd modules/firestore && yarn test",
    "test": "yarn test:auth && yarn test:database && yarn test:firestore"
  },
}

Problem

If someone does not have yarn installed and works exclusively with npm then all the scripts FAIL.

Suggested fix

Probably a better idea to either default to npm or else have the keys say : test:auth:npm and test:auth:yarn, and handle the scripts accordingly.

npm package shouldn't include demo files

The demo files are packaged in npm. Please remove them to reduce package size!

Docs link is down

title

FirestoreCollection mutliple queries with AND

Hi,
thanks for this project is really cool!
Right now I need to pass a set of queries to avoid permission issues with firestore security rules, using the Firebase SDK it is possible to perform an AND chaining multiple where calls.
Is there a way to handle this in react-firebase?

Thanks again!

Usage of GPLv3 License

Hi 👋. This is more a question than an issue.

We've noticed that the packages from the repository are under GPL v3 (https://github.com/rakannimer/react-firebase/blob/master/modules/auth/package.json#L10). This impedes them from using in propietary/commercial software. Just to wanted to double check if this was a conscious decision? Is there any chance this can be modified to an MIT license?

Thanks!

Firestore "timestampsInSnapshots setting now defaults to true" console error

I'm using [email protected] and there's this console error when using the FirestoreProvider.

I believe this line causes it:

react-firebase/modules/firestore/src/components/FirestoreProvider.tsx

Line 114 in 397320d

const settings = { timestampsInSnapshots: true };

Issue with gRPC

Had this issue a few days ago. Had to uninstall react-firebase and switch over to redux-firestore. It was a problem compiling and finding the package.json. On compile, gRPC would look for package.json at C:\package.json, it wasn't there.

FirebaseDatabaseNode should use its callback when the data at its path gets deleted

Login flow

Hi. I am developing a react app with firebase login. I just want to ask if it is possible that before my login page shows, firebase will check if it is authenticated and it will then redirect to the Orders page. Here is my website:

https://test.hamiliserver.com/#/

import React, { Component, Fragment} from 'react';
import logo from './logo.svg';
import './App.css';
import {NavLink} from 'react-router-dom'
import {withRouter, BrowserRouter, Route, Switch, Redirect} from 'react-router-dom';
import history from 'history';

import Order from './Order';
import Products from './Products';
import NoPage from './NoPage';
import AddProduct from './AddProduct';
import Geography from './Geography';
import Navigation from './Navigation';
import Login from './Login';
import {AceFurnitureAPI} from './API/AceFurnitureAPI';

import * as firebase from "firebase/app";
import "firebase/auth";
import {
  FirebaseAuthProvider,
  FirebaseAuthConsumer,
  IfFirebaseAuthed,
  IfFirebaseAuthedAnd
} from "@react-firebase/auth";
import { config } from "./Firebase/config";
import LoadingModal from "./component/LoadingModal";


class App extends Component {

  constructor(props){
    super(props);
    this.userVerification=AceFurnitureAPI.userVerification.bind(this);
    this.state={loading:true};
    this.closeModal=this.closeModal.bind(this);

  }

  closeModal(){
    console.log('closeModal');
    this.setState({loading:false});
    console.log('loading: ' + this.state.loading);
  }

  render() {

    return(        
        <FirebaseAuthConsumer>
          {({isSignedIn, user, providerId})=>

            isSignedIn === true ?
            
            <div class="bg-dark">
                  <Switch >
                    <Route exact path="/" component={Order}/>
                    <Route exact path="/Order" component={Order}/>
                    <Route exact path="/Products" component={Products}/>
                    <Route exact path="/AddProduct" component={AddProduct}/>
                    <Route exact path="/geography" component={Geography}/>
                    <Route component={NoPage}/>
                  </Switch>
                  
                  <Navigation />
                </div>
                :  <Fragment><Login /><Switch><Route exact path="/Login" component={Login} /><Route component={NoPage} /></Switch></Fragment>
            
          }
        </FirebaseAuthConsumer>
    );
  }
}

export default App;

`IfFirebaseUnAuthed` causes React: Unknown Prop Warning

First, great repo. Works really well and so easy to get started. Thanks!

I've tried to use IfFirebaseUnAuthed and react throws a number of warnings about unknown props. Specifically about providerId and isSignedIn. I'm not familiar enough with the library to understand what's happening and submit a fix but hoping it can be resolved fairly easily.

See the console output of https://codesandbox.io/s/firebase-auth-example-jf4n9 for a minimal demo, forked from the demo provided.

Will update with more info, if and when I have it.

Missing information from quickstart

Using the quickstart here: https://react-firebase-js.com/docs/react-firestore-database/getting-started#firestore-provider

It suggests to use the following code:

  return (
    <FirestoreProvider {...config} firebase={firebase}>
      <div>This is my app</div>
    </FirestoreProvider>
  );

I assume 'firebase' is the same that is left over from the auth example since it's not mentioned in that section at all.

I used import firebase from "firebase/app"; from the last example but when I run it it returns:

caught TypeError: props.firebase.firestore is not a function

Does anyone know how to get through this quickstart to get something woking?

FirestoreDocument within a FirestoreCollection

Thanks for creating this library. Great job!

I have a unique case where I am attempting to render FirestoreDocument with a dynamic path. For example:

                      <FirestoreCollection path={parentPath} >
                        {items => {
                          return items.value ? (
                            <FlatList
                              data={items.value}
                              renderItem={({ item }) => (     
                                //item.ref is a Firestore reference type
                                <FirestoreDocument path={item.ref.path}>
                                  {match => {
                                    return match.value ? (
                                      <Text>Never rendered</Text>
                                    ) : (
                                      <Text> Loading.....forever</Text>
                                    );
                                  }}
                                </FirestoreDocument>
                              )}
                            />
                          ) : (
                               <Text> Loading...</Text>
                          );
                        }}
                      </FirestoreCollection>

match.value is always null.

Thanks!

Provide Document id when fetching a firestore collection

Hey @rakannimer , I was trying out your lib to quickly build a Firebase project because I probably won't need any fancy feature for quite a while but got 'stuck' on what I see as a pretty basic use case.
I am querying a firestore collection and I want to update a document in that collection but I don't have the id...
It should be pretty easy to set a key for the metadata in each document of the array returned, something like _metadata or _documentMetadata or whatever.
I tried to make sense of the code but I have never used typescript and I am missing a few pointers to figure this out quickly enough.
Happy holidays :)

rakannimer / react-firebase Goto Github PK

react-firebase's Introduction

React Firebase

Modules

Sandboxes

Auth

Anonymous/Google Auth

Realtime Database

Infinite List

Mutation

Transaction

Auth & Database Bookmarking App Example

Server Rendered Firebase Data with NextJS Auth & Database with queries