CODEWITHSUNDEEP
reactjsfirebasereact-hooks
meez
meez

Reputation: 4769

Proper helper or custom React hook to add and initialise Firebase

I am trying to connect Firebase to my project. To make the code cleaner and more reusable I want to add the Firebase code to a helper or custom hook.

This is what I have so far:

useFirebase.ts

import { useState, useEffect } from 'react';

import firebase from 'firebase/app';
import 'firebase/analytics';
import 'firebase/remote-config';

const useFirebase = () => {
  const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.envg.FIREBASE_MEASUREMENT_ID,
  };

useEffect(() => {
    // firebase.analytics();
    // firebase.remoteConfig();
    firebase
      .initializeApp(firebaseConfig)
      .firestore()
      .collection('notes')
      .add({ title: 'Working', body: 'Connection is working' });
  }, []);
};

export default useFirebase;

So I am able to use it in another file like:

import { useFirebase } from 'app/hooks';
useFirebase();

Is this the wright approach?

Update:

Inspired by the comments I created a helper firebase.ts

firebase.ts

import firebase from 'firebase/app';
import 'firebase/analytics';
import 'firebase/remote-config';
import 'firebase/firestore';

import config from 'client/config';

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.envg.FIREBASE_MEASUREMENT_ID
};

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

export default firebase;

In another file now I am importing firebase:

import firebase from 'app/helpers/firebase';

firebase
    .firestore()
    .collection('notes')
    .add({ title: 'Working', body: 'Connection is working' });

I added firestore to test if Firestore is connected to my app. I need only analytics and remote-config from Firestore.

1) Is there another way to test if it's connected properly?
2) In the helper I initialise Firebase. Is that enough to have that file? Or do I have to import it somewhere?

Upvotes: 1

Views: 357

Answers (1)

Dharmaraj
Dharmaraj

Reputation: 50830

I haven't really seen using React hooks to initialise the Firebase SDK. You can simply create a file called "firebase.js" and add the following code:

  import firebase from 'firebase/app';
  import 'firebase/analytics';
  import 'firebase/remote-config';

  const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.envg.FIREBASE_MEASUREMENT_ID,
  };

  firebase.initializeApp(config);

  export const auth = firebase.auth();
  export const db = firebase.database()

Then you can easily use it anywhere like this:

import {auth} from "./firebase.js";

// Rest of the code

Upvotes: 1

Related Questions