|
5 | 5 | - [Setup](#setup)
|
6 | 6 | * [Initialize product SDKs and register them with ReactFire](#initialize-product-sdks-and-register-them-with-reactfire)
|
7 | 7 | * [Connect to the Firebase Local Emulator Suite](#connect-to-the-firebase-local-emulator-suite)
|
| 8 | + * [Set up App Check](#set-up-app-check) |
8 | 9 | - [Auth](#auth)
|
9 | 10 | * [Display the current signed-in user](#display-the-current-signed-in-user)
|
10 | 11 | * [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 }) {
|
119 | 120 |
|
120 | 121 | Learn more about the Local Emulator Suite in the [Firebase docs](https://firebase.google.com/docs/emulator-suite/connect_and_prototype).
|
121 | 122 |
|
| 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 | + |
122 | 156 | ## Auth
|
123 | 157 |
|
124 | 158 | The following samples assume that `FirebaseAppProvider` and `AuthProvider` components exist higher up the component tree.
|
|
0 commit comments