Skip to content

Commit 6fa717e

Browse files
authored
add App Check (#430)
1 parent 14d368b commit 6fa717e

File tree

4 files changed

+140
-22
lines changed

4 files changed

+140
-22
lines changed

docs/reference/modules/index.md

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/reference/modules/sdk.md

Lines changed: 79 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/use.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
- [Setup](#setup)
66
* [Initialize product SDKs and register them with ReactFire](#initialize-product-sdks-and-register-them-with-reactfire)
77
* [Connect to the Firebase Local Emulator Suite](#connect-to-the-firebase-local-emulator-suite)
8+
* [Set up App Check](#set-up-app-check)
89
- [Auth](#auth)
910
* [Display the current signed-in user](#display-the-current-signed-in-user)
1011
* [Only render a component if a user is signed in](#only-render-a-component-if-a-user-is-signed-in)
@@ -119,6 +120,39 @@ function FirebaseComponents({ children }) {
119120

120121
Learn more about the Local Emulator Suite in the [Firebase docs](https://firebase.google.com/docs/emulator-suite/connect_and_prototype).
121122

123+
### Set up App Check
124+
125+
[App Check](https://firebase.google.com/docs/app-check) helps protect your backend resources from abuse, such as billing fraud and phishing.
126+
127+
```jsx
128+
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
129+
import { useFirebaseApp, AppCheckProvider } from 'reactfire';
130+
131+
// Create your reCAPTCHA v3 site key in the
132+
// "Project Settings > App Check" section of the Firebase console
133+
const APP_CHECK_TOKEN = 'abcdefghijklmnopqrstuvwxy-1234567890abcd';
134+
135+
function FirebaseComponents({ children }) {
136+
const app = useFirebaseApp(); // a parent component contains a `FirebaseAppProvider`
137+
138+
const appCheck = initializeAppCheck(app, {
139+
provider: new ReCaptchaV3Provider(APP_CHECK_TOKEN),
140+
isTokenAutoRefreshEnabled: true
141+
});
142+
143+
// Activate App Check at the top level before any component talks to an App-Check-compatible Firebase service
144+
return (
145+
<AppCheckProvider sdk={appCheck}>
146+
<DatabaseProvider sdk={database}>
147+
<MyCoolApp/>
148+
</DatabaseProvider>
149+
</AppCheckProvider>
150+
);
151+
}
152+
```
153+
154+
See the [App Check setup guide in the Firebase docs](https://firebase.google.com/docs/app-check/web/recaptcha-provider#project-setup) for more detailed instructions.
155+
122156
## Auth
123157

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

0 commit comments

Comments
 (0)