FirebaseExtended / reactfire

Hooks, Context Providers, and Components that make it easy to interact with Firebase.
https://firebaseopensource.com/projects/firebaseextended/reactfire/
MIT License
3.52k stars 401 forks source link

add App Check #430

Closed jhuleatt closed 3 years ago

jhuleatt commented 3 years ago

Description

Add support for App Check.

fixes #406

Code sample

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>
  );
}
jhuleatt commented 3 years ago

cc @sujishpatel

jhuleatt commented 3 years ago

I think adding in the 'useInitAppCheck' might be worthwhile here for api consistency and concurrent mode purposes.

export const useInitAppCheck: InitSdkHook<AppCheck> = (initializer, options) => useInitSdk<AppCheck>('appcheck', AppCheckSdkContext, initializer, options);

Definitely, I've added that, thanks!