Creating an Authentication Form using React Hook Form, React and Firebase.

In this tutorial , we’ll be setting up our own Firebase project through the Firebase Console to setup user registration and authentication in our React application. Firebase simplifies the process of user authentication by providing all necessary functions and SDK to be integrated in your project and allowing you to focus on other parts of the development process.

Let’s get started by creating our application using Create React App and installing the Firebase, managing User State with React Context API and React Router dependencies by running the following commands but make sure you have the necessary requirements for authenticating with Firebase in React

• Node.js installed
• Code editor ( Visual Studio Code preferably )
• Google account which will be to used in Firebase
• Basic knowledge of React

npm installations for the project and react-form-auth is the folder name.

Create a Firebase account and add a “New Project”.

Follow the provided prompts to complete the setup and you’ll end up here:

To add Firebase to your app use the web option (</>).

To complete the Firebase setup we need to specify an authentication method. There are quite a number of options of methods available but for this tutorial we’ll be using the email and password method. Navigate to “Authentication” -> “Sign-in Method” and change the “Email/Password” status setting to “Enabled”.

Firebase config

Create a new file in the following location — src/firebase.js.

This file import’s the Firebase SDK and contains the Firebase configuration settings and setting all inputs into your .env file with the standard variable names for secured purposes:

Copy these setting from “Project Settings” - “General” in the Firebase console.

Register users using React-hook-form

Create a new file in the following location — src/components/Register.js.

This component contains a sign up form so users can create accounts using react-hook-form:

To install React Hook Form, run the following command:

npm install react-hook-form

First, import the useForm Hook from the installedreact-hook-form package:

import { useForm } from "react-hook-form";

Then, inside your component, use the Hook as follows to validate errors, submit data and register:

const { handleSubmit, formState: { errors }, trigger, register, watch } = useForm();

To apply validations to a field in the form input, you can pass validation parameters to the register method. Validation parameters are similar to the existing HTML form validation standard.

These validation parameters include the following properties:

• required indicates if the field is required or not. If this property is set to true, then the field cannot be empty
• minlength and maxlength set the minimum and maximum length for a string input value
• min and max set the minimum and maximum values for a numerical value
• type indicates the type of the input field; it can be email, number, text, or any other standard HTML input types
• pattern defines a pattern for the input value using a regular expression

Now lets collect data and register with firebase

Managing User State with React Context API

Context API is a way to share data with components at any level of the React component tree without having to pass it down as props. Since a user might be required by a different component in the tree, using the Context API is great for managing the user state.

Before we start using the Context API, there are a few things we need to set up:

• Create a context object using the createContext() method
• Pass the components we want to share the user state with as children of Context.Provider
• Pass the value we want the children/consuming component to access as props to Context.Provider

Let’s get to it. In the src directory, create an AuthContext.js file and add the following lines of code to it:

Create a new file in the following location — src/components/Login.js.

This component contains the log in form so users can sign into their account:

If the current user is already logged in they’ll get redirected to the home page. Otherwise we capture the form input on submit and send the details to the Firebase Authentication signInWithEmailAndPassword method.

Home page

Create a new file in the following location — src/components/Home.js.

This component contains content that can only be viewed by authenticated users:

If this page is accessed by a non-authenticated user the browser will re-direct to the login page. If the user is authenticated we display the private content. We’ve also included a button so users can sign out of their account.

Pulling it all together in App.js

Modify the App.js file to include the following:

You can now run npm start to start the application and test out the registration and authentication process. Once the sign up form has been submitted you can browse to “Authentication” - “Users” in the Firebase console to confirm registration was successful and manage user accounts.

You now know how to authenticate users in your React applications using Firebase. If you would like to learn more about Firebase Authentication, I’d suggest checking out the official guide.

Conclusion

In this tutorial, we have learned how to use of the Firebase Authentication to build user registration and authentication service in React using React Hook Form for form validation.

References

• Get Started with Firebase Authentication on Websites (Firebase documentation)
• Form Validation using React Hook Form (React Hook Form documentation)
• Manage Users in Firebase (Firebase Users documentation)
• Managing User State with React Context API