react-firebase-hooks | React Hooks for Firebase | Authentication library

create a utility folder and export your necessary firebase components to be imported throughout your app like so:

it is also possible the config you are passing to the app is incorrect

Should be the error from eslint.

Adding eslintConfig to package.json may solve your problem. The below setting is the default eslintConfig from create-react-app

I've tried your Security Rules in one of my test environment and I can confirm that the if verifyOrganizationClaim(orgId); statement does work (together with the two functions).

So I can see three possible reasons why it does not work on your side:

1. Your user is not authenticated
2. You incorrectly assigned the Custom Claim to the user. You can check the custom claims with the following CLI command: $ firebase auth:export users.csv
3. You try to create a document, instead of updating or reading it. As a matter of fact your rules only set access rights for updating or reading. (I'm not verse in React and I cannot deduce from the code in your question which operation you execute...)

There are two ways to handle this in my opinion:

1. Update the ProgramContext to make sure that the user is logged in
2. Wrap the App or any other entry point from whence you need to make sure that the user is logged in, in a separate UserContextProvider

Let's talk about the latter method, where we can wrap in a separate context called UserContext. Firebase provides us a listener called onAuthStateChanged, which we can make use of in our context, like so:

You're mixing up two different databases here:

• The import { useList } from "react-firebase-hooks/database" and other code are for the Realtime Database.
• The timestamp: firebase.firestore.FieldValue.serverTimestamp() is for Cloud Firestore

While both databases are part of Firebase, they are completely separate and each has their own API.

To write a server-side timestamp to Realtime Database, use:

The reason you are not getting the value on state because when the useState is initialized, user doesn't has a value, it's still loading. Since state is initialized only once, when the data from firebase loads, state doesn't changes.
You need to use a useEffect hook to watch for change in user, and setUsername then.

instead of using get you can use onSnapshot

you will need to do that within a effect, so that you can unsubscribe from it.

I think you need to add composite index:

If you use another file for the mock, you should be golden to change the implementation and still preserve the TypeScript Intellisense.