Firestore missing or insufficient permissions using App Check

Question

I am working on developping a nextjs website for myself and right now I am focusing on data. It's a portfolio website, so no account needed. My current problem is that I can't run my app using firestore with App Check runing.

The error I am facing is this one :

Erreur API Firestore : [Error [FirebaseError]: Missing or insufficient permissions.] {
  code: 'permission-denied',
  customData: undefined,
  toString: [Function (anonymous)]
}
 GET /api/api-handler?endpoint=cinema 500 in 78ms

To begining with a page called cinema.js :

import Nav from '@/components/Nav';
import Head from 'next/head';
import Footer from '@/components/Footer';
import Movie from '@/components/Movie';
import Link from 'next/link';
import React, { useState } from 'react';

export async function getServerSideProps(context) {
  try {
    const protocol = process.env.NODE_ENV === "production" ? "https" : "http";
    const host = context.req.headers.host;
    const response = await fetch(`${protocol}://${host}/api/api-handler?endpoint=cinema`);
    const data = await response.json();

    return {
      props: {
        projects: data,
      },
    };
  } catch (error) {
    console.error("Erreur lors de la récupération des données :", error);
    return {
      props: {
        projects: [],
      },
    };
  }
}

export default function Cinema({ projects }) {
  const [activeFilm, setActiveFilm] = useState(null);
  const [activeItem, setActiveItem] = useState(null);

  return (
    
      
        Cinéma
      

      {/* Barre de navigation */}
      
        
          
            
              Jacques
              Tellier
            
          
          
        
        {/* Titre principal */}
        CINÉMA
      

      {/* Contenu principal */}
      
        {/* Bloc des détails */}
        
          {activeItem ? (
            <>
              {activeItem.title}
              {activeItem.description}
              
                
                  Année : {activeItem.date}
                
                
                  Genre :{" "}
                  
                    {activeItem.genre.join(", ")}
                  
                
                
                  Type :{" "}
                  
                    {activeItem.type}
                  
                
                
                  Réalisateur(s) : {activeItem.director.join(", ")}
                
                
                  Producteur(s) : {activeItem.producer.join(", ")}
                
                
                  Distribution :{" "}
                  
                    {activeItem.distribution.join(", ")}
                  
                
                

                
                  Mon rôle :{" "}
                  
                    {activeItem.role}
                  
                
              
              
            
          ) : (
            Sélectionnez un élément pour afficher les détails.
          )}
        

        {/* Grille des affiches */}
        
          {projects.length > 0 ? (
            projects.map((item) => (
               setActiveItem(item)}
              >
                
                
                  {item.title}
                  {item.date}
                
              
            ))
          ) : (
            
              Aucun projet pour le moment.
            
          )}
        
      

      {/* Affichage de Movie en position absolue */}
      {activeFilm && (
         setActiveFilm(null)}
        />
      )}

      {/* Footer */}
      
    
  );
}

The API calls are beeing recieved here, in api-handler.js file :

import { collection, getDocs } from "firebase/firestore"; // Ajout de l'import manquant
import { db } from "@/config/firebase-config";

export default async function handler(req, res) {
  const { endpoint } = req.query; // Récupère le type de données demandé (ex : "cinema")

  if (req.method === "GET") {
    try {
      console.log("Requête reçue pour endpoint :", endpoint);

      const dataCollection = collection(db, endpoint); // Référencer la collection Firestore
      console.log("
")
      console.log("Instance Firestore:", dataCollection._firestore);
      console.log("Chemin de la collection :", dataCollection._path.segments);
      console.log("Convertisseur :", dataCollection._converter);
      console.log("
")
      const snapshot = await getDocs(dataCollection); // Récupérer les documents
      const data = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));

      console.log("Données récupérées :", data);
      res.status(200).json(data); // Retourne les données récupérées au client
    } catch (error) {
      console.error("Erreur API Firestore :", error);
      res.status(500).json({ error: "Erreur lors de la récupération des données." });
    }
  } else {
    res.setHeader("Allow", ["GET"]);
    res.status(405).end(`Méthode ${req.method} non autorisée`);
  }
}

And we are using this firebase-config.js file :

import { initializeApp, getApps, getApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL, // Ajout de la configuration manquante
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const db = getFirestore(app);
const storage = getStorage(app);

if (typeof window !== "undefined") {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;

  initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider(process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY),
    isTokenAutoRefreshEnabled: true, // Renouvelle automatiquement le jeton
  });
}

export { app, db, storage };

Here are the rules I am using on Firestore :

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

All is working when I turn off App check on the Firestore feature, I get my data, there is no errors, but ! I don't feel comfy without the app check on my app...

This is an example of one page with data included from firestore :

With App Check : https://i.sstatic.net/gYLvtztI.png

Without App Check : https://i.sstatic.net/pByvMAHf.png

App Check status when enforced : https://i.sstatic.net/p4VD3zfg.png

Firestore missing or insufficient permissions using App Check

Answers (0)

Related Questions