App Config

When creating a FireCMS app, you will either be using the components:

• FirebaseCMSApp Default implementation of FireCMS that uses Firebase Auth, Firestore and Firebase Storage.
• FireCMSApp Lower level component that allows you to provide your own implementations of the different services and more customization.

Navigation

FireCMS takes care of the navigation for you, it generates routes and menus based on the configuration that you set up.

tip

The collections can be defined asynchronously, so you can fetch data from your backend to build them. It might be useful if you want to build the collections based on the logged-in user, or if you want to fetch some data to build the schema of your collections. Check the dynamic collections section for more information.

You have two main ways of creating the top level views in FireCMS, either creating entity collections that get mapped to CMS views, or create your own top level React views:

• Check all the possible configurations for defining collections
• Otherwise, you can define your own custom top level views.

Customization

Let's see all the customization options available for FirebaseCMSApp (most of them are also available for FireCMSApp).

• name: Name of the app, displayed as the main title and in the tab title

• logo Logo to be displayed in the drawer of the CMS. If not specified, the FireCMS logo will be used

• logoDark Logo used in dark mode. If not specified, logo will always be used.

• collections List of the mapped collections in the CMS. Each entry relates to a collection in the root database. Each of the navigation entries in this field generates an entry in the main menu. You can use a builder to generate the list of collections, based on the logged user

• views Custom additional views created by the developer, added to the main navigation

• fields Record of custom form fields to be used in the CMS. You can use the key to reference the custom field in the propertyConfig prop of a property in a collection.

• authentication Do the users need to log in to access the CMS. You can specify an Authenticator function to discriminate which users can access the CMS or not. If not specified, authentication is enabled but no user restrictions apply

• signInOptions List of sign in options that will be displayed in the login view if authentication is enabled. You can pass Firebase providers strings, such as firebase.auth.GoogleAuthProvider.PROVIDER_ID or include additional config such as scopes or custom parameters Defaults to Google sign in only.

• allowSkipLogin If authentication is enabled, allow the user to access the content without login.

• firebaseConfig Firebase configuration of the project. If you afe deploying the app to Firebase hosting, you don't need to specify this value

• onFirebaseInit Optional callback after Firebase has been initialised. Useful for using the local emulator or retrieving the used configuration.

• appCheckOptionsUse this to enable Firebase App Check

• primaryColorPrimary color of the theme of the CMS

• secondaryColor Secondary color of the theme of the CMS

• fontFamily Font family string e.g.'"Roboto", "Helvetica", "Arial", sans-serif'

• toolbarExtraWidget A component that gets rendered on the upper side of the main toolbar

• dateTimeFormat Format of the dates in the CMS. Defaults to 'MMMM dd, yyyy, HH:mm:ss'

• locale Locale of the CMS, currently only affecting dates

• textSearchController Use this controller to return text search results as document ids, that get then fetched from Firestore.

• basePath Path under the navigation routes of the CMS will be created. Defaults to /. Internally FireCMS uses react-router to create the routes, the base path is attached to the BrowserRouter component. If you are using FireCMS in a subpath of your website, you can use this prop to specify the base path.

• baseCollectionPath Path under the collection routes of the CMS will be created. Defaults to /c.

• HomePage In case you need to override the home page. You may want to use useNavigationContext in order to get the resolved navigation.

• LoginView Additional props passed to the login view. You can use this props to disable registration in password mode, or to set up an additional message. Also, to add additional views to the login screen or disable the buttons.

• onAnalyticsEvent Callback used to get analytics events from the CMS

• plugins Use plugins to modify the behaviour of the CMS. Currently, in ALPHA, and likely subject to change.

• autoOpenDrawerOpen the drawer on hover. Defaults to false