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!

document does not exist when running your script in node. — connexo
– connexo, Commented Dec 28, 2021 at 18:36
The ReCaptchaV3Provider seems to be dependent on the document object, wich is not available outside of the browser — Jorge Garcia
– Jorge Garcia, Commented Mar 3, 2022 at 3:33

ykorach · Accepted Answer · 2022-08-07 08:57:19Z

2

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

.....

answered Aug 7, 2022 at 8:57

ykorach

6167 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Wallman Over a year ago

Thanks! Although I had to add a // @ts-ignore before the appCheckRef.current = appCheck part.

Collectives™ on Stack Overflow

ReferenceError: document is not defined - Firebase appcheck with react

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related