Skip to content

Commit 2c24d23

Browse files
committed
clarify useSignInCheck claims check function
1 parent da4e7f6 commit 2c24d23

1 file changed

Lines changed: 20 additions & 1 deletion

File tree

docs/use.md

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ function HomePage(props) {
141141

142142
### Only render a component if a user is signed in
143143

144-
The `useSigninCheck` hook makes it easy to decide whether to hide or show UI elements based on a user's auth state, and can even check their [custom claims](https://firebase.google.com/docs/auth/admin/custom-claims). It will render its children if a user is signed in, but if they are not signed in, it renders its `fallback` prop:
144+
The `useSigninCheck` hook makes it easy to decide whether to hide or show UI elements based on a user's auth state:
145145

146146
```jsx
147147
function UserFavorites() {
@@ -159,6 +159,25 @@ function UserFavorites() {
159159
}
160160
```
161161

162+
To check [custom claims](https://firebase.google.com/docs/auth/admin/custom-claims), pass in a `requiredClaims` object or a `validateCustomClaims` function.
163+
164+
```jsx
165+
// pass in an object describing the custom claims a user must have
166+
const { status, data: signInCheckResult } = useSignInCheck({ requiredClaims: { superUser: true } });
167+
168+
// OR
169+
170+
// pass in a custom claims validator function
171+
const { status, data: signInCheckResult } = useSignInCheck({
172+
validateCustomClaims: (userClaims) => {
173+
// custom validation logic...
174+
return {
175+
hasRequiredClaims: !!userClaims.superUser,
176+
};
177+
},
178+
});
179+
```
180+
162181
## Cloud Firestore
163182

164183
The following samples assume that `FirebaseAppProvider` and `FirestoreProvider` components exist higher up the component tree.

0 commit comments

Comments
 (0)