How to add Firebase authentication to your Webflow website

With Webflow, you can add your custom code to create a simple user-authentication flow. This makes it possible to add member-only pages to your website with user authentication.

See a preview of the project here: Demo

Project Set-up

To start, you need to create a Firebase free project and have a Webflow project with active hosting plan.

Setting-up Firebase

Setting up Firebase is very straightforward, all you need to do is to create an account, and you will be given a configuration code to embed in your website. The last section of this tutorial shows how to put this code in your website.

• To create your Firebase account, head to their website here and simply login with your Google account.
• Create a new project and name it whatever you like.
• Head to Authentication options and activate Google sign up. (You can use all the other Sign up options, but for this tutorial you will only need to use Google sign up)

‍

‍

• Go to Authorise domains section and add your own domain.

‍

Setting-up Webflow

• The first thing to do in Webflow is to create your landing page containing a Sign in and a Sign-out buttons (Our script will show and hide these buttons based on the Login state of the user).
• Add a profile page to your site. In here add a text block and an image element. This will hold the username and profile picture.
• Insert Sign-out button in all other pages.
• After you have set up the UI elements, give each an ID in order to identify and select them with the script. (Select your Webflow elements and click the element options to give it an ID)

‍

‍

On all your pages, make sure you have elements containing these IDs. Below, you can find each UI element and their correspondent IDs. (IDs need to be exact).

• Sign in button → signInButton
• Sign Out button → signOutButton
• Profile Picture → userProfilePic
• Username → userName
• loader → loader

• A loading state is added as an overlay screen with the ID set to "Loader" for later reference. This hides your Page as it loads. Later, the script will remove the loader and show the page content once in is fully loaded.

‍

Understanding the script

Before adding the script to your website, let's explain it. (You can skip this step if you already know it)

1. The first codeblock is the only part that you need to edit, connects your website to your Firebase database. You need to replace the configuration part in your Firebase console (more about this in the section below).

‍

2. Start with adding references to the UI elements on the website. So that we can show and hide buttons, Set profile picture/username, and finally hide the loader. Use the IDs given in Webflow to find these elements.

‍

3. The Sign-in will initialize the sign-in flow with Google provider.

4. The "onAuthStatechange" method will track the login state of your user. Whenever the login state changes, this code will run.

This code will also run every time the page loads. It checks if the user exists (is logged in). If so, do the following:

• The code hides the Sign-in button and show the Sign-out button.  In addition to that, the username and profile picture are taken from the user object and the UI placeholder is set in Webflow with the correct username and profile picture.
• Finally, the user is redirected to the profile page after logging in.
• If the user is not logged in, check which page he is currently on, because you want all the non-logged-in users to start from the home page. If the current page is not the homepage, redirect the users to the homepage, where they can log in.

5. Finally, add event listeners to your Sign-In and Sign-out buttons that will call the Sign-In/Sign-out functions whenever one of these buttons is clicked.

‍

Final Script

‍

Applying it to your project

• Start by copying the code in a text editor, (you can use any text editor like, Visual Studio Code, Atom… ).
• Copy and paste the script below in your text editor.
• Copy and paste the Firebase configuration part from Firebase and replace it in your code editor. To find your config code, go to Firebase console > Project settings and scroll down to find the SDK setup and configuration.
• Copy and paste the full script, go to your Webflow dashboard → Project settings → custom code. Scroll to find the Footer code and paste your script.
• Make sure you save and publish the changes.

‍

Final tips

Make sure you don't share your Firebase configuration, I only shared it for the sake of the Tutorial.

If you're dealing with confidential user data, It is better to use other methods because this approach is not very secure, however it works fine for other scenarios.