How to add Firebase authentication to your Webflow website
How to add Google Sign in Webflow site using Firebase.
With Webflow, we can add our 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 will 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 I will only need to use Google sign up)
- Go to Authorize 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 website, and here add a text block and a picture element as a placeholder for our username and profile picture.
- Paste your Sign-out button in all other pages
- After you set up the UI elements, You need to give them unique IDs so that the script can identify them. (Select your Webflow elements and click the element options to give it an ID)
In all your Webflow 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
- I also added a loading state as an overlay screen in Webflow, I set its ID to "Loader" to reference in the code later. This hides my Page as it loads. Later, the script will remove the loader and show the page content once it is fully loaded.
Understanding the script
Before adding the script to your website, let's explain it, so you understand how it works. (You can skip this step if you like)
1- First code block is the only one that you need to edit, this code block 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- I start by 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. I 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 our user. Whenever the login state changes, this code will run.
This code will also run every time the page loads, It will check if the user exists, (is logged in), if so, I do the following.
- I hide the Sign-in button and show the Sign-out button. In addition to that, I take the username and profile picture from the user object and I set our UI placeholder in Webflow with the correct username and profile picture.
- Finally, I redirect the user to the profile page because I want my logged-in users to go the Profile page.
- If the user is not logged in, I check which page he is currently on, because I want all my non-logged-in users to start from the home page. If the current page is not the homepage, I redirect the users to the homepage, where they can log in.
5 - Finally I add event listeners to my Sign-In and Sign-out buttons that will call my Sign-In/Sign-out functions whenever one of these buttons is clicked.
Final Script
| <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-auth.js"></script> | |
| <script> | |
| // Reference to Webflow UI ements | |
| const signInButton = document.querySelector('#signInButton'); | |
| const signOutButton = document.querySelector('#signOutButton'); | |
| const userName = document.querySelector('#userName'); | |
| const userProfilePic = document.querySelector('#userProfilePic'); | |
| const loader = document.querySelector('#loader'); | |
| // Firebase configuration | |
| const firebaseConfig = { | |
| apiKey: "AIzaSyDZQyqGHB35RptLl7axHk_PX72S8faXu6s", | |
| authDomain: "test-3cc23.firebaseapp.com", | |
| projectId: "test-3cc23", | |
| storageBucket: "test-3cc23.appspot.com", | |
| messagingSenderId: "181862023286", | |
| appId: "1:181862023286:web:01720572f954edaac51f57" | |
| }; | |
| // Firebase configuration | |
| firebase.initializeApp(firebaseConfig); | |
| const auth = firebase.auth(); | |
| // Track user login status , Update UI element upon changes on login state | |
| auth.onAuthStateChanged(user => { | |
| var currentPath = window.location.pathname; | |
| if (user) { | |
| console.log('user logged in'); | |
| signInButton.style.display="none"; | |
| signOutButton.style.display="block"; | |
| if(userName!== null){ | |
| userName.innerHTML='Hi, '+ user.displayName; | |
| } | |
| if(userProfilePic !== null){ | |
| userProfilePic.src=user.photoURL; | |
| } | |
| if('/profile' != currentPath){ | |
| location.href = '/profile'; | |
| } | |
| loader.style.display='none'; | |
| } else { | |
| console.log('user logged out'); | |
| signOutButton.style.display="none"; | |
| signInButton.style.display="block"; | |
| if('/' != currentPath){location.href = '/';} | |
| loader.style.display='none'; | |
| } | |
| }) | |
| // SignUp and Signout Fuctions | |
| const signout = () => { | |
| auth.signOut(); | |
| } | |
| var provider = new firebase.auth.GoogleAuthProvider(); | |
| const signup = () => { | |
| firebase.auth().signInWithPopup(provider); | |
| firebase.auth() | |
| .getRedirectResult() | |
| .then((result) => { | |
| if (result.credential) { | |
| /** @type {firebase.auth.OAuthCredential} */ | |
| var credential = result.credential; | |
| // This gives you a Google Access Token. You can use it to access the Google API. | |
| var token = credential.accessToken; | |
| // ... | |
| } | |
| // The signed-in user info. | |
| var user = result.user; | |
| }).catch((error) => { | |
| // Handle Errors here. | |
| var errorCode = error.code; | |
| var errorMessage = error.message; | |
| // The email of the user's account used. | |
| var email = error.email; | |
| // The firebase.auth.AuthCredential type that was used. | |
| var credential = error.credential; | |
| // ... | |
| }); | |
| }; | |
| // Add event listeners to buttons | |
| signInButton.addEventListener('click', signup); | |
| signOutButton.addEventListener('click', signout); | |
| </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.
