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

React Firebase Auth provides the following components :

• Setup
  • Install
  • Get your Firebase config
• Usage
  • Import firebase and firebase/auth
  • Just show me some code
  • Auth Example

• FirebaseAuthProvider
• FirebaseAuthConsumer
• IfFirebaseAuthed
• IfFirebaseAuthedAnd
• IfFirebaseUnAuthed

Setup

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

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 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.

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>