FAQ

How I can add firebase authentication methods in another variant(Nextjs, Typescript)?

There are few simple steps to move apps into a separate project.

There are few simple steps to add the authentication method

1. Copy the following file from the source directory and paste it to your project's Signin directory

   src/modules/auth/Signin/SigninFirebase.js

2. Link this file to Signin/index.js file of your project and remove other Linked file like below

3. Copy the following action file from the actions of the source directory and paste it to your app's actions src/redux/actions/FirebaseAuth.js

4. Copy the following file from the source directory and paste it into your project. don't forget to import this file to src/@crema/services/auth/index.js src/@crema/services/auth/firebase/firebase.js

5. Add the following method into the @crema/utility/AppHooks.js file like below and call it into the checkAuth function like below

   import {auth as firebaseAuth} from '../services/auth/firebase/firebase';

   const firebaseCheck = () =>
     new Promise((resolve) => {
       firebaseAuth.onAuthStateChanged((authUser) => {
         if (authUser) {
           dispatch({
             type: UPDATE_AUTH_USER,
             payload: {
               authType: AuthType.FIREBASE,
               uid: authUser.uid,
               displayName: authUser.displayName,
               email: authUser.email,
               role: defaultUser.role,
               photoURL: authUser.photoURL,
               token: authUser.refreshToken,
             },
           });
         }
         resolve();
       });
       return Promise.resolve();
     });
     

   const checkAuth = () => {
     Promise.all([firebaseCheck()]).then(() => {
       setLoading(false);
       dispatch({type: USER_LOADED});
     });
   };

All Done! In case you get the following error FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app). To fix this replace this code in the crema/services/auth/firebase/firebase.js file

firebase.initializeApp(firebaseConfig);

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

Is there any way to remove the menus from the left sidebar? what all files do I need to remove it from?

Yes, You can remove the menus from the left sidebar. but we suggest that it would be great if you use the starter_template of your desired version. In case you want to remove few menus from the template then you can follow the following steps

1. Go to the src/modules/routesConfig.js file and remove the object that you don't want to use in your left sidebar.

2. Remove all unrelated routes from the src/modules/index.js file.

3. Remove all unrelated files/directory from src/modules/ directory.

How I can remove other authentication methods (Next.js)?

There are few simple steps to remove the authentication method from Nextjs

1. Go to the @crema/utility/AppHooks.js and remove other authentication methods from the validateAuth method in useEffect.

2. Remove all unrelated files from the modules/auth/ directory.

3. Update the logout method to remove the unnecessary check Ex. I want to use only the JWT- authentication method and remove all other methods. Step 1. I will replace the validateAuth method like below and delete other methods

   Promise.all([jwtAthCheck()]).then(() => {
     setLoading(false);
   });

   Step 2. I need to keep only modules/auth/Signup/SignupJwtAuth.js file in this Signup modules/auth/Signin/SigninJwtAuth.js file in the Signin directory and same as forgot password directory.

   Step 3. Need to replace the logout method as shown below from all the following files i. shared/components/HeaderUser/index.js ii. shared/components/UserInfo/index.js iii. @crema/core/AppLayout/HorUserInfo.js iv. @crema/core/AppLayout/BitBucket/UserInfo.js

dispatch(onJWTAuthSignout());

How I can remove other authentication methods (CRA)?

There are few simple steps to remove the authentication method from CRA

1. Go to the src/@crema/utility/AppHooks.js and remove other authentication methods from the validateAuth method in useEffect.

2. Remove all unrelated files from the src/modules/auth/ directory.

3. Update the logout method to remove the unnecessary check Ex. I want to use only the JWT- authentication method and remove all other methods. Step 1. I will replace the validateAuth method like below and delete other methods

   Promise.all([jwtAthCheck()]).then(() => {
     setLoading(false);
   });

   Step 2. I need to keep only src/modules/auth/Signup/SignupJwtAuth.js file in this Signup src/modules/auth/Signin/SigninJwtAuth.js file in the Signin directory and same as forgot password directory.

   Step 3. Need to replace the logout method as shown below from all the following files i. src/shared/components/HeaderUser/index.js ii. src/shared/components/UserInfo/index.js iii. src/@crema/core/AppLayout/HorUserInfo.js iv. src/@crema/core/AppLayout/BitBucket/UserInfo.js

   dispatch(onJWTAuthSignout());

How I can remove the customizer(Theme) button?

For example, I want to remove the theme setting button from the default layout. First of all, I need to go to the src/@crema/core/AppLayout/Standard/index.js file, and to remove the customizer button, I need to remove <ThemeSetting/> Tag.

How I can access the old version of the crema?

Users can access the GitHub repo here https://git-access.firebaseapp.com/ and select version v.1

Which icon package is used for the sidebar menu icons?

We are using material icons for the sidebar menu. you can check out these here: https://fonts.google.com/icons?selected=Material+Icons

How I can use a single widget/component of the Crema?

You can use any component of crema without any dependency on other components. You need to follow the following steps.

1. Copy the component's File/Directory and paste it into your app(don't miss the *.style.js file if any).

2. Check the external dependency of the component. If any then add that dependency into your project.

3. If that component uses any function from the Context API and the redux, you need to handle them yourself.

How easy is it to extract the Mail App into my own project?

There are few simple steps to move apps into a separate project.

1. Copy Mail folder into your project from apps

2. Add Mail app's route into your project and link it to your navigation(You can update base path 'apps/mail' to as your project need.)

3. Copy AppsContainer from the core components

4. Copy MailApp action and reducer file from the redux and link it to your app redux.

5. In case you want to use a fake API and database, please copy the DB file and mock API into your project(In case you want to integrate it with you API Please link your API to mail)

6. Please make sure you initialize APIs in your demo version.

How can I use found-relay instead of react-router-dom?

To use any navigation libs instead of react-router-dom please follow the following steps.

1. Crema creates routes in src\modules\index.js file. In this file, you found createRoutes function. This function is responsible for route creations. You can update this function according to your new routing lib.

2. Crema generate Routes with the help of renderRoutes function of react-router-config in the src\@crema\core\ContentView\index.js file So you can write down your logic in both files.