add App Check

docs/use.md

@@ -5,6 +5,7 @@
 - [Setup](#setup)
   * [Initialize product SDKs and register them with ReactFire](#initialize-product-sdks-and-register-them-with-reactfire)
   * [Connect to the Firebase Local Emulator Suite](#connect-to-the-firebase-local-emulator-suite)
+  * [Set up App Check](#set-up-app-check)
 - [Auth](#auth)
   * [Display the current signed-in user](#display-the-current-signed-in-user)
   * [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 }) {
 
 Learn more about the Local Emulator Suite in the [Firebase docs](https://firebase.google.com/docs/emulator-suite/connect_and_prototype).
 
+### Set up App Check
+
+[App Check](https://firebase.google.com/docs/app-check) helps protect your backend resources from abuse, such as billing fraud and phishing.
+
+```jsx
+import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
+import { useFirebaseApp, AppCheckProvider } from 'reactfire';
+
+// Create your reCAPTCHA v3 site key in the 
+// "Project Settings > App Check" section of the Firebase console
+const APP_CHECK_TOKEN = 'abcdefghijklmnopqrstuvwxy-1234567890abcd';
+
+function FirebaseComponents({ children }) {
+  const app = useFirebaseApp(); // a parent component contains a `FirebaseAppProvider`
+
+  const appCheck = initializeAppCheck(app, {
+    provider: new ReCaptchaV3Provider(APP_CHECK_TOKEN),
+    isTokenAutoRefreshEnabled: true
+  });
+
+  // Activate App Check at the top level before any component talks to an App-Check-compatible Firebase service
+  return (
+    <AppCheckProvider>
+      <DatabaseProvider sdk={database}>
+        <MyCoolApp/>
+      </DatabaseProvider>
+    </AppCheckProvider>
+  );
+}
+```
+
+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.
+
 ## Auth
 
 The following samples assume that `FirebaseAppProvider` and `AuthProvider` components exist higher up the component tree.

src/sdk.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import type { AppCheck } from 'firebase/app-check';
 import type { Auth } from 'firebase/auth';
 import type { Analytics } from 'firebase/analytics';
 import type { Database } from 'firebase/database';
@@ -13,6 +14,7 @@ import { ObservableStatus, useObservable } from './useObservable';
 import { from } from 'rxjs';
 import { ReactFireOptions } from '.';
 
+const AppCheckSdkContext = React.createContext<AppCheck | undefined>(undefined);
 const AuthSdkContext = React.createContext<Auth | undefined>(undefined);
 const AnalyticsSdkContext = React.createContext<Analytics | undefined>(undefined);
 const DatabaseSdkContext = React.createContext<Database | undefined>(undefined);
@@ -21,7 +23,7 @@ const StorageSdkContext = React.createContext<FirebaseStorage | undefined>(undef
 const PerformanceSdkContext = React.createContext<FirebasePerformance | undefined>(undefined);
 const RemoteConfigSdkContext = React.createContext<RemoteConfig | undefined>(undefined);
 
-type FirebaseSdks = Auth | Analytics | Database | Firestore | FirebasePerformance | FirebaseStorage | RemoteConfig;
+type FirebaseSdks = Analytics | AppCheck | Auth | Database | Firestore | FirebasePerformance | FirebaseStorage | RemoteConfig;
 
 function getSdkProvider<Sdk extends FirebaseSdks>(SdkContext: React.Context<Sdk | undefined>) {
   return function SdkProvider(props: React.PropsWithChildren<{ sdk: Sdk }>) {
@@ -81,6 +83,7 @@ function useInitSdk<Sdk extends FirebaseSdks>(
   return useObservable<Sdk>(`firebase-sdk:${sdkName}:${firebaseApp.name}`, from(initializeSdk), options);
 }
 
+export const AppCheckProvider = getSdkProvider<AppCheck>(AppCheckSdkContext);
 export const AuthProvider = getSdkProvider<Auth>(AuthSdkContext);
 export const AnalyticsProvider = getSdkProvider<Analytics>(AnalyticsSdkContext);
 export const DatabaseProvider = getSdkProvider<Database>(DatabaseSdkContext);
@@ -89,6 +92,7 @@ export const PerformanceProvider = getSdkProvider<FirebasePerformance>(Performan
 export const StorageProvider = getSdkProvider<FirebaseStorage>(StorageSdkContext);
 export const RemoteConfigProvider = getSdkProvider<RemoteConfig>(RemoteConfigSdkContext);
 
+export const useAppCheck = () => useSdk<AppCheck>(AppCheckSdkContext);
 export const useAuth = () => useSdk<Auth>(AuthSdkContext);
 export const useAnalytics = () => useSdk<Analytics>(AnalyticsSdkContext);
 export const useDatabase = () => useSdk<Database>(DatabaseSdkContext);