FIREBASE_AUTHCHECK_DEBUG: Error - 'self' is undefined in the debug reference

I'm encountering an issue while trying to implement Firebase Appcheck in my Next.js Typescript project.

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
})

Although Firebase recognizes the presence of 

FIREBASE_APPCHECK_DEBUG_TOKEN = true
and logs a token for me to pass to console.firebase, I am receiving the error message 
⨯ 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)

I am facing difficulties posting the issue here, so please refer to the full details on GitHub: link to Github Issue

typescriptfirebasenext.jsfirebase-app-check

Answer №1

give this a try

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 may find it helpful to check out what-is-globalthis-in-javascript-what-will-be-the-ideal-use-case-for-this

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing TypeScript to Define Object Properties with String Keys and Values within Parentheses

I am in the process of developing a telegram bot I have the need to save all my messages as constants My message schema is structured as follows: type MessagesSchema = { [K in keyof typeof MessagesEnum]: string } Here is an example implementatio ...

javascripttypescript

Error: Unable to locate module '@/components/Header' in Next.js project

I'm currently facing an issue while working on my Next.js project. The problem arises when I attempt to import a component into my 'page.js' file. In the 'src' folder, I have a subdirectory named 'components' which contai ...

javascriptvisual-studio-codenext.jstailwind-css

Why am I encountering this error message: "Route handler did not return any response"?

import { connectDB } from "../../../lib/mongoose"; import { User, userValidation, loginValidation } from "../../models/User"; import { BadRequestError } from "../../../lib/ErrorHandler"; import asyncHandler from "../../.. ...

node.jsmongoosenext.jsnext.js13

Angular2: PrimeNG - Error Retrieving Data (404 Not Found)

I'm facing an issue with using Dialog from the PrimeNG Module. The error message I keep getting is: Unhandled Promise rejection: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/primeng/primeng.js I followed the ...

angularjstypescriptxmlhttprequesthttp-status-code-404primeng

``There is an issue with Cross-Origin Resource Sharing (CORS) in a Node.js application utilizing TypeScript

I've encountered some issues with my application, specifically regarding CORS. I suspect it may be due to a misconfiguration on my server. The problem arises when I attempt to create a user in my PostgreeSQL database via the frontend. I have a tsx com ...

node.jstypescriptgraphql

The functionality of Next.js dynamic routes is compromised once deployed

I recently completed a website using Next.js with the following folder structure: pages |- [path] | |- index.js | |- [for-students] | |- [path] | | |- index.js | | index.js | events.js During development, everything functioned smoothly. I utilized ...

reactjsnext.jsaws-amplify

Angular6 table using *ngFor directive to display objects within an object

Dealing with Angular 6 tables and encountering a challenge with an item in the *ngFor loop. Here is my HTML view: <table class="table table-bordered text-center"> <tr> <th class="text-center">Cuenta</th> <th class="te ...

angulartypescript

Identifying Flaws in Components during Creation with Ready-Made spec.ts Files

Currently, I have embarked on the journey of creating unit tests for my Angular Material project. At the moment, my focus is on testing whether the pre-made spec.ts files for each component are passing successfully. Despite the fact that my project compile ...

angulartypescriptjasmine

Steps to execute an Angular directory within a project

Click here for imageWhenever I try to run ng serve command from the directory, it doesn't seem to work and just takes me back to the same directory. I'm having trouble running my Angular project. Any suggestions on how to solve this issue? ...

angulartypescriptnpmangular-cli

Using Angular 5 to access a variable within a component while iterating through a loop

I am currently in the process of transferring code from an AngularJS component to an Angular 5 component. Within my code, I have stored an array of objects in a variable called productlist. In my previous controller, I initialized another empty array nam ...

javascriptangulartypescriptangular-components

Tips for configuring a server-side rendered Next.js 14 application on Apache reverse proxy to efficiently serve static assets

After setting up the create-next-app@14 Next.js app on my RHEL server with Node installed, I configured a reverse proxy on Apache to redirect from 10.xx.xx.09/testwebsite/ to http://localhost:3000/. However, when I try to access 10.xx.xx.09/testwebsite/ in ...

apachenext.jsdeploymentreverse-proxyserver-side-rendering

Access an external URL by logging in, then return back to the Angular application

I am facing a dilemma with an external URL that I need to access, created by another client. My task is to make a call to this external URL and then return to the home page seamlessly. Here's what I have tried: <button class="altro" titl ...

javascriptangulartypescript

Embed the div within images of varying widths

I need help positioning a div in the bottom right corner of all images, regardless of their width. The issue I am facing is that when an image takes up 100% width, the div ends up in the center. How can I ensure the div stays in the lower right corner eve ...

htmlcssangulartypescript

How do Angular and NestJS manage to dynamically resolve injection tokens during runtime using the TypeScript type hints provided at compile time?

Frameworks such as Angular and NestJS in TypeScript utilize dependency injection by converting TypeScript type hints into injection tokens. These tokens are then used to fetch dependencies and inject them into constructors at runtime: @Injectable() // < ...

angulartypescriptdependency-injectionnestjs

Guide for integrating CryptoJS with Angular 2 and TypeScript within a WebPack build setup

Looking for advice on integrating the CryptoJS library with Angular 2 using TypeScript? Many existing resources are outdated and assume the use of SystemJS. Can someone provide straightforward instructions for incorporating CryptoJS with Angular 2 and Type ...

angulartypescriptwebpackcryptojs

Union types discriminate cases within an array

Creating a union type from a string array: const categories = [ 'Category A', 'Category B' ] as const type myCategory = typeof categories[number] myCategory is now 'Category A' | 'Category B' Now, the goal is ...

typescript

Is e.preventDefault() failing to work in Next.js?

Hey everyone, I'm new to react.js and next.js. I attempted to copy some data from a form and display it in the console, but using e.preventDefault() is preventing me from submitting my form. Is there a more effective way to achieve what I'm aimin ...

javascriptnext.js

Click the link to copy it and then paste the hyperlink

I am facing an issue with copying and pasting file names as hyperlinks. I have checkboxes next to multiple files and a share button. When I check the boxes and click on the share button, I want to copy the download URLs for those files. Although I can succ ...

javascripthtmlangulartypescript

Is it necessary to add a line break after a span element generated by react, next, or bootstrap

There is a strange issue plaguing my code - I'm enclosing some text in a span tag and it's causing an unexpected line break. It's unclear whether React.js, Next.js, or Bootstrap is the culprit, but I can't seem to get rid of the pesky l ...

cssreactjsbootstrap-4next.js

What is the method to view Next.js context in DevTools?

I attempted to console.log() the Next.js context from the getServerSideProps function, but it only seems to work in the terminal. This is quite inconvenient as I would like to view it in DevTools, however when I try to do so, I encounter various errors esp ...

next.js