Firebase 9 Auth → Create User With Email And Password [2023]

The createUserWithEmailAndPassword() is one of the 4 important methods that the Firebase Authentication SDK offers to build a user authentication system in minutes.

1. createUserWithUserNameAndPassword() → you’re here
2. onAuthStateChanged()
3. signInWithEmailAndPassword()
4. signOut()

The createUserWithEmailAndPassword() method allows you to create a new user account with email and password on the Firebase Authentication Backend directly from the front-end web app.

1. Initialize Firebase SDK To Your Web App

Before going any further, I assume that you already know how to create a Firebase project as well as how to add the Firebase SDK to your web app.

2. Enable Email/ Password Sign-in Method

1. Go to console.firebase.google.com and choose a Firebase project
2. Choose Build → Authentication from the sidebar of the project dashboard
3. Select the Sign-in method tab from the top
4. Click on Email/Password under Native providers
5. Enable Email/Password by turning on the toggle switch and hit Save.

3. Import getAuth & createUserWithEmailAndPassword Methods

Import the Firebase Authentication SDK library via either NPM or CDN (I use CDN in the below example) and destructure the getAuth() and createUserWithEmailAndPassword() methods.

import {
  getAuth,
  createUserWithEmailAndPassword,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";

In order to implement any of the Firebase Authentication methods, first we need to create an instance of an authentication object.

const auth = getAuth();

4. Create Sign Up Form

Typically, you will want to call the createUserWithEmailAndPassword() method when a user submits the sign-up form.

First, create a simple sign-up form.

<form>
   <input type="email" id="email" placeholder="Email"/>
   <input type="password" id="password" placeholder="Password"/>
   <button id="signup-btn">Create Account</button>
</form>

Next, create DOM references for the email, password, and button input elements.

const email = document.getElementById("email");
const password = document.getElementById("password");
const signUpBtn = document.getElementById("signup-btn");

Then attach a click event with the callback function signUpButtonPressed to the sign-up button.

const signUpButtonPressed = (e) => {
  e.preventDefault();
  console.log("Sign Up Button Pressed");
}

signUpBtn.addEventListener("click", signUpButtonPressed);

5. Call createUserWithEmailAndPassword() Method

Inside the signUpButtonPressed function, call the createUserWithEmailAndPassword() method

const signUpButtonPressed = (e) => {
  e.preventDefault();
  createUserWithEmailAndPassword();
};

The createUserWithEmailAndPassword() method takes three arguments

1. auth: Authentication object that I’ve already declared above
2. email.value: The value of the email input field
3. password.value: Value of the password input field

const signUpButtonPressed = (e) => {
  e.preventDefault();
  createUserWithEmailAndPassword(auth, email.value, password.value);
};

The createUserWithEmailAndPassword() method is an asynchronous method that can be either fulfilled or rejected.

So add the await/async keywords to it.

const signUpButtonPressed = async(e) => {
  e.preventDefault();
  const userCredential = await createUserWithEmailAndPassword(auth, email.value, password.value);
};

To capture any errors, wrap the createUserWithEmailAndPassword() method with a try-catch block.

try {
    const userCredential = await createUserWithEmailAndPassword(
      auth,
      email.value,
      password.value
    );
    console.log(userCredential);
  } catch (error) {
    console.log(error.code);
  }

If everything goes well, you should see a brand new user account on the Firebase Authentication back-end.