reactfire | Hooks , Context Providers , and Components | Authentication library

I have an "Uncaught FirebaseError: Missing or insufficient permissions." error when I sign into my app. The problem occurs on the redirection immediately after login. I currently have no error boundaries so a blank white screen with this error message appears in the web console.

I use the reactfire library.

Here some code:

My entry point: (index.tsx)

I have set up firestore locally following the firebase docs and I can test firebase functions easily. I would love to develop locally with an local firestore database. In the docs they provide the following code:

I have a few general questions I would like to get an answer… I did my own research in:

• the firebase documentation with little success when it comes to setup the firebase, redux, react state.

• I am aware of the two part video series of React and firebase setup in the firebase youtube channel but nothing about integrating redux to that ecosystem.

• This youtube videos a close to or over two years old and I don’t know if they still apply (https://www.youtube.com/watch?v=p4XTMvagQ2Q).

• I have found a few tutorials relating this type of setup, but to me they seem quite opinionated and I do not know if these setup are optimal or have anti-patterns (https://www.youtube.com/playlist?list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3, https://github.com/tiberiuc/redux-react-firebase --straight from redux documentation in the resources section, I may be wrong but it doesn’t seem like it is being maintained, others: https://github.com/prescottprue/react-redux-firebase, ).

• I tried reaching out to the #react , #redux, #react-design channels in the slack firebase community but I do not believe these channels are being used. I am a beginner when it comes to firebase and I need some pointers now that I am trying to get familiar with this new database… My questions are:

• is this repo recommended to implement firebase with redux and react? https://github.com/FirebaseExtended/reactfire#using-the-firebase-js-sdk-in-react

• should I follow the implementation of firebase API methods just like the video of react & firebase? meaning, call every method that I need on the component’s lifecycle, let’s say:

Based on the documentation for ReactFire, the way to use it is by adding a mixin to the component.

Mixins are not the way to go, HoC or Decorators should be used instead

So I wanted to create a Decorators, although the only way I found to use mixins is through React.creatClass(), which is deprecated and not even available in the latest React version.

How can I use a mixin with the latest version (v16.0)?

Or is there another way to use the library?

I'm trying to follow this tutorial: http://www.automationfuel.com/firebase-facebook-login-react/

but, i think some parts are missing and i'm not able to figure out exactly what to change in order to get the demo running. This is what i have at the moment: