react-firestore | React components to fetch data | Frontend Utils library

Following this react-firestore-tutorial and the GitHub code. I wonder if the following is correct way to use the onAuthStateChanged or if I have understod this incorrect I'm just confused if this is the right way.

CodeSandBox fully connect with a test-account with apikey to Firebase!! so you can try it what I mean and I can learn this.

(NOTE: Firebase is blocking Codesandbox url even it's in Authorised domains, sorry about that but you can still see the code)

t {code: "auth/too-many-requests", message: "We have blocked all requests from this device due to unusual activity. Try again later.", a: null}a:

Note this is a Reactjs-Vanilla fully fledge advanced website using only;
React 16.6
React Router 5
Firebase 7

Here in the code the Firebase.js have this onAuthStateChanged and its called from two different components and also multiple times and what I understand one should only set it up once and then listen for it's callback. Calling it multiple times will that not create many listeners?

Can someone have a look at this code is this normal in Reactjs to handle onAuthStateChanged? (src\components\Firebase\firebase.js)

I am trying to add a time stamp to my firebase form data in my react app.

The app uses react context api to wrap the app in a FirebaseContext.Provider as follows:

I am trying to figure out how to get a user name which is an attribute stored in a user collection, which has been merged with the attributes created by the firebase authentication model.

I can access authUser - which gives me the limited fields firebase collects in the authentication tool, and then I'm trying to get from there to the related user collection (which uses the same uid).

I have a react context consumer with:

I'm trying to figure out how to query a record in firestore using an authUser uid as the document id.

I have seen this post and am trying to implement the logic by updating the state of the user so that the componentDidMount function can find a document in the users collection in firestore, where that document has an id which is the same as the authUser.uid in the Authentication collection.

I have an authListener with:

I am trying to figure out how to get data out of my cloud firestore.

I have given up trying to figure out how to do it with react-firestore-hooks and am just trying to get to the same place as I was able to get to before starting with hooks.

In my old componentDidMount I was able to use this: