Problem with Firebase App Check : App is not registered - Next.js integration

97 Views Asked by At

I followed this guide to implement Firebase App Check in my Next.js (v14) project :

// firebase/app.js

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";


const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
  databaseURL: process.env.NEXT_PUBLIC_DATABASE_URL,
};

export const app = initializeApp(firebaseConfig);

// add this condition to prevent 'document is not defined' error on SSR
if (typeof window !== "undefined") {
  initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider(
      process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY
    ),
    isTokenAutoRefreshEnabled: true,
  });
}

When I run my project locally or in production i get these errors :

POST https://content-firebaseappcheck.googleapis.com/v1/projects/xxx/apps/xxx:exchangeRecaptchaV3Token?key=xxx 400 (Bad Request)
@firebase/app-check: AppCheck: Requests throttled due to 400 error. Attempts allowed again after 00m:02s (appCheck/throttled).

When I inspect the network tab of the browser I can see this response for the request :

{
  "code": 400,
  "message": "App not registered: 1:123xxxxx.", // I made sure this is the right Firebase app id
  "status": "FAILED_PRECONDITION"
}

reCAPTCHA verification cannot be processed.

The problem is that my app is properly registered on Firebase :

confirmation message that the app is properly registered with reCAPTCHA Enterprise

As well as my website key from reCAPTCHA Enterprise API in the Google Cloud console :

website key properly added in Google Cloud console

Note that Realtime Database is already implemented in the same project and working fine.

Thanks for your help.

EDIT : I was able to reproduce the issue in an empty repo with a new Firebase project, so I might be missing something regarding the configuration of App Check.

Repo of the reproduction : https://github.com/pierre-phil/next.js_firebase_starter?tab=readme-ov-file

0

There are 0 best solutions below