Firebase AppCheck when working with Emulator on localhost

Question

How are developers working with Firebase App Check when developing locally using the emulator on localhost? Are you disabling App Check on localhost entirely? Or are you able to emulating App Check locally?

Firebase has some instructions on using App Check with a debug provider, but the use case for that seems to be when you want to debug locally but use GCP's backend services in the cloud. It doesn't look relevant for developing against the emulator.

Running this in the client fails recaptcha app attestation with a 403 response (PERMISSION_DENIED), presumably because localhost is not listed as an allowed domain:

  const appCheck = firebase.appCheck();
  appCheck.activate(
    process.env.REACT_APP_FIREBASE_APP_CHECK_SITE_KEY,
    true,
  );

When enforcing app check in callable functions, context.app is undefined when running in the emulator so requests will fail app check.

Disabling App Check locally is certainly an option, but was wondering if there was a way to emulate app check as well.

Answer 1

I've got it set up, but not without lots of trial and error.

Try adding this snippet right above your call to active appCheck. It seems it needs come before activating appCheck. I was getting that same error until I move the debug snippet before the active call. I am using web version 9 though... not sure if that makes a difference.

if (process.env.NODE_ENV !== 'production') {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

const appCheck = firebase.appCheck();
appCheck.activate(
  process.env.REACT_APP_FIREBASE_APP_CHECK_SITE_KEY,
  true,
);

This will print a token to the console which will need to be added to you Firebase project settings. Like described in the link you provided.

Did you do those 2 steps and still get the 403 response?