Integrar MongoDB Atlas con FireCMS

Esta guía detalla los pasos necesarios para integrar MongoDB Atlas como sistema de autenticación y base de datos primaria para tu aplicación FireCMS. Mongo Atlas no soporta almacenamiento de archivos, por lo que opcionalmente puedes usar Firebase para este propósito, o cualquier otro proveedor de almacenamiento.

Configuración del proyecto

Comienza generando un nuevo proyecto usando el template starter de FireCMS PRO.

npx create-firecms-app --pro

o

yarn create firecms-app --pro

Configuración de MongoDB Atlas

Comienza configurando tu proyecto de MongoDB Atlas y obteniendo los parámetros de configuración requeridos. Estos parámetros incluyen appId, appUrl, baseUrl, clientApiBaseUrl, dataApiBaseUrl, dataExplorerLink, y dataSourceName.

const atlasConfig = {
  appId: "your-app-id",
  appUrl: "https://services.cloud.mongodb.com/groups/your-group-id/apps/your-app-id",
  baseUrl: "https://services.cloud.mongodb.com",
  clientApiBaseUrl: "https://your-region.gcp.services.cloud.mongodb.com",
  dataApiBaseUrl: "https://your-region.gcp.data.mongodb-api.com",
  dataExplorerLink: "https://cloud.mongodb.com/links/your-group-id/explorer/Cluster0/database/collection/find",
  dataSourceName: "mongodb-atlas"
};

Configuración de Firebase (Opcional)

Si deseas usar Firebase para almacenamiento de archivos, configura Firebase de la siguiente manera:

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  databaseURL: "your-database-url",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

Implementar MongoDB en FireCMS

Creemos un nuevo componente MongoDBApp que integre MongoDB Atlas (y opcionalmente Firebase).

Inicialización

Inicializa Firebase y MongoDB dentro de tu componente:

import React from "react";
import {
  AppBar,
  CircularProgressCenter,
  FireCMS,
  ModeControllerProvider,
  NavigationRoutes,
  Scaffold,
  SideDialogs,
  SnackbarProvider,
  useBuildLocalConfigurationPersistence,
  useBuildModeController,
  useBuildNavigationController,
  useValidateAuthenticator
} from "@firecms/core";
import {
  useFirebaseStorageSource,
  useInitialiseFirebase,
} from "@firecms/firebase";
import { productsCollection } from "./collections/products_collection";
import { CenteredView } from "@firecms/ui";
import {
  MongoAuthController,
  MongoLoginView,
  useInitRealmMongodb,
  useMongoDBAuthController,
  useMongoDBDelegate
} from "@firecms/mongodb";

const MongoDBApp = () => {
  const name = "My FireCMS App";

  // Inicializar Firebase
  const { firebaseApp, firebaseConfigLoading, configError } = useInitialiseFirebase({ firebaseConfig });

  // Inicializar MongoDB
  const { app } = useInitRealmMongodb(atlasConfig);

  // ...
};

export default MongoDBApp;

Controladores y persistencia

A continuación, configura el controlador de modo, la persistencia de configuración de usuario y el controlador de autenticación de MongoDB.

const modeController = useBuildModeController();
const userConfigPersistence = useBuildLocalConfigurationPersistence();

const authController: MongoAuthController = useMongoDBAuthController({ app });
const mongoDataSourceDelegate = useMongoDBDelegate({
  app,
  cluster: "mongodb-atlas",
  database: "todo"
});

Fuente de almacenamiento Firebase

Si planeas usar Firebase para almacenamiento de archivos, inicializa storageSource.

const storageSource = useFirebaseStorageSource({ firebaseApp });

Validación del autenticador

Define la lógica de validación para tu autenticador.

const { authLoading, canAccessMainView, notAllowedError } = useValidateAuthenticator({
  authController,
  authenticator: () => true, // Reemplaza con tu lógica
  dataSourceDelegate: mongoDataSourceDelegate,
  storageSource
});

Controlador de navegación

Configura el controlador de navegación con tus colecciones.

const navigationController = useBuildNavigationController({
  collections: [productsCollection],
  authController,
  dataSourceDelegate: mongoDataSourceDelegate
});

Renderizar la aplicación

Finalmente, conecta todo dentro del return de tu componente.

const MongoDBApp = () => {
  const name = "My FireCMS App";

  const { firebaseApp, firebaseConfigLoading, configError } = useInitialiseFirebase({ firebaseConfig });
  const { app } = useInitRealmMongodb(atlasConfig);

  const modeController = useBuildModeController();
  const userConfigPersistence = useBuildLocalConfigurationPersistence();
  const authController: MongoAuthController = useMongoDBAuthController({ app });
  const mongoDataSourceDelegate = useMongoDBDelegate({
    app,
    cluster: "mongodb-atlas",
    database: "todo"
  });
  const storageSource = useFirebaseStorageSource({ firebaseApp });
  const { authLoading, canAccessMainView, notAllowedError } = useValidateAuthenticator({
    authController,
    authenticator: () => true, // Reemplaza con tu lógica
    dataSourceDelegate: mongoDataSourceDelegate,
    storageSource
  });
  const navigationController = useBuildNavigationController({
    collections: [productsCollection],
    authController,
    dataSourceDelegate: mongoDataSourceDelegate
  });

  if (firebaseConfigLoading || !firebaseApp) {
    return <CircularProgressCenter />;
  }

  if (configError) {
    return <CenteredView>{configError}</CenteredView>;
  }

  return (
    <SnackbarProvider>
      <ModeControllerProvider value={modeController}>
        <FireCMS
          navigationController={navigationController}
          authController={authController}
          userConfigPersistence={userConfigPersistence}
          dataSourceDelegate={mongoDataSourceDelegate}
          storageSource={storageSource}
        >
          {({ context, loading }) => {
            if (loading || authLoading) {
              return <CircularProgressCenter size="large" />;
            }

            if (!canAccessMainView) {
              return (
                <MongoLoginView
                  allowSkipLogin={false}
                  authController={authController}
                  registrationEnabled={true}
                  notAllowedError={notAllowedError}
                />
              );
            }

            return (
              <Scaffold autoOpenDrawer={false}>
                <AppBar title={name} />
                <Drawer />
                <NavigationRoutes />
                <SideDialogs />
              </Scaffold>
            );
          }}
        </FireCMS>
      </ModeControllerProvider>
    </SnackbarProvider>
  );
};

export default MongoDBApp;