ReferenceError: document is not defined - Firebase appcheck with react

Question

I am trying to integrate appcheck into my firebase react, I use typescript web version 9. I added the code below to my functions/src/index.ts

My Code for the appcheck integration:

const { initializeAppCheck, ReCaptchaV3Provider } = require("firebase/app-check");

const firebaseConfig = { .. app info..};
const app = initializeApp(firebaseConfig);

const appCheck = initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider(' myKeyString '),
  
    // Optional argument. If true, the SDK automatically refreshes App Check
    // tokens as needed.
    isTokenAutoRefreshEnabled: true
  });

Full Error Description: Error: Error occurred while parsing your function triggers.

ReferenceError: document is not defined at makeDiv (.../functions/node_modules/@firebase/app-check/dist/index.cjs.js:1150:24) at initializeV3 (.../functions/node_modules/@firebase/app-check/dist/index.cjs.js:1095:17) at ReCaptchaV3Provider.initialize (.../functions/node_modules/@firebase/app-check/dist/index.cjs.js:1295:9) at _activate (.../functions/node_modules/@firebase/app-check/dist/index.cjs.js:1599:23) at initializeAppCheck (.../functions/node_modules/@firebase/app-check/dist/index.cjs.js:1555:5) at Object. (.../functions/lib/index.js:25:18) at Module._compile (node:internal/modules/cjs/loader:1095:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10) at Module.load (node:internal/modules/cjs/loader:975:32) at Function.Module._load (node:internal/modules/cjs/loader:816:12)

• without the initializeAppCheck part my functions deploy fine and everything works.

Please help. Thank you!

Answer 1

I also faced the same issue, and the solution that worked for me was to create a custom hook, by exporting the app-check as a react reference. then using it elsewhere (make sure to init the )

import React, { useEffect, createRef } from "react";
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";
import { app } from "@lib/firebase/firebase"; // our already initialized firebse-app

export const appCheckRef = createRef();
const useAppCheck = () => {
    useEffect(() => {
        if (appCheckRef.current) {
            return;
        }
        const appCheck = initializeAppCheck(app, {
            provider: new ReCaptchaEnterpriseProvider(process.env.NEXT_PUBLIC_RECAPTCHA_KEY_ID/* reCAPTCHA Enterprise site key */),
            isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
        });
        appCheckRef.current = appCheck;
    }, []);
}
export default useAppCheck;

make sure to use this hook on your app init.

  useAppCheck();

you can now use the reference in other places (make sure to use them only after the initialization):

import { appCheckRef } from "@lib/firebase/useAppCheck";
import { getToken } from "firebase/app-check"


export const apiRequest = async (options:AxiosRequestConfig) => {
...
    let appCheckTokenResponse = await
        getToken(appCheckRef.current,/* forceRefresh= */ false);


    const headers = {
        "X-Firebase-AppCheck": appCheckTokenResponse.token,...moreHeaders

.....