Firebase AppCheck throwing error on WebKit Browsers.

[LawrenceGB]

Operating System

IOS

Environment (if applicable)

NextJS

Firebase SDK Version

11.6.0

Firebase SDK Product(s)

AppCheck

Project Tooling

NextJS App

Detailed Problem Description

When running AppCheck on a WebKit browser e.g. in a Facebook message it throws a "Application error: a client-side exception has occurred" and looking at the logs the reason is - reCAPTCHA placeholder element must be an element or id

Steps and code to reproduce issue

  export const AppCheckProvider = ({ children }) => {
    const firebaseApp = useFirebase();
    const [appCheck, setAppCheck] = useState(null);
    const [loading, setLoading] = useState(true);

    
    useEffect(() => {
        if (firebaseApp) {
            try {
                const siteKey = process.env.NEXT_PUBLIC_APP_CHECK_KEY;

                self.FIREBASE_APPCHECK_DEBUG_TOKEN = process.env.NODE_ENV !== "production";
                // Look in console logs for token and save to firebase appCheck console for Dev


                const appCheckInstance = initializeAppCheck(firebaseApp, {
                    provider: new ReCaptchaEnterpriseProvider(siteKey),
                    isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
                });

                console.log("appCheckInstance: ", appCheckInstance)
                setAppCheck(appCheckInstance);
            } catch (error) {
                console.error("App Check initialization error", error);
            } finally {
                setLoading(false);
            }
        }
    }, [firebaseApp]);
  

    // Show loading only if Firebase app is available but App Check is still initializing
    if (firebaseApp && loading) {
        return <Loading />;
    }

    return (
        <AppCheckContext.Provider value={appCheck}>
            {children}
        </AppCheckContext.Provider>
    );
};

I am initiating AppCheck in a provider in the main layout.

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[dlarocque]

Hi @LawrenceGB, thanks for reporting this issue. Unfortunately, I was not able to reproduce it in WebKit following the reproduction steps you provided. Is there any more information you can provide that could help me reproduce the issue so I can label this as a bug (minimal reproduction app I can run, stack traces, more component code, WebKit version, platform etc.)?

Here's a snippet from the NextJS application I tested with, please let me know if I attempted to reproduce the issue incorrectly:

{ useEffect, useState } from 'react';
import Image from 'next/image';
import styles from './page.module.css';
import { initializeApp } from 'firebase/app';
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from 'firebase/app-check';
import type { AppCheck } from 'firebase/app-check';

const firebaseConfig = {
  // omitted
};
const firebaseApp = initializeApp(firebaseConfig);

function Loading() {
  return <div>Loading App Check...</div>;
}

export default function Home() {
  const [appCheckInstance, setAppCheckInstance] = useState<AppCheck | null>(null);
  const [loading, setLoading] = useState(true); // Start loading initially
  const [error, setError] = useState<string | null>(null); // State to hold potential errors

  useEffect(() => {
    if (firebaseApp) {
      setLoading(true);
      setError(null);
      try {
        const siteKey = // omitted

        if (typeof window !== 'undefined') {
          (window as any).FIREBASE_APPCHECK_DEBUG_TOKEN = process.env.NODE_ENV !== "production";
          if (process.env.NODE_ENV !== "production") {
              console.log("App Check debug token might be available in the console. Add it to Firebase console if needed.");
          }
        } else {
          console.warn("Window object is not available in SSR context.");
        }

        const appCheck = initializeAppCheck(firebaseApp, {
          provider: new ReCaptchaEnterpriseProvider(siteKey),
          isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
        });

        console.log("App Check initialized successfully.");
        setAppCheckInstance(appCheck); // Store the instance if needed later
      } catch (err) {
        console.error("App Check initialization error:", err);
        setError(err instanceof Error ? err.message : "An unknown error occurred during App Check initialization.");
      } finally {
        setLoading(false); // Set loading false once initialization attempt is complete (success or fail)
      }
    } else {
      console.warn("Firebase app instance is not available for App Check initialization.");
      setError("Firebase app instance not available.");
      setLoading(false); // Not loading if firebaseApp isn't there
    }
  }, []); // only necessary to run once on mount, does not need to be dependent on firebaseApp.

  // Show loading indicator while App Check is initializing
  if (loading) {
    return <Loading />;
  }

  // Show error message if initialization failed
  if (error) {
      return <div className={styles.page}>Error initializing App Check: {error}</div>;
  }
  // ... remainder of Home component.

[google-oss-bot]

Hey @LawrenceGB. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[google-oss-bot]

Since there haven't been any recent updates here, I am going to close this issue.

@LawrenceGB if you're still experiencing this problem and want to continue the discussion just leave a comment here and we are happy to re-open this.