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.
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:
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:
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:
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.