From 6fa717e8fb4fc7bdb6cda996ec8d67d7adbbf05f Mon Sep 17 00:00:00 2001 From: Jeff <3759507+jhuleatt@users.noreply.github.com> Date: Wed, 1 Sep 2021 17:11:24 -0400 Subject: [PATCH] add App Check (#430) --- docs/reference/modules/index.md | 21 +++++++ docs/reference/modules/sdk.md | 100 +++++++++++++++++++++++++------- docs/use.md | 34 +++++++++++ src/sdk.tsx | 7 ++- 4 files changed, 140 insertions(+), 22 deletions(-) diff --git a/docs/reference/modules/index.md b/docs/reference/modules/index.md index d525184a..ca382d4b 100644 --- a/docs/reference/modules/index.md +++ b/docs/reference/modules/index.md @@ -7,6 +7,7 @@ ### References - [AnalyticsProvider](index.md#analyticsprovider) +- [AppCheckProvider](index.md#appcheckprovider) - [AuthCheck](index.md#authcheck) - [AuthCheckProps](index.md#authcheckprops) - [AuthProvider](index.md#authprovider) @@ -32,6 +33,7 @@ - [preloadObservable](index.md#preloadobservable) - [preloadUser](index.md#preloaduser) - [useAnalytics](index.md#useanalytics) +- [useAppCheck](index.md#useappcheck) - [useAuth](index.md#useauth) - [useDatabase](index.md#usedatabase) - [useDatabaseList](index.md#usedatabaselist) @@ -48,6 +50,7 @@ - [useFirestoreDocOnce](index.md#usefirestoredoconce) - [useIdTokenResult](index.md#useidtokenresult) - [useInitAnalytics](index.md#useinitanalytics) +- [useInitAppCheck](index.md#useinitappcheck) - [useInitAuth](index.md#useinitauth) - [useInitDatabase](index.md#useinitdatabase) - [useInitFirestore](index.md#useinitfirestore) @@ -97,6 +100,12 @@ Re-exports: [AnalyticsProvider](sdk.md#analyticsprovider) ___ +### AppCheckProvider + +Re-exports: [AppCheckProvider](sdk.md#appcheckprovider) + +___ + ### AuthCheck Re-exports: [AuthCheck](auth.md#authcheck) @@ -247,6 +256,12 @@ Re-exports: [useAnalytics](sdk.md#useanalytics) ___ +### useAppCheck + +Re-exports: [useAppCheck](sdk.md#useappcheck) + +___ + ### useAuth Re-exports: [useAuth](sdk.md#useauth) @@ -343,6 +358,12 @@ Re-exports: [useInitAnalytics](sdk.md#useinitanalytics) ___ +### useInitAppCheck + +Re-exports: [useInitAppCheck](sdk.md#useinitappcheck) + +___ + ### useInitAuth Re-exports: [useInitAuth](sdk.md#useinitauth) diff --git a/docs/reference/modules/sdk.md b/docs/reference/modules/sdk.md index a183c159..2cdf487c 100644 --- a/docs/reference/modules/sdk.md +++ b/docs/reference/modules/sdk.md @@ -7,6 +7,7 @@ ### Functions - [AnalyticsProvider](sdk.md#analyticsprovider) +- [AppCheckProvider](sdk.md#appcheckprovider) - [AuthProvider](sdk.md#authprovider) - [DatabaseProvider](sdk.md#databaseprovider) - [FirestoreProvider](sdk.md#firestoreprovider) @@ -14,10 +15,12 @@ - [RemoteConfigProvider](sdk.md#remoteconfigprovider) - [StorageProvider](sdk.md#storageprovider) - [useAnalytics](sdk.md#useanalytics) +- [useAppCheck](sdk.md#useappcheck) - [useAuth](sdk.md#useauth) - [useDatabase](sdk.md#usedatabase) - [useFirestore](sdk.md#usefirestore) - [useInitAnalytics](sdk.md#useinitanalytics) +- [useInitAppCheck](sdk.md#useinitappcheck) - [useInitAuth](sdk.md#useinitauth) - [useInitDatabase](sdk.md#useinitdatabase) - [useInitFirestore](sdk.md#useinitfirestore) @@ -46,7 +49,27 @@ #### Defined in -[src/sdk.tsx:69](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L69) +[src/sdk.tsx:72](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L72) + +___ + +### AppCheckProvider + +▸ `Const` **AppCheckProvider**(`props`): `Element` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `props` | `PropsWithChildren`<`Object`\> | + +#### Returns + +`Element` + +#### Defined in + +[src/sdk.tsx:70](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L70) ___ @@ -66,7 +89,7 @@ ___ #### Defined in -[src/sdk.tsx:68](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L68) +[src/sdk.tsx:71](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L71) ___ @@ -86,7 +109,7 @@ ___ #### Defined in -[src/sdk.tsx:70](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L70) +[src/sdk.tsx:73](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L73) ___ @@ -106,7 +129,7 @@ ___ #### Defined in -[src/sdk.tsx:71](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L71) +[src/sdk.tsx:74](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L74) ___ @@ -126,7 +149,7 @@ ___ #### Defined in -[src/sdk.tsx:72](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L72) +[src/sdk.tsx:75](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L75) ___ @@ -146,7 +169,7 @@ ___ #### Defined in -[src/sdk.tsx:74](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L74) +[src/sdk.tsx:77](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L77) ___ @@ -166,7 +189,7 @@ ___ #### Defined in -[src/sdk.tsx:73](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L73) +[src/sdk.tsx:76](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L76) ___ @@ -180,7 +203,21 @@ ___ #### Defined in -[src/sdk.tsx:77](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L77) +[src/sdk.tsx:81](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L81) + +___ + +### useAppCheck + +▸ `Const` **useAppCheck**(): `AppCheck` + +#### Returns + +`AppCheck` + +#### Defined in + +[src/sdk.tsx:79](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L79) ___ @@ -194,7 +231,7 @@ ___ #### Defined in -[src/sdk.tsx:76](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L76) +[src/sdk.tsx:80](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L80) ___ @@ -208,7 +245,7 @@ ___ #### Defined in -[src/sdk.tsx:78](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L78) +[src/sdk.tsx:82](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L82) ___ @@ -222,7 +259,7 @@ ___ #### Defined in -[src/sdk.tsx:79](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L79) +[src/sdk.tsx:83](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L83) ___ @@ -243,7 +280,28 @@ ___ #### Defined in -[src/sdk.tsx:90](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L90) +[src/sdk.tsx:95](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L95) + +___ + +### useInitAppCheck + +▸ `Const` **useInitAppCheck**(`initializer`, `options?`): [`ObservableStatus`](../interfaces/useObservable.ObservableStatus.md)<`AppCheck`\> + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `initializer` | (`firebaseApp`: `FirebaseApp`) => `Promise`<`AppCheck`\> | +| `options?` | [`ReactFireOptions`](../interfaces/index.ReactFireOptions.md)<`AppCheck`\> | + +#### Returns + +[`ObservableStatus`](../interfaces/useObservable.ObservableStatus.md)<`AppCheck`\> + +#### Defined in + +[src/sdk.tsx:93](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L93) ___ @@ -264,7 +322,7 @@ ___ #### Defined in -[src/sdk.tsx:89](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L89) +[src/sdk.tsx:94](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L94) ___ @@ -285,7 +343,7 @@ ___ #### Defined in -[src/sdk.tsx:91](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L91) +[src/sdk.tsx:96](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L96) ___ @@ -306,7 +364,7 @@ ___ #### Defined in -[src/sdk.tsx:92](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L92) +[src/sdk.tsx:97](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L97) ___ @@ -327,7 +385,7 @@ ___ #### Defined in -[src/sdk.tsx:93](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L93) +[src/sdk.tsx:98](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L98) ___ @@ -348,7 +406,7 @@ ___ #### Defined in -[src/sdk.tsx:95](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L95) +[src/sdk.tsx:100](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L100) ___ @@ -369,7 +427,7 @@ ___ #### Defined in -[src/sdk.tsx:97](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L97) +[src/sdk.tsx:102](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L102) ___ @@ -383,7 +441,7 @@ ___ #### Defined in -[src/sdk.tsx:80](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L80) +[src/sdk.tsx:84](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L84) ___ @@ -397,7 +455,7 @@ ___ #### Defined in -[src/sdk.tsx:82](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L82) +[src/sdk.tsx:86](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L86) ___ @@ -411,4 +469,4 @@ ___ #### Defined in -[src/sdk.tsx:81](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L81) +[src/sdk.tsx:85](https://github.com/FirebaseExtended/reactfire/blob/main/src/sdk.tsx#L85) diff --git a/docs/use.md b/docs/use.md index 9bad9af4..a30823fa 100644 --- a/docs/use.md +++ b/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 ( + + + + + + ); +} +``` + +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. diff --git a/src/sdk.tsx b/src/sdk.tsx index 145f5fd3..9e21826b 100644 --- a/src/sdk.tsx +++ b/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(undefined); const AuthSdkContext = React.createContext(undefined); const AnalyticsSdkContext = React.createContext(undefined); const DatabaseSdkContext = React.createContext(undefined); @@ -21,7 +23,7 @@ const StorageSdkContext = React.createContext(undef const PerformanceSdkContext = React.createContext(undefined); const RemoteConfigSdkContext = React.createContext(undefined); -type FirebaseSdks = Auth | Analytics | Database | Firestore | FirebasePerformance | FirebaseStorage | RemoteConfig; +type FirebaseSdks = Analytics | AppCheck | Auth | Database | Firestore | FirebasePerformance | FirebaseStorage | RemoteConfig; function getSdkProvider(SdkContext: React.Context) { return function SdkProvider(props: React.PropsWithChildren<{ sdk: Sdk }>) { @@ -65,6 +67,7 @@ function useInitSdk( return useObservable(`firebase-sdk:${sdkName}:${firebaseApp.name}`, from(initializeSdk), options); } +export const AppCheckProvider = getSdkProvider(AppCheckSdkContext); export const AuthProvider = getSdkProvider(AuthSdkContext); export const AnalyticsProvider = getSdkProvider(AnalyticsSdkContext); export const DatabaseProvider = getSdkProvider(DatabaseSdkContext); @@ -73,6 +76,7 @@ export const PerformanceProvider = getSdkProvider(Performan export const StorageProvider = getSdkProvider(StorageSdkContext); export const RemoteConfigProvider = getSdkProvider(RemoteConfigSdkContext); +export const useAppCheck = () => useSdk(AppCheckSdkContext); export const useAuth = () => useSdk(AuthSdkContext); export const useAnalytics = () => useSdk(AnalyticsSdkContext); export const useDatabase = () => useSdk(DatabaseSdkContext); @@ -86,6 +90,7 @@ type InitSdkHook = ( options?: ReactFireOptions ) => ObservableStatus; +export const useInitAppCheck: InitSdkHook = (initializer, options) => useInitSdk('appcheck', AppCheckSdkContext, initializer, options); export const useInitAuth: InitSdkHook = (initializer, options) => useInitSdk('auth', AuthSdkContext, initializer, options); export const useInitAnalytics: InitSdkHook = (initializer, options) => useInitSdk('analytics', AnalyticsSdkContext, initializer, options); export const useInitDatabase: InitSdkHook = (initializer, options) => useInitSdk('database', DatabaseSdkContext, initializer, options);