How to add a live counter in react that displays a firestore collection value securely?

Goal: To have a live counter on my React Firebase site that displays the current number of views on my youtube channel.

Method: I am retrieving the view count by calling the Youtube API from a firebase cloud function so that I can protect my API key. Once I have the data, I use another cloud function to update a view count collection in my firestore database (using pubsub every 60 minutes). I then monitor this collection using onSnapshot in my front-end and display the value.

Problem: While this does work, I get an email every day from Firebase saying my firestore database "has insecure rules" because "any user can read the entire database." I do not want to add authentication to my site, but I would like to have the live counter fully secure. Does anybody know how to have a live counter referencing a firestore database?

Front-end code:

export default function Navbar() {
  const [count, setCount] = React.useState('');

  const unsub = onSnapshot(doc(db, "viewCount", "Count"), (doc) => {
    setCount(doc.get("View Count"));
  });

Firestore rules:

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read: if true;
      allow write: if false; 
    }
  }
}

Cloud functions

/**
 * Function updates Firestore view count every 60 minutes
 * 
 * @param - 
 * @returns - N/A 
 */
exports.updateViewCount = functions.pubsub
  .schedule("every 60 minutes")
  .onRun((context) => {
    try {
      this.logCount(5);
      console.log("Count updated at:", new Date());
    } catch (error) {
      console.error("Error getting view count: ", error);
    }
  });



/**
 * Function calls getViewCount to get Youtube View Count
 * 
 * @param - 
 * @returns - Int: View count 
 */
exports.logCount = functions
  .runWith({
    secrets: ["YOUTUBE_API"],
  })
  .https.onCall(async (data, context) => {
    const viewData = await getViewCount(
      process.env.YOUTUBE_API,
      process.env.YOUTUBE_CHANNEL_ID
    );
    const addData = await admin
      .firestore()
      .collection("viewCount")
      .doc("Count")
      .set({ "View Count": viewData })
      .then(() => {
        return viewData;
      })
      .catch((error) => {
        console.error("Error writing document: ", error);
      });
  });

To recap:

1. Is this the right way to implement a live counter with firestore without authentication?
2. If so: How can I do this more securely? If not: what other options are there?

To get the warning emails to stop, you just need to change your rules so that allow read: if true; isn't applied to the entire database. You can still apply it to the part of the database where the counter is.

service cloud.firestore {
  match /databases/{database}/documents {
    match /viewCount/Count {
      allow read: if true;
      allow write: if false; 
    }
  }
}

If you have other documents and collections that are being used by your app, you'll need to add rules for them too.