Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

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

Open
Nvsuhail opened this issue Dec 26, 2024 · 3 comments
Open

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

Nvsuhail opened this issue Dec 26, 2024 · 3 comments
Labels
api: appcheck needs-info no-recent-activity question

Comments

@Nvsuhail
Copy link

Nvsuhail commented Dec 26, 2024 •
edited by DellaBitta
Loading

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

 <!DOCTYPE html>
<html>
<head>
  <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>
</head>
<body>
  <h1>Seller Name</h1>
  <p>Document ID: <span id="documentIdPlaceholder"></span></p>
  <p>Seller Name: <span id="sellerName"></span></p>
  <p style="color: red;" id="error"></p>
</body>
</html>

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 - Image
@Nvsuhail Nvsuhail added new A new issue that hasn't be categoirzed as question, bug or feature request question labels Dec 26, 2024
@google-oss-bot
Copy link
Contributor

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

@rizafran rizafran added api: appcheck and removed needs-triage new A new issue that hasn't be categoirzed as question, bug or feature request labels Dec 26, 2024
@DellaBitta
Copy link
Contributor

Hi @Nvsuhail,

Just for clarification: this is only an AppCheck getToken()error and the Firestore code is not required to reproduce this problem?

@google-oss-bot
Copy link
Contributor

Hey @Nvsuhail. 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!

# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
api: appcheck needs-info no-recent-activity question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@DellaBitta @google-oss-bot @rizafran @Nvsuhail