FIREBASE_AUTHCHECK_DEBUG ReferenceError: self is not defined

Question

Im Running into an Error implementing Firebase Appcheck Next.js Typescript

firebase.ts

const fbapp = initializeApp(firebaseConfig);



if (process.env.NODE_ENV === "development") {
  // @ts-ignore
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

initializeAppCheck(fbapp, {
  provider: new ReCaptchaV3Provider(
    process.env.NEXT_PUBLIC_GOOGLE_RECAPCHA_PUBLIC_KEY as string
  ),
  isTokenAutoRefreshEnabled: true
})

Eventhough Firebase aknowledges the existence of FIREBASE_APPCHECK_DEBUG_TOKEN = true and logs a Token for me to pass to console.firebase.. im getting ⨯ ReferenceError: self is not defined

bash logs

jackr@Jacks-PC MINGW64 /d/dev/NoPlus-web/noplus-web (web-dev)
$ npm run dev:next

> [email protected] dev:next
> next dev

   ▲ Next.js 14.1.4
   - Local:        http://localhost:3000
   - Environments: .env

 ✓ Ready in 7.9s
 ○ Compiling / ...
 ⨯ Failed to find font override values for font `Bungee Spice`
 ⨯ Failed to find font override values for font `Bungee Spice`
 ✓ Compiled / in 22.2s (4020 modules)
 ⨯ src\components\firebase.ts (22:2) @ self
 ⨯ ReferenceError: self is not defined
    at eval (./src/components/firebase.ts:27:5)
    at (ssr)/./src/components/firebase.ts (D:\dev\NoPlus-web\noplus-web\.next\server\app\page.js:557:1)
    at __webpack_require__ (D:\dev\NoPlus-web\noplus-web\.next\server\webpack-runtime.js:33:43)
    at eval (./src/components/presets/functions/welcomeUser.tsx:6:67)
    at (ssr)/./src/components/presets/functions/welcomeUser.tsx (D:\dev\NoPlus-web\noplus-web\.next\server\app\page.js:667:1)
    at __webpack_require__ (D:\dev\NoPlus-web\noplus-web\.next\server\webpack-runtime.js:33:43)
    at eval (./src/app/page.tsx:12:84)
    at (ssr)/./src/app/page.tsx (D:\dev\NoPlus-web\noplus-web\.next\server\app\page.js:440:1)
    at __webpack_require__ (D:\dev\NoPlus-web\noplus-web\.next\server\webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)
  20 | if (process.env.NODE_ENV === "development") {
  21 |   // @ts-ignore
> 22 |   self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
     |  ^
  23 | }
  24 |
  25 | initializeAppCheck(fbapp, {
 ✓ Compiled in 2.5s (1850 modules)
 ✓ Compiled in 552ms (1836 modules)

Im having issues Posting the issue so please read the rest on github text

Answer 1

try this

const fbapp = initializeApp(firebaseConfig);

if (process.env.NODE_ENV === "development") {
  // @ts-ignore
  globalThis.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

initializeAppCheck(fbapp, {
  provider: new ReCaptchaV3Provider(
    process.env.NEXT_PUBLIC_GOOGLE_RECAPCHA_PUBLIC_KEY as string
  ),
  isTokenAutoRefreshEnabled: true
})

you might want to see what-is-globalthis-in-javascript-what-will-be-the-ideal-use-case-for-this