Using Firebase Google Authentication in your web projects

Firebase is a pretty great tool to build applications without having to worry about an infrastructure. It allows you to manage a multitude of aspects that would normally take many hours to implement such as authentication, databases, storage, monitoring and so on.
This short blog post will cover how to add Google authentication to any web project in a matter of minutes.

Step 1: Create and set up your Firebase project

Head to the Firebase console and create your new project, input the necessary information such as the project's name and your location (no need to touch your project's ID).

Once this is done and your project has been created, you'll find yourself on your project's overview. Click on the following button

Which will display your project's configuration, including its API key, ID etc.

Copy this information, you'll need it to initialize your Firebase app. To do so, you must simply call the initializeApp method with your configuration.

1const firebase = require("firebase/app");
2
3// ...
4
5const config = {
6  apiKey: "API_KEY",
7  authDomain: "ID.firebaseapp.com",
8  databaseURL: "https://ID.firebaseio.com",
9  projectId: "ID",
10  storageBucket: "ID.appspot.com",
11  messagingSenderId: "senderID",
12};
13
14firebase.initializeApp(config);
15

Tip: In the case of a Nuxt project, initialize Firebase directly in a plugin.

Step 2: Allow the user to sign in via Google

The authentication flow is as follows:

User clicks on a button ➡️ a pop-up opens, allowing the user to chose one of their Google accounts ➡️ the user clicks on an account ➡️ the pop-up closes and the user is signed in.

So how can we achieve this? It's extremely simple. Once you have caught the user's click, call the following method:

1// Don't forget to require firebase/auth !
2const firebase = require("firebase/app");
3require("firebase/auth");
4
5function signInWithGoogle() {
6  const provider = new firebase.auth.GoogleAuthProvider();
7
8  firebase
9    .auth()
10    .signInWithPopup(provider)
11    .then((res) => {
12      // The signed-in user info
13      const user = res.user;
14    })
15    .catch((error) => {
16      const errorCode = error.code;
17      const errorMessage = error.message;
18      // The email of the user's account used
19      const email = error.email;
20    });
21}
22

Calling the signInWithPopup method will automatically open the pop-up for you and handle any edge cases. In case of a successful sign in you can access the user's data directly though the res.user object. In case of an error, the error response object contains lots of useful information for you to display error messages for example.

Bonus step: Handling user disconnection

To disconnect a user, simply call:

1firebase
2  .auth()
3  .signOut()
4  .then(() => {
5    // User has been signed out
6  });
7

Additionnaly, Firebase offers a very useful method to catch any authentication state changes, appropriately called onAuthStateChanged. I personally use it to redirect my user to the login page when they disconnect, or to simply store my user's information upon sign in. It can be used like so:

1firebase.auth().onAuthStateChanged((user) => {
2  // ...
3});
4

As you can see it is very easy to set up authentication with Firebase, remember that there are multiple methods of authentication offered by this tool so feel free to explore them more in detail on their official documentation.