Higher Order Component for integrating Firebase with a React Component
This library makes a withFirebaseAuth()
function available to you.
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
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);
There are a few source code examples available:
You can also check a live demo example here:
MIT © Armando Magalhaes