# Firebase

## Overview

In this boilerplate already supports integration with firebase, several firebase features that are already in boilerplate

* [Firebase Analytics](https://firebase.google.com/docs/analytics/get-started?platform=web)
* [Firebase Performance Monitoring](https://firebase.google.com/docs/perf-mon/get-started-web#web-version-8)
* [Firebase Log Events](https://firebase.google.com/docs/analytics/events?platform=web)

## How to use

Here we use [Firebase](https://firebase.google.com/). The installation method is as follows below.

{% hint style="info" %}
This docs using Firebase web version 8.10.0
{% endhint %}

### Step 1: Set up Firebase configs

Adding file & code in `./src/lib/firebase.js`

```javascript
// Vendors
import firebase from 'firebase/app';
import 'firebase/analytics';
import 'firebase/performance';

// Firebase configs
const firebaseConfig = {
  apiKey: `${process.env.NEXT_PUBLIC_FIREBASE_API_KEY}`,
  authDomain: `${process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN}`,
  databaseURL: `${process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL}`,
  projectId: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}`,
  storageBucket: `${process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET}`,
  messagingSenderId: `${process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID}`,
  appId: `${process.env.NEXT_PUBLIC_FIREBASE_APP_ID}`,
  measurementId: `${process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID}`,
};

// Initialize Firebase
let firebasePerformance = '';
if (typeof window !== 'undefined' && !firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
  // Performance
  firebasePerformance = firebase.performance();
  const trace = firebasePerformance.trace('app_start');
  trace.start();

  trace.putAttribute('experiment', '_app_start');

  trace.stop();
}

// Analytics
const firebaseAnalytics = firebase.analytics;

// Log Events
const firebaseEvent = (eventName) => firebase.analytics().logEvent(eventName);

export { firebase, firebaseAnalytics, firebasePerformance, firebaseEvent };
```

### Step 2: Import `firebaseAnalytics` in to `./src/pages/_app.js`

Here it works for the first initial firebase, analytics and performance data will be stored in firebase.

```javascript
// Vendors
import React from 'react';

// Lib
import { firebaseAnalytics, firebasePerformance } from '@/firebase';

const App = (props) => {
    React.useEffect(() => {
    // Initialize Firebase
    firebaseAnalytics();
    ...
  }, []);
    ...
};

export default App;
```

### Step 3: Using log event

Use this function in specific file which requires user event handler log.

```javascript
// Lib
import { firebaseEvent } from '@/firebase';

// Log event firebase
firebaseEvent('Event_Name');
```

### Step 4: Testing analytics metric, performance and log events

First install browser extentions [Google Analytics Debugger](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna). Turn it on and then run trigger event log on your code. For view realtime event you can see in **DebugView** menu in firebase console.