sidebar_label: Getting Started

Easily integrate Firebase Authentication in your react(-native) app.

React Firebase Auth provides the following components :

Components

  • FirebaseAuthProvider
  • FirebaseAuthConsumer
  • IfFirebaseAuthed
  • IfFirebaseAuthedAnd
  • IfFirebaseUnAuthed

Setup

Install

If you haven't, install the firebase JS client.

yarn add firebase
# Or
npm i firebase

Install @react-firebase/auth

yarn add @react-firebase/auth # or npm i @react-firebase/auth

Get your Firebase config

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 :

// Firebase Config
const config = {
  apiKey: "API_KEY",
  projectId: "PROJECT_ID",
  databaseURL: "DATABASE_URL",
  authDomain: "AUTH_DOMAIN",
  // OPTIONAL
  storageBucket: "STORAGE_BUCKET",
  messagingSenderId: "MESSAGING_SENDER_ID"
};

Usage

Import firebase and firebase/auth

import firebase from "firebase/app";
import "firebase/auth";

Place a FirebaseAuthProvider component at the top level of your app. ( anywhere as long as it's above the other Auth components ). Then use any of the other components anywhere in your component tree.

Just show me some code

FirebaseAuthProvider

<FirebaseAuthProvider firebase={firebase} {...config}>
  {
    // my app code
  }
</FirebaseAuthProvider>

FirebaseAuthConsumer

<FirebaseAuthConsumer>
  {({ isSignedIn, user, providerId }) => {
    return (
      <pre style={{ height: 300, overflow: "auto" }}>
        {JSON.stringify({ isSignedIn, user, providerId }, null, 2)}
      </pre>
    );
  }}
</FirebaseAuthConsumer>

IfFirebaseAuthedAnd

<IfFirebaseAuthedAnd
  filter={({ providerId, user }) => {
    if(!user.email){return false;}
    return (
      providerId !== "anonymous" &&
      user.email.indexOf("@companyname.com") > -1
    );
  }}
  >
 {({ isSignedIn, user, providerId }) => {
   return (
   //some jsx code
   );
 }}
</IfFirebaseAuthedAnd>

Auth Example