Firebase App Check en FireCMS Cloud

FireCMS Cloud puede exigir Firebase App Check en cada petición que tu panel de administración hace a Firestore y Storage, de modo que solo tu propio CMS pueda leer o escribir tus datos, y no una clave de API copiada o un script extraído de tu bundle.

App Check es un servicio de Firebase. Esta página cubre cómo integrarlo en FireCMS; para saber qué hace App Check y qué proveedores de atestación existen, consulta la documentación de App Check de Firebase.

Recuerda añadir el dominio app.firecms.co a la lista de dominios permitidos en la configuración del proveedor de AppCheck.

Puedes habilitar Firebase App Check en tu aplicación directamente en la configuración del proyecto en la consola de FireCMS Cloud, o proporcionando la propiedad appCheck en la configuración de la aplicación.

Al implementarlo en código, puedes tener más control sobre la configuración y el proveedor que quieres usar, incluyendo proveedores personalizados.

Puedes definir algunas opciones:

• provider: El proveedor que quieres usar.
• isTokenAutoRefreshEnabled: Si se debe actualizar automáticamente el token.
• debugToken: Un token de depuración para usar.
• forceRefresh: Si se debe forzar la actualización del token.

Proveedores

La propiedad provider es obligatoria y debe ser una instancia de un proveedor de Firebase AppCheck. Puedes usar uno de los siguientes proveedores:

ReCaptchaEnterpriseProvider

Para configurar el ReCaptchaEnterpriseProvider, necesitas crear una nueva clave de sitio de reCAPTCHA Enterprise. Sigue las instrucciones en la documentación de Firebase.

Asegúrate de haber añadido el dominio app.firecms.co a la lista de dominios permitidos en la consola de reCAPTCHA Enterprise.

import {FireCMSAppConfig} from "@firecms/cloud";
import {ReCaptchaEnterpriseProvider} from "@firebase/app-check";

const appConfig: FireCMSAppConfig = {

    version: "1",

    appCheck: {
        provider: new ReCaptchaEnterpriseProvider("tu-clave-de-sitio")
    },
}

export default appConfig;

ReCaptchaV3Provider

Para configurar el ReCaptchaV3Provider, necesitas crear una nueva clave de sitio de reCAPTCHA v3. Sigue las instrucciones en la documentación de Firebase.

import {FireCMSAppConfig} from "@firecms/cloud";
import {ReCaptchaV3Provider} from "@firebase/app-check";

const appConfig: FireCMSAppConfig = {

    version: "1",

    appCheck: {
        provider: new ReCaptchaV3Provider("tu-clave-de-sitio")
    },
}

export default appConfig;

Proveedor personalizado

También puedes crear un proveedor personalizado implementando la interfaz AppCheckProvider.

Verifica tu configuración

FireCMS Cloud puede compartir dependencias con tu aplicación subida. Es importante que tu aplicación y FireCMS Cloud utilicen la misma versión de Firebase App Check. Para hacerlo, asegúrate de que, en tu vite.config.ts, estás usando la dependencia compartida proporcionada por FireCMS. Necesitas tener la dependencia @firebase/app-check en tu vite.config.ts. Configuración shared del plugin Federation.

Este es un ejemplo de configuración:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import federation from "@originjs/vite-plugin-federation"

// https://vitejs.dev/config/
export default defineConfig({
    esbuild: {
        logOverride: { "this-is-undefined-in-esm": "silent" }
    },
    plugins: [
        react(),
        federation({
            name: "remote_app",
            filename: "remoteEntry.js",
            exposes: {
                "./config": "./src/index"
            },
            shared: [
                "react",
                "react-dom",
                "@firecms/cloud",
                "@firecms/core",
                "@firecms/firebase",
                "@firecms/ui",
                "@firebase/firestore",
                "@firebase/app",
                "@firebase/functions",
                "@firebase/auth",
                "@firebase/storage",
                "@firebase/analytics",
                "@firebase/remote-config",
                "@firebase/app-check" // Añade esta línea
            ]
        })
    ],
    build: {
        modulePreload: false,
        minify: false,
        target: "ESNEXT",
        cssCodeSplit: false,
    }
});