Skip to content
Branch: master
Find file History

README.md

React Firebase Hooks - Auth

React Firebase Hooks provides a convenience listener for Firebase Auth's auth state. The hook wraps around the firebase.auth().onAuthStateChange() method to ensure that it is always up to date.

All hooks can be imported from react-firebase-hooks/auth, e.g.

import { useAuthState } from 'react-firebase-hooks/auth';

List of Auth hooks:

useAuthState

const [user, loading, error] = useAuthState(auth);

Retrieve and monitor the authentication state from Firebase.

The useAuthState hook takes the following parameters:

  • auth: firebase.auth.Auth instance for the app you would like to monitor

Returns:

  • user: The firebase.User if logged in, or undefined if not
  • loading: A boolean to indicate whether the the authentication state is still being loaded
  • error: Any firebase.auth.Error returned by Firebase when trying to load the user, or undefined if there is no error

Full Example

import { useAuthState } from 'react-firebase-hooks/auth';

const CurrentUser = () => {
  const [user, initialising, error] = useAuthState(firebase.auth());
  const login = () => {
    firebase.auth().signInWithEmailAndPassword('test@test.com', 'password');
  };
  const logout = () => {
    firebase.auth().signOut();
  };

  if (initialising) {
    return (
      <div>
        <p>Initialising User...</p>
      </div>
    );
  }
  if (error) {
    return (
      <div>
        <p>Error: {error}</p>
      </div>
    );
  }
  if (user) {
    return (
      <div>
        <p>Current User: {user.email}</p>
        <button onClick={logout}>Log out</button>
      </div>
    );
  }
  return <button onClick={login}>Log in</button>;
};
You can’t perform that action at this time.