Version info
React: 17.0.1
Firebase: 9.6.1
ReactFire: 4.2.1
Steps to reproduce
use useSigninCheck with validateCustomClaims at some point in the component tree and then try to use it again later on with different custom claims
Expected behavior
I should be able to pass different custom claims during different calls to show/hide different parts of the UI. validateCustomClaims should run every time I use it and return the appropriate result. For example, if I want to show some components to "admin" users and some other components to "superadmin" users.
Actual behavior
validateCustomClaims only runs the first time you call it and on subsequent calls just returns the same hasRequiredClaims result from the initial run. This seems to be a major security flaw especially if you aren't aware that it's doing this.
Test case
The sandbox below calls validateCustomClaims in the <App /> component and returns a hardcoded true result... Later in the <ComponentForSuperadminOnly /> it tries to validate that the user has superadmin claim and returns true even though it does not have the claim. Additionally, the validateCustomClaims function is not even run in this call as there is no console.log for it.
If you switch the validateCustomClaims check in the <App /> component to use the requiredClaims method then the custom validator does run in the <ComponentForSuperadminOnly /> component.
Lastly, using the requiredClaims property method to check for superadmin instead of a custom validator returns the appropriate result no matter where it is used. I would assume both methods should always return an accurate result no matter where they are used in the tree.
https://codesandbox.io/s/usesignincheckissue-xqwm4u?file=/src/App.js
Version info
React: 17.0.1
Firebase: 9.6.1
ReactFire: 4.2.1
Steps to reproduce
use
useSigninCheckwithvalidateCustomClaimsat some point in the component tree and then try to use it again later on with different custom claimsExpected behavior
I should be able to pass different custom claims during different calls to show/hide different parts of the UI.
validateCustomClaimsshould run every time I use it and return the appropriate result. For example, if I want to show some components to "admin" users and some other components to "superadmin" users.Actual behavior
validateCustomClaimsonly runs the first time you call it and on subsequent calls just returns the samehasRequiredClaimsresult from the initial run. This seems to be a major security flaw especially if you aren't aware that it's doing this.Test case
The sandbox below calls
validateCustomClaimsin the<App />component and returns a hardcodedtrueresult... Later in the<ComponentForSuperadminOnly />it tries to validate that the user hassuperadminclaim and returnstrueeven though it does not have the claim. Additionally, thevalidateCustomClaimsfunction is not even run in this call as there is noconsole.logfor it.If you switch the
validateCustomClaimscheck in the<App />component to use therequiredClaimsmethod then the custom validator does run in the<ComponentForSuperadminOnly />component.Lastly, using the
requiredClaimsproperty method to check forsuperadmininstead of a custom validator returns the appropriate result no matter where it is used. I would assume both methods should always return an accurate result no matter where they are used in the tree.https://codesandbox.io/s/usesignincheckissue-xqwm4u?file=/src/App.js