Introduction

In this tutorial, we will guide you through the process of setting up Firebase Authentication in your HTML application. Firebase Authentication allows you to handle user authentication on your web applications in an easy and secure manner.

By the end of this tutorial, you will learn:

1. How to integrate Firebase SDK into your web application
2. How to initialize the Firebase Authentication service
3. How to manage user sign-up and login

Prerequisites:

1. Basic knowledge of HTML, CSS and JavaScript
2. Google account to access Firebase

Step-by-Step Guide

Step 1: Creating a Firebase Project

Before integrating Firebase SDK into your web application, you need to create a Firebase project. Go to the Firebase website and sign in with your Google account. Click on "Go to console" at the top right, then click on "Create a project".

Step 2: Adding an App to Your Project

After creating the project, click on the web icon to add a web app to your project. Firebase will provide the necessary configuration details which we will use in the next step.

Step 3: Integrating Firebase SDK

In your HTML file, add the following script tags just before the closing body tag </body>. Replace 'YOUR CONFIGURATION' with the configuration details from step 2.

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = 'YOUR CONFIGURATION';

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

Code Examples

Example 1: User Sign-Up

In this example, we will create a sign-up form and use Firebase to handle user registration.

<form id="sign-up-form">
  <input type="email" id="email" placeholder="Email">
  <input type="password" id="password" placeholder="Password">
  <button type="submit">Sign Up</button>
</form>

<script>
  document.getElementById('sign-up-form').addEventListener('submit', function(e) {
    e.preventDefault();

    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;

    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // Sign up successful
        var user = userCredential.user;
        console.log('Sign Up Successful: ', user);
      })
      .catch((error) => {
        // Error occurred
        console.log('Error: ', error.message);
      });
  });
</script>

Example 2: User Login

In this example, we will create a login form and use Firebase to handle user authentication.

<form id="login-form">
  <input type="email" id="email" placeholder="Email">
  <input type="password" id="password" placeholder="Password">
  <button type="submit">Login</button>
</form>

<script>
  document.getElementById('login-form').addEventListener('submit', function(e) {
    e.preventDefault();

    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // Login successful
        var user = userCredential.user;
        console.log('Login Successful: ', user);
      })
      .catch((error) => {
        // Error occurred
        console.log('Error: ', error.message);
      });
  });
</script>

Summary

In this tutorial, we learned how to integrate Firebase SDK into a web application and initialize Firebase Authentication. We also learned how to handle user sign-up and login using Firebase Authentication.

For further learning, you can explore how to handle password reset and email verification using Firebase Authentication.

Practice Exercises

1. Create a sign-up form that includes fields for first name, last name, email, and password. Use Firebase to store the user's information after successful registration.

2. Create a login form and use Firebase to authenticate the user. After successful login, display a welcome message that includes the user's name.

3. Add functionality to your login form to handle cases where the user forgets their password. Use Firebase to send a password reset email.

Remember to practice regularly and experiment with different features of Firebase Authentication to become more proficient. Happy coding!