Higher Order Component for integrating Firebase with a React Component
This library makes a withFirebaseAuth() function available to you.
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.ComponentTypetype 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;
};Install it:
npm install --save react-with-firebase-authThen 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);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:
MIT © Armando Magalhaes
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent