https://github.com/armand1m/react-with-firebase-auth
Higher-Order Component for integrating Firebase Authentication methods with a React Component through props
https://github.com/armand1m/react-with-firebase-auth
authentication firebase firebase-auth higher-order-component react
Last synced: 4 days ago
JSON representation
Higher-Order Component for integrating Firebase Authentication methods with a React Component through props
- Host: GitHub
- URL: https://github.com/armand1m/react-with-firebase-auth
- Owner: armand1m
- License: mit
- Created: 2018-10-16T00:44:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T05:28:01.000Z (almost 3 years ago)
- Last Synced: 2025-11-27T09:57:15.558Z (2 months ago)
- Topics: authentication, firebase, firebase-auth, higher-order-component, react
- Language: TypeScript
- Homepage: https://armand1m.github.io/react-with-firebase-auth/
- Size: 10.8 MB
- Stars: 132
- Watchers: 2
- Forks: 32
- Open Issues: 46
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-with-firebase-auth
[](https://www.npmjs.com/package/react-with-firebase-auth) [](https://standardjs.com)
[](https://travis-ci.org/armand1m/react-with-firebase-auth)
[](https://codecov.io/gh/armand1m/react-with-firebase-auth)
[](https://bundlephobia.com/result?p=react-with-firebase-auth)
[](https://bundlephobia.com/result?p=react-with-firebase-auth)
[](https://david-dm.org/armand1m/react-with-firebase-auth?type=dev)
[](https://david-dm.org/armand1m/react-with-firebase-auth?type=peer) [](https://greenkeeper.io/)
> Higher Order Component for integrating Firebase with a React Component
This library makes a `withFirebaseAuth()` function available to you.
- [Signature](#signature)
- [Usage](#usage)
- [Examples](#examples)
- [Articles](#articles)
- [License](#license)
## Signature
```ts
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
(authProps: FirebaseAuthProps) =>
createComponentWithAuth(WrappedComponent: React.ComponentType
) =>
React.ComponentType
```
## Props Provided
```ts
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:
```bash
npm install --save react-with-firebase-auth
```
Then use it in your components:
```tsx
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) => (
{
user
?
Hello, {user.displayName}
: Log in
}
{
user
? Sign out
: Sign in with Google
}
{
loading &&
Loading..
}
);
/** 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](https://github.com/armand1m/react-with-firebase-auth/tree/master/example)
- Create React App Medium Example: [armand1m/react-firebase-authentication-medium](https://github.com/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)"](https://medium.com/firebase-developers/how-to-setup-firebase-authentication-with-react-in-5-minutes-maybe-10-bb8bb53e8834)
## Stargazers
[](https://starchart.cc/armand1m/react-with-firebase-auth)
## License
MIT © [Armando Magalhaes](https://github.com/armand1m)