Search⌘ K
AI Features
Home
Courses
Integrating Firebase with React

Sign-Up Form Validation

Understand how to implement user sign-up form validation in a React app integrated with Firebase. This lesson covers enabling form submission only when criteria are met, managing local state for input fields, handling form submission with Firebase authentication APIs, and displaying error messages. By the end, you'll be able to create secure and user-friendly registration forms connected to Firebase backend services.

We'll cover the following...

In the last lesson, we were almost done with the sign-up form of our application.

One piece in the form is missing: validation. Let’s use an isInvalid boolean to enable or disable the submit button.

Node.js
...
class SignUpForm extends Component {
  ...
  render() {
    const {
      username,
      email,
      passwordOne,
      passwordTwo,
      error,
    } = this.state;
    const isInvalid =
      passwordOne !== passwordTwo ||
      passwordOne === '' ||
      email === '' ||
      username === '';
    return (
      <form onSubmit={this.onSubmit}>
        <input
        ...
        <button disabled={isInvalid} type="submit">
          Sign Up
        </button>
        {error && <p>{error.message}</p>}
      </form>
    );
  }
}
...

Sign-Up Criteria

The user is only allowed to sign up if :

  • both passwords are the same;

  • the username, email and at least one password are filled with a string. ...