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 :
As well as my website key from reCAPTCHA Enterprise API in the 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

