1. Introduction

Goal

This tutorial aims to guide you on integrating Google and Facebook authentication into your HTML application using Firebase Authentication.

Learning Outcomes

By the end of this tutorial, you will be able to:
- Set up social sign-in methods in Firebase
- Use Firebase SDK methods to handle Google and Facebook sign-ins

Prerequisites

Familiarity with HTML, CSS, and JavaScript is required. Basic knowledge of Firebase would be helpful but is not mandatory.

2. Step-by-Step Guide

Firebase Setup

1. Head to the Firebase website and sign in with your Google account.
2. Click on "Go to console" on the top right corner of the page.
3. Click on "Add project" and fill in your project details.

Enabling Google and Facebook Authentication

1. In Firebase console, select your project and click on "Authentication" under "Develop".
2. Go to "Sign-in method" and enable "Google" and "Facebook".

Google Setup

1. Click on "Web setup" and copy the config object.
2. Paste it into your HTML file. This will initialize Firebase.

Facebook Setup

1. Visit the Facebook for Developers page and create a new app.
2. Go to "Settings" > "Basic" and copy the App ID and App Secret.
3. Paste these into the Firebase Facebook sign-in method settings.

3. Code Examples

Google Authentication

Here's an example of how to authenticate with Google:

// Initialize Firebase
var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    // ...
};
firebase.initializeApp(config);

// Create a new instance of the Google provider
var provider = new firebase.auth.GoogleAuthProvider();

// Authenticate with Firebase using the Google provider object
firebase.auth().signInWithPopup(provider).then(function(result) {
    console.log(result.user); // This gives you a Google Access Token.
}).catch(function(error) {
    console.log(error);
});

Facebook Authentication

Here's an example of how to authenticate with Facebook:

// Initialize Firebase
var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    // ...
};
firebase.initializeApp(config);

// Create a new instance of the Facebook provider
var provider = new firebase.auth.FacebookAuthProvider();

// Authenticate with Firebase using the Facebook provider object
firebase.auth().signInWithPopup(provider).then(function(result) {
    console.log(result.user); // This gives you a Facebook Access Token.
}).catch(function(error) {
    console.log(error);
});

4. Summary

In this tutorial, we covered how to integrate Google and Facebook authentication in your HTML application using Firebase. Next, you can explore Firebase's database and storage features to expand your application's functionality.

5. Practice Exercises

Exercise 1

Try to integrate Twitter and GitHub authentication using Firebase and their respective APIs.

Exercise 2

Create a sign-out button that will log out the user from the application.

Exercise 3

Display the user's name and profile picture after successful authentication.

Remember, practice is the key to mastering any skill. Keep experimenting and learning!