React Firebase
  • React Firebase
  • React Firebase Realtime Database
    • Setup
    • Usage
    • API
  • React Firebase Auth
    • Setup
    • Usage
    • API
  • React Firestore Database
    • Setup
    • Usage
    • API
  • Generate Firebase Data
    • Setup
    • Usage
  • Generate Firestore Data
    • Setup
    • Usage
  • Generate JSON Data
    • Setup
    • Usage
  • Guides
    • Build a React App with Firebase Auth and Realtime Database
      • Setup the development environment
      • Add React and React DOM
      • Add Firebase
      • Listen to auth
      • Adding Google and Anonymous Auth
      • Adding Data to your Realtime Database
      • Implementing the UI
      • Writing Data
      • Read Data
  • View Source
Powered by GitBook
On this page
  1. Guides
  2. Build a React App with Firebase Auth and Realtime Database

Add Firebase

PreviousAdd React and React DOMNextListen to auth

Last updated 6 years ago

Install the JS client.

yarn add firebase
# Or 
npm i firebase

Change PROJECT_NAME to your project name and grab your firebase config here :

https://console.firebase.google.com/project/PROJECT_NAME/settings/general/

Your config file should look something like this :

src/test-credentials.ts
// Firebase Config
export const config = {
  apiKey: "API_KEY",
  projectId: "PROJECT_ID",
  databaseURL: "DATABASE_URL",
  authDomain: "AUTH_DOMAIN",
  // OPTIONAL
  storageBucket: "STORAGE_BUCKET",
  messagingSenderId: "MESSAGING_SENDER_ID"
};

In the example repo this file is located in src/test-credentials.ts but you won't be able to find it because it's added to the .gitignore

Make sure you do the same if your repository is public.

Git Commit

firebase