Firebase 9 Auth → Log In/Sign In A User With Email And Password [2023]

In this Firebase 9 (the latest version)Authentication tutorial, learn how to log in/sign in a user using the signInWithEmailAndPassword() method.

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

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

The signInWithEmailAndPassword() method allows you to authenticate or log in to an existing user account stored on the Firebase Authentication Backend using email and password credentials.

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.

I also assume that you’ve already created a brand new user account on the Firebase Authentication backend.

2. Import getAuth & signInWithEmailAndPassword Methods

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

import {
  getAuth,
  signInWithEmailAndPassword,
} 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();

3. Create a Sign-in Form

Typically, you will want to call the signInWithEmailAndPassword() method when a user submits the login/sign-in form by providing the email and password credentials.

First, create a simple log-in / sign-in form.

<form>
   <input type="email" id="email" placeholder="Email"/>
   <input type="password" id="password" placeholder="Password"/>
   <button id="login-btn">Login</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 loginBtn = document.getElementById("login-btn");

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

const loginButtonPressed = (e) => {
  e.preventDefault();
  console.log("Login Button Pressed");
}

loginBtn.addEventListener("click", loginButtonPressed);

4. Call createUserWithEmailAndPassword() Method

Inside the loginButtonPressed function, call the signInWithEmailAndPassword() method.

const loginButtonPressed = (e) => {
  e.preventDefault();
  signInWithEmailAndPassword();
};

The signInWithEmailAndPassword() 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 loginButtonPressed = (e) => {
  e.preventDefault();
  signInWithEmailAndPassword(auth, email.value, password.value);
};

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

So add the await/async keywords to it.

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

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

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

If everything goes well, you should be able to see a currently logged-in user object in the browser’s developer console.