/react-with-firebase-auth

Higher Order Component for integrating Firebase Authentication methods with a React Component through props

Primary LanguageTypeScriptMIT LicenseMIT

react-with-firebase-auth

NPM JavaScript Style Guide Build Status codecov bundlephobia bundlephobia devdependencies peerdependencies Greenkeeper badge

Higher Order Component for integrating Firebase with a React Component

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

Signature

type HocParameters = {
  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(props: HocParameters): HigherOrderComponent

Usage

Install it first using NPM:

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 App = ({
  /** These props are provided by withFirebaseAuth HOC */
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  signInWithGoogle,
  signInWithFacebook,
  signInWithGithub,
  signInWithTwitter,
  signInAnonymously,
  signOut,
  setError,
  user,
  error,
}: 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>
    }
  </React.Fragment>
);

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"});

/** Wrap it */
export default withFirebaseAuth({
  providers,
  firebaseAppAuth,
})(App);

Examples

There are a few source code examples available:

You can also check a live demo example here:

Articles

License

MIT © Armando Magalhaes