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
> noplus-web@0.1.0 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
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