Repository navigation
AppCheck Error: reCAPTCHA placeholder element must be empty #3089
Description
Activity
This issue does not seem to follow the issue template. Make sure you provide all the required information.
Facing the same issue.
Solved it by enabling
isTokenAutoRefreshEnabled: true,in app-check config.provideAppCheck(() =>{ console.log('app check',firebaseApp); return initializeAppCheck(firebaseApp, { provider: new ReCaptchaV3Provider( 'abcdefghgijkmnopqrstuvwxyz-', ), isTokenAutoRefreshEnabled: true, }) }),
Update: Seems like this is related to pre-rendering, which causes the ReCaptcha library to be loaded twice.
Reacted by Aanhane, m00tt and Bram Teunis- added a commit that references this issue
on Sep 27, 2026 I tested this with AngularFire
21.0.0-rc.2, released today, which no longer runs App Check during server rendering or prerendering. In an Angular 21 app that prerenders its routes and sets up App Check withReCaptchaV3Provideras in this report:- With
21.0.0-rc.1, the prerender fails withReferenceError: document is not defined. - With
21.0.0-rc.2, the build succeeds, the prerendered page contains no reCAPTCHA markup, and the browser loads the reCAPTCHA script once, with noreCAPTCHA placeholder element must be emptyerror.
If you're still seeing this error, could you try
21.0.0-rc.2(npm install @angular/fire@next) and let me know whether it's gone? If your app needs App Check during server rendering, see App Check during server rendering.- With
Version info
How to reproduce these conditions
Added and configured Firebase App Check following the documentation. In
app.module.ts:Error in production build: (
ng build --configuration=productiondeployed on Firebase Hosting)Error: reCAPTCHA placeholder element must be emptywhich then causes:@firebase/firestore: Could not reach Cloud Firestore backend.Why this happens?
According to an old Stackoverflow question, it might be because "You are loading the google recaptcha library twice."
Network tab
Indeed, looking at the Network tab,
recaptcha__en.jsis loaded twice.Could the second recaptcha be loaded by something else?
I initially suspected FirebaseUI is loading the second recaptcha.
However, commenting out
provideAppCheck()inapp.module.tsthen checking the network tab shows 0 instances ofrecaptcha__en.js, leading to the conclusion that both were loaded throughprovideAppCheck().Summary
provideAppCheck()seems to load recaptcha library twice, causing a console error and disrupting Firestore completely.