User authentication with Webflow. Yes, this is the tutorial you’ve been looking for.

I’m going to show you how to:

  1. Let users to create an account on your site.
  2. Log in to your site with their account.
  3. Allow your users to update their profile information from their very own profile page.

Update: This story is a little out of date now. I made a new video series on how to set this up here, but you can also see my original video series here.

No one else has nailed the WYSIWG thing quite like them. However no rose is without its thorn, and in the case of Webflow this is the lack of user authentication. “If only I could authenticate my users in Webflow, it would be perfect!” I hear you cry. Well you can, and it’s actually not that hard. Let me show you how.

In this tutorial I will show you how to use FirebaseUI to handle user authentication with Webflow. By no means is this the only way of doing this, however using FirebaseUI means that we are dealing with very little code ourselves.

  1. A good understanding of Webflow.
  2. Little or no understanding of JavaScript, Firebase or FirebaseUI.

1. Set up Firebase

  1. Go to https://console.firebase.google.com/, log in with your Google account and make a new project.

2. Give your project a name and set your country.

3. Click “Add Firebase to your web app”.

4. A config will pop up. Copy this and save it somewhere for later.

2. Set up your Webflow site

Create a new Webflow site and give it a name. For the sake of clarity in this tutorial I have used a blank site.

On your new site’s homepage, add a navbar. Within this navbar, add 3 navlinks named “Profile”, “Log In” and “Log Out”. Turn your navbar into a symbol so that you can reuse it on other pages easily.

For clarity, make a hero section so that you can easily recognise the home page.

4. Make a new “Log in / Sign up” page on your Webflow site. Create an empty div somewhere on the page (I used flexbox to vertically and horizontally align the div in this example).

Leave this div empty but set its ID to “firebaseui-auth-container”.

Make a button at the top of your log in / sign up page that links to your home page. Give it a clear “take me back” message so that users don’t get lost.

Next create a new “Profile” page on your Webflow site. Reuse your navbar from your home page. Add a div with an empty picture (this will display the user’s profile pic) and a button next to it. Add 3 forms to the page, each with its own submit button.

Give the 1st form 1 text input and label this “Email Address”. Set the text input’s ID to “email-address” and the submit button’s ID to “btnUpdateEmail”.

Give the 2nd form 1 text input and label this “Phone number”. Set the text input’s ID to “phone-number” and the submit button’s ID to “btnUpdatePhoneNumber”.

Give the 3rd form 2 text inputs labelled “First name” and “Last name”. Add 1 text area input and label this “Bio”. Set the “First name” text input ID to “first-name”, set the “Last name” text input’s ID to “last-name”, set the “Bio” text area input’s ID to “bio” and the submit button’s ID to “btnUpdateProfile”.

5. Go to your navbar and set the correct ID and page links for each navlink.

Give the “Profile” navlink an ID of “btnProfile” and make it link to the profile page.

Give the “Log In” navlink an ID of “btnLogIn” and make it link to the log in / sign up page.

Give the “Log Out” navlink an ID of “btnLogOut”. We don’t need to set its link within Webflow as the FirebaseUI sign out function will take care of this for us.

3. Make Firebase and Webflow talk to eachother

Go to the Custom Code section of your site’s settings. In Head Code, paste the code below. Change the variables in the Firebase config to what you saved from Firebase earlier.

<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-auth.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/2.6.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.6.2/firebaseui.css" />
<script>
// Initialize Firebase
var config = {
apiKey: "Your apiKey",
authDomain: "Your authDomain",
databaseURL: "Your databaseURL",
projectId: "Your projectId",
storageBucket: "Your storageBucket",
messagingSenderId: "Your messagingSenderId"
};
firebase.initializeApp(config);
</script>

In Footer Code, paste the code below.

<script>
firebase.auth().onAuthStateChanged(user=>{
// If user is logged in then show log out button, profile button BUT hide the log in button
if(user){
document.getElementById("btnLogOut").style.display = 'inline-block';
document.getElementById("btnProfile").style.display = 'inline-block';
document.getElementById("btnLogIn").style.display = 'none';
}
// If user is logged out then show log in button BUT hide the log out button and profile button
else{
document.getElementById("btnLogIn").style.display = 'inline-block';
document.getElementById("btnLogOut").style.display = 'none';
document.getElementById("btnProfile").style.display = 'none';
}
})
</script>
<script>
document.getElementById("btnLogOut").addEventListener('click', function(event) {
firebase.auth().signOut();
console.log('logged out');
window.location = "http://your-webflow-site-homepage";
})
</script>

Make sure to change window.location to your Webflow site’s homepage in the code above.

window.location = "http://your-webflow-site-homepage"

More to come soon…

More about me at https://jasondark.co.nz | Want to hire me for a one-on-one session? https://www.hiretheauthor.com/jasondark

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store