Integrating MongoDB Atlas with FireCMS
This guide details the steps necessary to integrate MongoDB Atlas as both the authentication system and the primary database for your FireCMS application. Mongo Atlas does not support file storage, so you can optionally use Firebase for this purpose, or any other storage provider.
Project Setup
Start by generating a new project using the FireCMS PRO starter template.
npx create-firecms-app --pro
or
yarn create firecms-app --pro
MongoDB Atlas Configuration
Begin by setting up your MongoDB Atlas project and obtaining the required configuration parameters.
These parameters include appId
, appUrl
, baseUrl
, clientApiBaseUrl
, dataApiBaseUrl
, dataExplorerLink
,
and 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"
};
Firebase Configuration (Optional)
If you wish to use Firebase for file storage, configure Firebase as follows:
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"
};
Implementing MongoDB in FireCMS
Let's create a new MongoDBApp
component that integrates MongoDB Atlas (and optionally Firebase).
Initialization
Initialize Firebase and MongoDB within your component:
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";
// Initialize Firebase
const { firebaseApp, firebaseConfigLoading, configError } = useInitialiseFirebase({ firebaseConfig });
// Initialize MongoDB
const { app } = useInitRealmMongodb(atlasConfig);
// ...
};
export default MongoDBApp;
Controllers and Persistence
Next, set up the mode controller, user configuration persistence, and MongoDB auth controller.
const modeController = useBuildModeController();
const userConfigPersistence = useBuildLocalConfigurationPersistence();
const authController: MongoAuthController = useMongoDBAuthController({ app });
const mongoDataSourceDelegate = useMongoDBDelegate({
app,
cluster: "mongodb-atlas",
database: "todo"
});
Firebase Storage Source
If you plan to use Firebase for file storage, initialize storageSource
.
const storageSource = useFirebaseStorageSource({ firebaseApp });
Authenticator Validation
Define the validation logic for your authenticator.
const { authLoading, canAccessMainView, notAllowedError } = useValidateAuthenticator({
authController,
authenticator: () => true, // Replace with your logic
dataSourceDelegate: mongoDataSourceDelegate,
storageSource
});
Navigation Controller
Set up the navigation controller with your collections.
const navigationController = useBuildNavigationController({
collections: [productsCollection],
authController,
dataSourceDelegate: mongoDataSourceDelegate
});
Rendering the Application
Finally, wire everything up inside the return statement of your component.
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, // Replace with your logic
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;