| 
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