1

When using Firebase App check, one needs to use a special secret key when in development, as reCAPTCHA only works on the app's actual domain (see this). Using create-react-app I'm not sure about where to hide this key so that it is completely invisible in production but available to the code in development. Also, I want this to be as automatic as can be.

BERENGENITA
  • 37
  • 3
  • The secret key goes on the Google side, project settings, reCAPTCHA secret key. Your app carries the public key, no need to hide it. – Jorge Garcia Mar 03 '22 at 03:57

1 Answers1

1

As I'm reading the question I'm assuming that you have already done the setup of the project.

  • What you need to do now is to get your key from the dev tools console its described how in the Firebase docs here. After that you go to:

  • Firebase console -> App Check -> Apps -> Three dots -> Manage debug tokens -> Add debug token

  • After adding it I've added it to my code but with check if the env is prod or dev

  • Instead of hardcoding it directly you can add it to your .env file

      if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
    window.FIREBASE_APPCHECK_DEBUG_TOKEN = 'your_debug_token';
  }
  • For more details of the whole setup you can check this answer
Georgi K.
  • 31
  • 3