🖌️
Firebase+React_Notes
  • Firebase React Notes
  • React + firebase
    • Firebase - Create React app setup
      • Node & nvm
      • Create React App + Firebase
      • Create firebase app
      • Deploying To Firebase Hosting
      • Switching Environments
      • Typescript typings
      • Firebase cloud function local development
      • Resources
    • Firebase React context
      • Motivation
      • Firebase React Context setup
    • Firebase function local dev react
    • React firebase hooks
  • Multiple ENVs
    • Multiple ENVs
    • Manual setup
    • Terraform
  • Firestore
    • Firestore
      • Using a function to check email domain
    • Firestore data model
    • associated Firebase data with Users
    • Firestore write
    • Firestore - read
      • Removing a listener from firestorm
    • Firestore update
    • Persisting data offline
    • Importing json
  • Auth
    • Auth
    • Firebase UI
    • Firebase Auth with React
    • Linking auth accounts
    • Twitter sign in
    • Google sign in
      • Google sign in custom domain
    • Database Auth
      • Custom claims
      • Limit auth to certain domain only
    • Custom tokens
  • Cloud Functions
    • Cloud Functions
    • Set node version
    • Set timeout and memory allocation
    • Call functions via HTTP requests
    • HTTPS Callable
      • HTTPS Callable cloud function auth check email address domain
    • Separate Cloud Function in multiple files
    • Slack integration
    • Twilio firebase functions
    • ffmpeg convert audio
    • ffmpeg transcoding video
  • Storage
    • Security
    • Create
    • Delete
    • Uploading with React to Firebase Storage
    • Getting full path
    • Firebase `getDownloadURL`
    • Saving files to cloud storage from memory
  • Hosting
    • Hosting
    • Hosting + cloud functions
  • Firebase Admin
    • Firebase admin
  • Firebase analytics
    • Firebase analytics
  • Google App Engine
    • Google App Engine
    • GCP App Engine + video transcoding
  • STT
    • STT + Cloud Function + Cloud Task
      • Example implementation
      • `createTranscript`
      • `createHandler`
        • Firebase ENV
    • Other
      • enableWordTimeOffsets
      • STT longRunningRecognize in Cloud function
      • STT + Cloud Function
      • STT + Google App Engine
      • STT via Google Cloud Video intelligence API
  • CI Integration
    • Travis CI integration
    • Github actions integration
  • Visual code
    • Visual code extension
  • Electron
    • Firebase with electron
  • Pricing
    • Pricing
  • Testing
    • Unit testing
  • Privacy and Security
    • Privacy and security
  • Useful resources
    • links
  • Firebase Extensions
    • Firebase extension
  • Chrome Extension
    • Firebase in a chrome extension
  • Cloud Run
    • Cloud Run
Powered by GitBook
On this page

Was this helpful?

  1. React + firebase
  2. Firebase React context

Motivation

React's Context management is great for keeping a Firebase Singleton for your application. By also setting up a Context specifically for Sessions, you can make sure that certain components are only accessible via successful authentication.

If you are initialising firebase like this

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import "firebase/storage";
import "firebase/functions";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export const db = firebase.firestore();
export const functions = firebase.functions();

firebase.functions().useFunctionsEmulator('http://localhost:4001') 
export default firebase;

Using these Create React App Env in a .env (added to .gitignore)

# Firebase
REACT_APP_API_KEY=""
REACT_APP_AUTH_DOMAIN=""
REACT_APP_DATABASE_URL=""
REACT_APP_PROJECT_ID=""
REACT_APP_STORAGE_BUCKET=""
REACT_APP_MESSAGING_SENDER_ID=""

Or

REACT_APP_API_KEY=""
REACT_APP_AUTH_DOMAIN=""
REACT_APP_DATABASE_URL=""
REACT_APP_PROJECT_ID=""
REACT_APP_STORAGE_BUCKET=""
REACT_APP_MESSAGING_SENDER_ID=""
REACT_APP_APP_ID=""
REACT_APP_MEASUREMENT_ID=""

and importing it in your React app side code

...
import firebase, { db } from "../../Firebase.js";
...

you might be getting this warning message in the console.

@firebase/app: Warning: Firebase is already defined in the global scope. Please make sure Firebase library is only loaded once.

There's a better implementation as shown in the next section, using React context and higher order components.

PreviousFirebase React contextNextFirebase React Context setup

Last updated 5 years ago

Was this helpful?