> For the complete documentation index, see [llms.txt](https://docs.cremawork.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cremawork.com/v2.0/faq.md).

# 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**<br>
2. Link this file to Signin/index.js file of your project and remove other Linked file like below\
   &#x20;<br>
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**<br>
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**<br>
5. &#x20;Add the following method into the **@crema/utility/AppHooks.js** file  like below and call it into the **checkAuth** function like below&#x20;

   ```
   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?&#x20;

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);
   });
   ```

   &#x20;**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.<br>

   **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);
   });
   ```

   &#x20;**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.<br>

   **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.&#x20;

## 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.