AppCheck Build Error During Prerender for Angular SSR

Version info

Angular: 13.0.3

Firebase: 9.6.4

AngularFire: 7.2.0

Other (e.g. Ionic/Cordova, Node, browser, operating system): Node 14

How to reproduce these conditions

Steps to set up and reproduce

After setting up AppCheck as such:

import { initializeAppCheck, provideAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';

    provideAppCheck(() => initializeAppCheck(getApp(), { provider: new ReCaptchaV3Provider(environment.recaptchaSiteKey), isTokenAutoRefreshEnabled: true })),

I am able to serve my application with both yarn server and yarn dev:ssr and I’m able to load the site with AppCheck seemingly working. However, when I try to run yarn prerender, I get the following error:

Unhandled Promise rejection: document is not defined ; Zone: <root> ; Task: Promise.then ; Value: ReferenceError: document is not defined

[posva]

There is actually an example at https://github.com/angular/angularfire/blob/master/samples/advanced/src/app/app.module.ts#L47-L57

You need to use the admin sdk on server

[ribalnasr]

Here’s my workaround for now…

I created a service:

@Injectable({
    providedIn: 'root'
})
export class RecaptchaBrowser {

    constructor(
        @Inject(PLATFORM_ID) private platformId: string
    ) { }

    provider(siteKey: string) {
        return isPlatformBrowser(this.platformId)
            ? new ReCaptchaV3Provider(siteKey)
            : new CustomProvider({
                getToken: () => new Promise(() => { })
            })
    }
}

and then I import the AppCheck module as follows:

    provideAppCheck((injector) => initializeAppCheck(getApp(), {
      provider: injector.get(RecaptchaBrowser).provider(environment.recaptchaSiteKey),
      isTokenAutoRefreshEnabled: true
    })),

This will skip the ReCaptchaV3Provider for server-side rendering and import it only in the browser.