Introduction

In this tutorial, we'll learn how to implement email and password sign-in functionality using Firebase Authentication. Firebase provides an easy-to-use SDK that allows us to register, authenticate, and manage users without having to worry about backend infrastructure.

By the end of this tutorial, you'll be able to:
- Set up Firebase Authentication in your project
- Use Firebase SDK methods to register users
- Authenticate users with their email and password

Prerequisites:
- Basic knowledge of JavaScript
- A Firebase project set up

Step-by-Step Guide

Setting up Firebase in Your Project

Before you can start using Firebase Authentication, you need to add Firebase to your web project. Follow the instructions on the Firebase website to get started.

Registering Users

To register a new user, we use the createUserWithEmailAndPassword(email, password) method provided by Firebase. This function takes in an email and password, and creates a new user account.

firebase.auth().createUserWithEmailAndPassword(email, password)
    .then((userCredential) => {
        // User registered successfully
        var user = userCredential.user;
    })
    .catch((error) => {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
    });

Authenticating Users

To authenticate a user, we use the signInWithEmailAndPassword(email, password) method. If the sign-in is successful, the user's information can be retrieved with firebase.auth().currentUser.

firebase.auth().signInWithEmailAndPassword(email, password)
    .then((userCredential) => {
        // User signed in
        var user = userCredential.user;
    })
    .catch((error) => {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
    });

Code Examples

Registering a New User

Here's how you can use the createUserWithEmailAndPassword(email, password) method to register a new user.

firebase.auth().createUserWithEmailAndPassword('user@email.com', 'password123')
    .then((userCredential) => {
        // The user has been registered successfully
        var user = userCredential.user;
        console.log('User registered:', user);
    })
    .catch((error) => {
        // Handle Errors here.
        console.error('Error registering user:', error);
    });

In this example, if the user is registered successfully, their information will be logged to the console. If there's an error, the error message will be logged instead.

Authenticating a User

Here's how you can use the signInWithEmailAndPassword(email, password) method to authenticate a user.

firebase.auth().signInWithEmailAndPassword('user@email.com', 'password123')
    .then((userCredential) => {
        // User is signed in
        var user = userCredential.user;
        console.log('User signed in:', user);
    })
    .catch((error) => {
        // Handle Errors here.
        console.error('Error signing in:', error);
    });

If the sign-in is successful, the user's information will be logged to the console. If there's an error, the error message will be logged instead.

Summary

In this tutorial, we learned how to use Firebase Authentication to register and authenticate users with their email and password. We used the createUserWithEmailAndPassword(email, password) method to register users, and the signInWithEmailAndPassword(email, password) method to authenticate them.

Now that you've learned how to implement email and password sign-in, you can explore other features of Firebase, such as password reset and email verification.

Practice Exercises

1. Exercise: Modify the registration code to include error handling for the case where the user tries to register with an email that's already in use.

   Solution: To handle this specific error, we can check if error.code is equal to 'auth/email-already-in-use'.

   javascript firebase.auth().createUserWithEmailAndPassword('user@email.com', 'password123') .then((userCredential) => { // User registered successfully var user = userCredential.user; console.log('User registered:', user); }) .catch((error) => { if (error.code === 'auth/email-already-in-use') { console.error('Error: The email address is already in use by another account.'); } else { console.error('Error registering user:', error); } });

2. Exercise: Modify the sign-in code to include error handling for the case where the user enters an incorrect password.

   Solution: To handle this specific error, we can check if error.code is equal to 'auth/wrong-password'.

   javascript firebase.auth().signInWithEmailAndPassword('user@email.com', 'password123') .then((userCredential) => { // User signed in var user = userCredential.user; console.log('User signed in:', user); }) .catch((error) => { if (error.code === 'auth/wrong-password') { console.error('Error: The password is invalid or the user does not have a password.'); } else { console.error('Error signing in:', error); } });