Using React Hooks with Firebase Authentication

If you are a React developer, and unless you have been living under a rock for the past year, you will be familiar with Context, Reducers, and Hooks. Sure, these are usually just called "Hooks" or "custom hooks". Hooks give the developer two advantages over the old-school method of class-based components. These are:

• Ability to build an entire application using function components, and
• Elimination of the need for Redux.

Functional components make the code more concise and readable. They also provide a fairly significant performance boost over classes. As for Redux. Well. Good riddance.

Armed with hooks I decided that my next React project would be written entirely with functions and hooks. And this approach worked great until I needed to wire up Firebase Authentication. I discovered that the tutorials available provided examples using class-based components. This article then, is my attempt to fill that gap with my notes on using Hooks with Firebase Authentication.

Here are the things I had to build.

• A "context" with a "context provider",
• A "reducer",
• A custom hook that uses an Effect hook,
• Helper functions to interact with Firebase, and
• All the JSX to make it work.

The Reducer

Let's start by writing a Reducer. That might seem a bit backward as I typically begin with my Context. But since the Reducer is referenced by the Context, I'll start with the Reducer. The reducer is used to make changes to the state of the properties managed by the Context. If all this sounds like jargon (which it is), then I suggest reading up on React Hooks; especially useContext, useReducer, and useEffect. I'd love to explain all that here, but well, this article will be very long as it is.

The Reducer and the Context will be supporting Firebase Authentication. I should mention here that I am using the Authentication SDK and not the drop-in UI. I should also mention that I am only describing email based authentication. The properties of a "user" in Firebase are:

• Name, which is the "display name" of the user. The display name is usually the user's full name.
• Email, an email address the user is treating as her id.
• PhotoURL, a URL to an image the user has uploaded for their avatar.
• EmailVerified, a boolean value that indicates the user responded to a verification message.
• Uid, which is a global unique identifier assigned by Firebase to the user.

Reducers contain logic for adding, removing, or manipulating the Context's data. In this case though, the user data is managed by Firebase via its' SDK. All our reducer needs to do is assure that the context is current. I created a file named SessionReducer.js and included the code below.

    export const SessionReducer = (state, action) => {
        switch (action.type) {
          case "UPDATE":
            return {
              name: action.session.name,
              email: action.session.email,
              photourl: action.session.photourl,
              emailVerified: action.session.emailVerified,
              uid: action.session.uid
            };
          default:
            return state;
        }
      };

The action.type property is part of the Reducer specification. So the Reducer is passed the state and an action object and returns the new value of the state. In this case, we will only take one action that I have set to "UPDATE". The value UPDATE, by-the-way, is a discresionary name set by the developer. Also note that I do not need any import statements here.

The Context

The Context is a bit bigger and contains a couple of functions. I'll show the code and then describe it. I created a file named SessionContext.js and included the code below.

    // React imports
    import React, { createContext, useReducer, useContext, useEffect } from "react";
    
    // Firebase imports
    import firebase from "../firebase";
    
    // My imports
    import { SessionReducer } from "../reducers/SessionReducer";
    
    // initial state values
    const initialState = {
      name: null,
      email: null,
      photourl: null,
      emailVerified: false,
      uid: null
    };
    
    // create the context
    export const SessionContext = createContext();
    
    // create the context provider
    const SessionContextProvider = props => {
      const [session, dispatch] = useReducer(SessionReducer, initialState);
      return (
        
          {props.children}
        
      );
    };
    
    // create the custom hook
    export const useSession = () => {
      const contextState = useContext(SessionContext);
      const { dispatch } = contextState;
      useEffect(() => {
        firebase.auth().onAuthStateChanged(user => {
          var currentUser = {};
          if (user) {
            currentUser = {
              name: user.displayName,
              email: user.email,
              photourl: user.photoURL,
              emailVerified: user.emailVerified,
              uid: user.uid
            };
          } else {
            currentUser = initialState;
          }
          dispatch({
            type: "UPDATE",
            session: currentUser
          });
        });
      }, [dispatch]);
      return contextState;
    };
    
    export default SessionContextProvider;    

Notice near the top of the code I have included an import of the Reducer shown earlier. I have not described the structure of my application but suffice to say that my Contexts and Reducers each reside in folders made for that purpose. You can organize your source files any way you like.

Following the imports, I create and export the SessionContext using React's API for that purpose. It's one line of code that requires no parameters. Next I have a few lines of code to create the "Context Provider". This is a small amount of code that includes JSX that ties the context to components in the application. React has two methods for this: Provider and Consumer, but since I am using functional components exclusively I must use the Provider method.

The Provider binds the Reducer to the Context. In this code I use the useReducer function to deconstruct its' return value into the "session" and the "dispatch". The session is the current state and the dispatch is the function I supplied when I wrote the Reducer. These values are passed as props (via HTML attributes) to the provider context. The {props.children} value assures that this context provider will be available to all children components to the component where it is used. I should also mention that the provider context is just another component. In my case, the context provider is my default exported function.

The Custom Hook

The last function creates the custom hook. By convention the names of hooks start with "use" in lower case; i.e. useContext, useReducer, or in my case useSession. The custom hook first retrieves data from this context, which is the state and the dispatch function, and stores it in contextState. The dispatch function is deconstructed out of the contextState. For my purpose here, I will not need the actual values of the state.

The work of this custom hook is accomplished within a useEffect function. If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate , and componentWillUnmount combined. In this case, whenever a component that uses our hook is rendered, a call is made to the Firebase onAuthStateChanged method. That method is passed a function that checks the state of the current Firebase user. If the user exists then the Firebase used is passed to the dispatch function, otherwise the initial state of the user (which is null) is passed to dispatch.

Wiring it up

The rest is simply writing the custom hook into the app. In this case I wanted to make the hook available to the entire application. To accomplish this I added my context provider to the app.js main code file.

    // React imports
    import React from "react";
    import { BrowserRouter, Switch, Route } from "react-router-dom";
    
    // Material UI imports
    import { MuiThemeProvider, useTheme } from "@material-ui/core/styles";
    import CssBaseline from "@material-ui/core/CssBaseline";
    import Box from "@material-ui/core/Box";
    import Container from "@material-ui/core/Container";
    
    // My imports
    import Dashboard from "./components/dashboard/Dashboard";
    import AppHeader from "./components/layout/AppHeader";
    import HomeDetail from "./components/houses/HomeDetail";
    import SignIn from "./components/auth/SignIn";
    import SignUp from "./components/auth/SignUp";
    import HouseContextProvider from "./contexts/HouseContext";
    import SessionContextProvider from "./contexts/SessionContext";
    import LaunchPage from "./components/dashboard/LaunchPage";
    
    const App = () => {
      const theme = useTheme();
    
      return (
        <BrowserRouter>
          <SessionContextProvider>
            <MuiThemeProvider theme={theme}>
              <HouseContextProvider>
                <CssBaseline />
                <AppHeader />
                <Container maxWidth="xl">
                  <Box m={3}>
                    <Switch>
                      <Route path="/" exact component={LaunchPage} />
                      <Route path="/dashboard" component={Dashboard} />
                      <Route path="/homes/:id" component={HomeDetail} />
                      <Route path="/signin" component={SignIn} />
                      <Route path="/signup" component={SignUp} />
                    </Switch>
                  </Box>
                </Container>
              </HouseContextProvider>
            </MuiThemeProvider>
          </SessionContextProvider>
        </BrowserRouter>
      );
    };
    
    export default App;

In this file there are just a couple of lines to point out. First is the import of the SessionContextProvider. And the others are the JSX SessionContextProvider tags.

To signup a new user bind the function below to your form submission handler.

...
import { signup } from "../../services/firebaseAuth";
...
// form actions
const handleSubmit = e => {
  e.preventDefault();
  enroll();
};

// firebase signup function
const enroll = () => {
  const results = validate(
    {
      email: email,
      password: password,
      firstName: firstName,
      lastName: lastName,
      confirmedPwd: confirmedPwd
    },
    {
      email: constraints.email,
      password: constraints.password,
      firstName: constraints.firstName,
      lastName: constraints.lastName,
      confirmedPwd: constraints.confirmedPwd
    }
  );

  if (results) {
    setErrors(results);
  } else {
    setErrors(null);
    signup(email, password);
  }
};

A couple of points about the code above. First, the validate function it its' constraints are out of the scope of this article. If anyone reads this, and someone asks about validate then I will consider writing another post to describe that function. And second, there is a helper function signup that I show a bit later.

Signing in is similar.

...
import { SessionContext, useSession } from "../../contexts/SessionContext";
import { signin } from "../../services/firebaseAuth";
    
const SignIn = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [errors, setErrors] = useState();
const { session } = useSession(SessionContext);
const handleSubmit = e => {
  e.preventDefault();
  authenticate();
};

// firebase signin function
const authenticate = () => {
const results = validate(
    {
      email: email,
      password: password
    },
    {
      email: constraints.email,
      password: constraints.password
    }
  );
 
  if (results) {
    setErrors(results);
  } else {
    setErrors(null);
    signin(email, password);
  }
};
...

Again, the signin function is shown later. And lastly I sign out with a link button on my AppBar that executes the signout fuction (and yes, the function must be imported).

    ...
    <button color="inherit" component="{Link}" onclick="{signout}" to="/">
        Sign Out
    </button>
    ...

Firebase

The final pieces of the puzzle are the supporting functions that call out to Firebase. These are the signup, signin, and signout functions mentioned above. I organized the functions into a single source code file. For purposes of this paper, these functions were copied directly from the Firebase documentation website and do not incude any of my application specific code. I created the file firebaseAuth.js for this. The code is below.

    // Firebase imports
    import firebase from "../firebase";
    
    export const signup = (email, password) => {
      firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .catch(error => {
          // Handle Errors here.
          alert("Error during sign up " + error.message); // delete this!
          var errorCode = error.code;
          var errorMessage = error.message;
          if (errorCode === "auth/weak-password") {
            alert("The password is too weak.");
          } else {
            alert(errorMessage);
          }
          console.log(error);
        });
    };
    
    export const signin = (email, password) => {
      firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .catch(function(error) {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          if (errorCode === "auth/wrong-password") {
            alert("Wrong password.");
          } else {
            alert(errorMessage);
          }
          console.log(error);
        });
    };
    
    export const signout = () => {
      firebase
        .auth()
        .signOut()
        .then(function() {
          // Sign-out successful.
        })
        .catch(function(error) {
          console.log(error);
        });
    };

So the next person who needs to implement Firebase Authentication with React Hooks now has some reference material to start with. Questions and comments are welcome.