App Check not working on initial loading, but working fine after refreshing the page

[Nvsuhail]

Operating System

Windows 10, Android 11

Environment (if applicable)

Google Chrome Version 131.0.6778.205 (Official Build) (64-bit)

Firebase SDK Version

11.1.0

Firebase SDK Product(s)

AppCheck

Project Tooling

HTML webpage with a JS

Detailed Problem Description

I have a webpage with a script tag - which include the Firebase API keys and App Check initialization code. I hosted the same in Firebase Hosting, and liked the hosting to my WebApp Project in Firebase and which is enabled for App Check. I created a ReCaptcha V3 for the appcheck and added the domain names in the list, and in Firebase Authentication domain name as well - added. In Appcheck - Added the ReCaptcha V3 Secret Key with 30 minutes TTL (also tried with 1 day TTL). I added the site key in my script section with App Check Initialization as well - but - whenever I open the webpade -

Steps and code to reproduce issue

Use this code -
Please make sure to replace the keys - API Keys + ReCaptcha Key
Ensure in your Firestore - 'SHORT-BIKES-Schema' collection is there

''

<title>Fetch Seller Name</title> <script type="module"> import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js"; import { getFirestore, doc, getDoc } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-firestore.js"; import { initializeAppCheck, ReCaptchaV3Provider, getToken } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app-check.js";

const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXX",
  projectId: "XXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXXXXXX"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize App Check
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('XXXXXXXXXXXXXXXXXXXX'),
  isTokenAutoRefreshEnabled: true
});

const db = getFirestore(app);

document.addEventListener('DOMContentLoaded', async () => {
  const urlParams = new URLSearchParams(window.location.search);
  const documentId = urlParams.get('docId');

  const sellerNameElement = document.getElementById('sellerName');
  const errorElement = document.getElementById('error');
  const documentIdPlaceholder = document.getElementById('documentIdPlaceholder');

  if (!documentId) {
    errorElement.textContent = "Document ID not provided in the URL.";
    documentIdPlaceholder.textContent = "Not Provided";
    return;
  }

  documentIdPlaceholder.textContent = documentId;
  sellerNameElement.textContent = "Loading...";

  try {
    // Explicitly get the App Check token
    const appCheckToken = await getToken(appCheck);
    console.log("App Check Token:", appCheckToken);

    const docRef = doc(db, 'SHORT-BIKES-Schema', documentId);
    const docSnap = await getDoc(docRef);

    if (docSnap.exists()) {
      const data = docSnap.data();
      sellerNameElement.textContent = data.SellerName || "Seller Name not found.";
    } else {
      errorElement.textContent = "Document not found.";
      sellerNameElement.textContent = "N/A";
    }
  } catch (appCheckError) {
    console.error("Error getting App Check token or fetching data:", appCheckError);
    errorElement.textContent = `Error: ${appCheckError.message}. Check console for details.`;
    sellerNameElement.textContent = "Error";
  }
});

</script>

Seller Name

Document ID:

Seller Name:

Here - when I first look - getting the errors and when I refresh the page - everything work fine. First I thought of it is the issue with initialization steps - but it's not.

Please find the below attached image for more details -

[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.