react-with-firebase-auth

Higher Order Component for integrating Firebase with a React Component

This library makes a withFirebaseAuth() function available to you.

Signature
Usage
Examples
Articles
License

Signature

type FirebaseAuthProps = {
  firebaseAppAuth: firebase.auth.Auth,
  providers?: {
    googleProvider?: firebase.auth.GoogleAuthProvider_Instance;
    facebookProvider?: firebase.auth.FacebookAuthProvider_Instance;
    twitterProvider?: firebase.auth.TwitterAuthProvider_Instance;
    githubProvider?:  firebase.auth.GithubAuthProvider_Instance;
  }
};

withFirebaseAuth<P>(authProps: FirebaseAuthProps) =>
  createComponentWithAuth(WrappedComponent: React.ComponentType<P>) =>
    React.ComponentType

Props Provided

type WrappedComponentProps = {
  signInWithEmailAndPassword: (email: string, password: string) => void;
  createUserWithEmailAndPassword: (email: string, password: string) => void;
  signInWithGoogle: () => void;
  signInWithFacebook: () => void;
  signInWithGithub: () => void;
  signInWithTwitter: () => void;
  signInWithPhoneNumber: (
    phoneNumber: string,
    applicationVerifier: firebase.auth.ApplicationVerifier,
  ) => void;
  signInAnonymously: () => void;
  signOut: () => void;
  setError: (error: string) => void;
  user?: firebase.User | null;
  error?: string;
  loading: boolean;
};

Usage

Install it:

npm install --save react-with-firebase-auth

Then use it in your components:

import * as React from 'react';
import * as firebase from 'firebase/app';
import 'firebase/auth';

import withFirebaseAuth, { WrappedComponentProps } from 'react-with-firebase-auth';

import firebaseConfig from './firebaseConfig';

const firebaseApp = firebase.initializeApp(firebaseConfig);

const firebaseAppAuth = firebaseApp.auth();

/** See the signature above to find out the available providers */
const providers = {
  googleProvider: new firebase.auth.GoogleAuthProvider(),
};

/** providers can be customised as per the Firebase documentation on auth providers **/
providers.googleProvider.setCustomParameters({
  hd: 'mycompany.com',
});

/** Create the FirebaseAuth component wrapper */
const createComponentWithAuth = withFirebaseAuth({
  providers,
  firebaseAppAuth,
});

const App = ({
  /** These props are provided by withFirebaseAuth HOC */
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  signInWithGoogle,
  signInWithFacebook,
  signInWithGithub,
  signInWithTwitter,
  signInAnonymously,
  signOut,
  setError,
  user,
  error,
  loading,
}: WrappedComponentProps) => (
  <React.Fragment>
    {
      user
        ? <h1>Hello, {user.displayName}</h1>
        : <h1>Log in</h1>
    }

    {
      user
        ? <button onClick={signOut}>Sign out</button>
        : <button onClick={signInWithGoogle}>Sign in with Google</button>
    }

    {
      loading && <h2>Loading..</h2>
    }
  </React.Fragment>
);

/** Wrap it */
export default createComponentWithAuth(App);

Examples

There are a few source code examples available:

Create React App Javascript Example: armand1m/react-with-firebase-auth/tree/master/example
Create React App Medium Example: armand1m/react-firebase-authentication-medium

You can also check a live demo example here:

https://armand1m.github.io/react-with-firebase-auth/

Articles

"How to setup Firebase Authentication with React in 5 minutes (maybe 10)"

armand1m/react-with-firebase-auth