FireCMS PRO
For a limited time
Try FireCMS PRO at the same price as FireCMS Cloud
The most customizable headless CMS. Ever.
The perfect solution for your team or public facing applications, built on top of Firebase.
Advanced Functionality, Built-In
FireCMS PRO allows you to use all the internal components and features of FireCMS, while allowing total styling and customization. It also provides additional tools and components to help you build better back-office applications faster. FireCMS PRO elevates your control and efficiency, offering an unmatched user experience designed for professionals. Seamlessly manage your data with enhanced tools, including an intuitive spreadsheet view and dynamic, feature-rich forms. It's the professional edge your projects demand.
Users and Roles Management Control app settings based on who's logged in. Connect with your existing user management system for a unified experience. | |
High-quality components Design custom views using the full component set that FireCMS uses internally. Save time and effort by reusing them across your application. | |
Self-hosted Operate independently without external services. Enjoy full control over your data and infrastructure for enhanced security and compliance. | |
Dedicated Support Receive dedicated support with a personal account manager. Address questions or issues quickly and stay focused on delivering your best work. | |
Data enhancement Use large language models (LLMs) to automatically enrich data for you and your clients. Gain valuable insights, context, and added value from your information. |
FireCMS PRO was crafted through collaboration with various companies, out of the need to have a CMS that could be used in different scenarios and that could be easily customized to fit different needs.
Public Facing Applications
If you are building a CRUD public facing application based on Firebase, FireCMS PRO is the perfect solution for you. Define exactly what each user can do and customize the experience for each role.
Use all the internal components of FireCMS, including the schema editor, data inference, advanced data import and export, default roles and more.
With your FireCMS PRO license, you can build projects with unlimited users.
For developers
No config, just React components
FireCMS is simply a set of React components and hooks. You can use them to build your own back-office applications, with your own authentication, data sources and storage.
No need to learn a new framework or a new way of doing things. Just use the components and hooks you need. No magic, no hidden logic, no configuration.
function ProSample() {
// Use your own authentication logic here
const myAuthenticator: Authenticator<FirebaseUserWrapper> = useCallback(async ({
user,
authController
}) => {
if (user?.email?.includes("flanders")) {
throw Error("Stupid Flanders!");
}
// This is an example of retrieving async data related to the user
// and storing it in the controller's extra field
const idTokenResult = await user?.getIdTokenResult();
const userIsAdmin = idTokenResult?.claims.admin || user?.email?.endsWith("@firecms.co");
console.log("Allowing access to", user);
return Boolean(userIsAdmin);
}, []);
const collections = [
booksCollection,
// Your collections here
];
const {
firebaseApp,
firebaseConfigLoading,
configError
} = useInitialiseFirebase({
firebaseConfig
});
// Controller used to manage the dark or light color mode
const modeController = useBuildModeController();
const signInOptions: FirebaseSignInProvider[] = ["google.com"];
// Controller for managing authentication
const authController: FirebaseAuthController = useFirebaseAuthController({
firebaseApp,
signInOptions
});
// Controller for saving some user preferences locally.
const userConfigPersistence = useBuildLocalConfigurationPersistence();
// Delegate used for fetching and saving data in Firestore
const firestoreDelegate = useFirestoreDelegate({
firebaseApp
});
// Controller used for saving and fetching files in storage
const storageSource = useFirebaseStorageSource({
firebaseApp
});
const navigationController = useBuildNavigationController({
collections,
authController,
dataSourceDelegate: firestoreDelegate
});
const dataEnhancementPlugin = useDataEnhancementPlugin({
getConfigForPath: ({ path }) => {
if (path === "books")
return true;
return false;
}
});
const importExportPlugin = useImportExportPlugin();
if (firebaseConfigLoading || !firebaseApp) {
return <>
<CircularProgressCenter/>
</>;
}
if (configError) {
return <CenteredView>{configError}</CenteredView>;
}
return (
<SnackbarProvider>
<ModeControllerProvider value={modeController}>
<FireCMS
navigationController={navigationController}
authController={authController}
userConfigPersistence={userConfigPersistence}
dataSourceDelegate={firestoreDelegate}
storageSource={storageSource}
plugins={[dataEnhancementPlugin, importExportPlugin]}
>
{({
context,
loading
}) => {
if (loading) {
return <CircularProgressCenter size={"large"}/>;
}
if (authController.user === null) {
return <FirebaseLoginView authController={authController}
firebaseApp={firebaseApp}
signInOptions={signInOptions}/>
}
return <Scaffold
name={"My demo app"}
autoOpenDrawer={false}>
<NavigationRoutes/>
<SideDialogs/>
</Scaffold>;
}}
</FireCMS>
</ModeControllerProvider>
</SnackbarProvider>
);
}