import Image from 'next/image'
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

## Firebase integration

In order to allow the server to communicate with the mobile app, you need to integrate Firebase into the mobile app.

### Generate Firebase service account key

1. Go to the [Firebase Console](https://console.firebase.google.com/).
2. Click on the gear icon and select `Project settings`.

<br/>
<Zoom>
<Image src="/server/firebase/1.png" alt="Server" width={1500} height={1500} />
</Zoom>
3. Go to the `Service accounts` tab and click on `Generate new private key`.

<br/>
<Zoom>
<Image src="/server/firebase/2.png" alt="Server" width={1500} height={1500} />
</Zoom>

4. A file will be downloaded. Copy the content of that file and save it in the `src/service-account/firebase.ts` file.

<br/>
<Zoom>
<Image src="/server/firebase/3.png" alt="Server" width={1500} height={1500} />
</Zoom>

Make sure to add the following content to the `src/service-account/firebase.ts` file:

```ts
export const FIREBASE_CREDENTIALS = {
  ...
}
```
