Firebase App Check (self-hosted)

FireCMS self-hosted 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 donde desplegarás tu aplicación a la lista de dominios permitidos en la configuración del proveedor de AppCheck.

Para las versiones autoalojadas, puedes habilitar Firebase App Check en tu aplicación proporcionando las props options y firebaseApp en el hook useAppCheck.

El hook useAppCheck se usa para inicializar Firebase App Check y monitorizar su estado. Gestiona el proceso de inicialización asíncrono, proporciona el estado de carga y captura cualquier error que pueda ocurrir durante la inicialización.

Parámetros

• firebaseApp (opcional): Una instancia de FirebaseApp para usar en la inicialización de App Check.
• options (opcional): Opciones de configuración para App Check.
  • provider: El proveedor que deseas 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.

Valor de Retorno

Devuelve un objeto que incluye:

• loading: Un booleano que indica si la inicialización está en curso.
• appCheckVerified (opcional): Un booleano que indica si la aplicación ha sido verificada por App Check.
• error (opcional): Cualquier error encontrado durante el proceso de inicialización.

Ejemplo

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

const {
    loading,
    error,
    appCheckVerified
} = useAppCheck({
    options: {
        provider: new ReCaptchaEnterpriseProvider(process.env.VITE_RECAPTCHA_SITE_KEY as string),
        isTokenAutoRefreshEnabled: true,
    }
});

Proveedores

La propiedad provider es obligatoria y debe ser una instancia de un proveedor de AppCheck de Firebase. 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 {useAppCheck} from "@firecms/firebase";
import {ReCaptchaEnterpriseProvider} from "@firebase/app-check";

const {
    loading,
    error,
    appCheckVerified
} = useAppCheck({
    options: {
        provider: new ReCaptchaEnterpriseProvider("tu-clave-de-sitio"),
        isTokenAutoRefreshEnabled: true,
    }
});

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 {useAppCheck} from "@firecms/firebase";
import {ReCaptchaV3Provider} from "@firebase/app-check";

const {
    loading,
    error,
    appCheckVerified
} = useAppCheck({
    options: {
        provider: new ReCaptchaV3Provider("tu-clave-de-sitio"),
        isTokenAutoRefreshEnabled: true,
    }
});

Proveedor personalizado

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