Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in 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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in 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