Google Authentication with Firebase

Google Authentication is a secure way for users to log in using their existing Google accounts. With Firebase, developers can easily integrate this authentication into their apps, removing the need for separate usernames and passwords. It ensures both simplicity for users and strong security for applications.

• Enable Google Sign-In in Firebase Console under Authentication - Sign-in method.
• Add Firebase SDK to your app and configure it with your project settings.
• Use GoogleAuthProvider with signInWithPopup or signInWithRedirect to let users log in.
• Get Firebase ID Token (JWT) after login, which can be verified on backend for secure access.

Setting Up Firebase Project

Before understanding the implementation, we will need to set up a Firebase project and integrate it into your app. Follow these steps:

• Create a Firebase Project: Go to the Firebase Console (console.firebase.google.com) and create a new project, and follow the setup instructions.
  
• Add Firebase to Your App: For web or mobile apps, add Firebase to our project by including the Firebase SDK. Firebase provides platform-specific SDKs and setup instructions for various platforms.

Implementing Google Authentication

Step 1: Adding Google Authentication to Your App

For a web app, include Firebase and Google SDKs in our HTML file:

<!-- Firebase App (the core Firebase SDK) -->
<script src="/https://www.gstatic.com/firebasejs/9.6.4/firebase-app.js"></script>

<!-- Firebase Auth (specifically for authentication) -->
<script src="/https://www.gstatic.com/firebasejs/9.6.4/firebase-auth.js"></script>

<!-- Firebase UI for Google Authentication -->
<script src="/https://cdn.jsdelivr.net/npm/firebaseui@5.1.2/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="/https://cdn.jsdelivr.net/npm/firebaseui@5.1.2/dist/firebaseui.css" />

Explanation:

• This code snippet initializes Firebase and the Google Authentication provider in a web application. The firebaseConfig object contains the configuration information required to initialize Firebase, including the API key, authentication domain, project ID and app ID.
  
• The firebase.initializeApp(firebaseConfig) function initializes Firebase using the provided configuration. The googleAuthProvider variable creates a new instance of the GoogleAuthProvider class from the Firebase Auth module, which is used for Google sign-in authentication

Step 2: Initialize Firebase and Set Up Google Authentication

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Create a Google provider instance
const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

Explanation:

• This code initializes Firebase with the provided configuration (firebaseConfig), including the API key, authentication domain, project ID, and app ID. It sets up Firebase in the application using firebase.initializeApp(firebaseConfig).
  
• Additionally, it creates a new instance of the GoogleAuthProvider class from the Firebase Auth module, which is used for Google sign-in authentication, and stores it in the googleAuthProvider variable for later use in the authentication process.

Step 3: Implementing Google Sign-In

function signInWithGoogle() {
  firebase.auth().signInWithPopup(googleAuthProvider)
    .then((userCredential) => {
      // Signed in successfully
      const user = userCredential.user;
      console.log(user);
    })
    .catch((error) => {
      console.error(error.message);
    });
}

Explanation:

• This function signInWithGoogle is used to sign in a user using Google authentication. It uses the signInWithPopup method from the firebase.auth() object to initiate the Google sign-in process.
  
• If the sign-in is successful, it logs the user object to the console, which contains information about the signed-in user. If there is an error during the sign-in process, it logs the error message to the console.

Step 4: Handling User Authentication State

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in
    console.log("User is signed in");
  } else {
    // No user is signed in
    console.log("No user is signed in");
  }
});

Explanation:

• This code sets up a listener for authentication state changes in Firebase. When the authentication state changes (i.e., a user signs in or signs out), the provided callback function is called with the current user object.
  
• If a user is signed in (if (user)), it logs "User is signed in" to the console. If no user is signed in (else), it logs "No user is signed in" to the console.
  
• This listener is useful for updating the UI based on the user's authentication state, such as showing different content or navigation options for authenticated and unauthenticated users

Example: Google Authentication in Action

Let's consider a simple web application where users can sign in using their Google accounts.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Firebase Auth with Google</title>
</head>
<body>
  <h1>Sign In with Google</h1>
  
  <button onclick="signInWithGoogle()">Sign In with Google</button>

  <script src="https://www.gstatic.com/firebasejs/9.6.4/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.4/firebase-auth.js"></script>
  <script>
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      projectId: "YOUR_PROJECT_ID",
      appId: "YOUR_APP_ID"
    };

    firebase.initializeApp(firebaseConfig);

    const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

    function signInWithGoogle() {
      firebase.auth().signInWithPopup(googleAuthProvider)
        .then((userCredential) => {
          const user = userCredential.user;
          console.log(user);
        })
        .catch((error) => {
          console.error(error.message);
        });
    }
  </script>
</body>
</html>

Output:

Explanation

• In the above HTML code sets up a basic web page for signing in with Google using Firebase Authentication. It includes a button that, when clicked, triggers the signInWithGoogle function. This function uses the signInWithPopup method from the Firebase Authentication SDK to initiate the Google sign-in process.
  
• If the sign-in is successful, the user object is logged to the console, which contains information about the signed-in user. If there is an error during the sign-in process, the error message is logged to the console.