Webflow integrated with FirebaseUI for user authentication

[jasondark]

Update 01/09/2018

New and improved video series up here. This shows how to set up user authentication using Webflow and Firebase, but without Firebase UI. Instead I show how to build your own forms so you can have full control over your site’s look and feel. Looking forward to your feedback!

Update 15/03/18

I have made a Youtube playlist with the basics of getting this set up here.

There seems to be a decent amount of interest in this topic, so I plan to create a series of screencast tutorial videos on how to set this up. If these videos would interest you, please comment with your particular use case so that I can cover the most scenarios possible when I make the videos.

Ideas so far:
-Displaying different content to users based on their role
-A client dashboard where clients can upload a PDF for you to see
-Paid subscriptions
-Integrating Firebase with the Webflow CMS api so that when a new user signs up, their account gets created automatically in a Webflow CMS “Users” collection.

Original post 11/03/18

An example of how to set up user authentication with Webflow.

For ages I was thinking about setting up some sort of user authentication with a Webflow site. Finally I got around to it, so I thought I would share my project here in case anyone else wants to use it as an example or reference for their own project.

Read only link
Live preview

I set up a test Webflow site that integrates with Firebase. I used the FirebaseUI widget to actually handle the user authentication part so that I didn’t have to deal with any more code myself than absolutely necessary.

This site demonstrates some basic features such as:

• User sign up
• User log in
• User log out
• The ability for a user to change their email address and update their profile information and profile pic

Feel free to have a look around and see how it is set up. You will need to make an account to see the profile page in action, but please note that SSL is not yet set up on this site. In any case, you can have a look at some screen grabs below.

Todo:

• The custom code I wrote could do with a tidy up, and the site could use a bit of polishing, but it works for now.

• Need to set up form validation.

• Need to set up Facebook and Google sign in, at the moment only email and password auth is configured.

Happy to answer any questions you may have. Screen grabs below.

[jorn (Jörn)]

This is awesome!

I’ve looked a Firebase to do this but never came around to actually finish, maybe because I lack the technical skils.

So what about special content and pages for either all the logged in users or only for a specific user?

[jasondark]

Thanks!

In this case the profile Page is the only page that is “locked down” to authenticated users only. This block of custom code redirects anyone who is not authenticated if they try to access this page to the Log In / Sign Up. It is in the head code on the Profile page.

<script>
    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            console.log('User is authenticated, access to this page is allowed.');
        } else {
            console.log('User is not authenticated, redirecting to log in / sign up page.')
            window.location.replace('/log-in-sign-up');
        }
    }, function (error) {
        console.log(error);
    });
</script>

So in theory, it would be possible for someone to just disable this script and gain access to the Profile page without being authenticated. However even if they did this, they would just see an empty shell on the Profile page. The reason for this is at the profile page gets user information to display specifically from the user who is logged in. If no one is logged in, there is no user information to get and display.

For example, here is a shortened piece of code from the Profile page which gets the authenticated user’s email address then passes it to the email input on the Profile page to be displayed to the user.

<script type="text/javascript">

//Run the initApp() function as soon as the page loads

window.addEventListener('load', function () {
        initApp()
    });

    //Sets the email input on the Profile page
    initApp = function () {
        firebase.auth().onAuthStateChanged(function (user) {
            if (user) {

                // Get the authenticated user's email address
                if (user.email == null) {
                    var email = "";
                } else {
                    var email = user.email;
                }
                // Pass the email address to the email-address input on the Profile page
                document.getElementById('email-address').value = email;
            }
        })
    }
</script>

As you can see, there is not an unique or individual page for each user who accesses this app. There is a generic profile page which fetches info specific to the logged in user then displays it to them.

[jasondark]

To answer your question about allowing access to a page to all logged in users, this would be fairly straight forward. Let’s call this page “Authenticated-Only”.

In the head code of Authenticated-Only, you could add some custom code that redirects anyone who is unauthenticated to the Log In / Sign Up page. Something like this:

<script>
    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            console.log('User is authenticated, access to this page is allowed.');
        } else {
            console.log('User is not authenticated, redirecting to log in / sign up page.')
            window.location.replace('/log-in-sign-up');
        }
    }, function (error) {
        console.log(error);
    });
</script>

[jorn (Jörn)]

This is pretty powerful, in combination with other services from Firebase even more.

I wish I was better at JS

Thanks

[jorn (Jörn)]

I’ll guess you can hide/show elements like links if you logged in or not as well?

[jasondark]

Yes absolutely. This code is placed in the footer code of the site wide settings and does exactly this.

<script>
    firebase.auth().onAuthStateChanged(user => {
      
        // If user is logged in then show log out button, profile button BUT hide the log in button
        if (window.location.href !== 'http://firebase-auth.webflow.io/log-in-sign-up') {
            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>

You will notice the line:
if (window.location.href !== 'http://firebase-auth.webflow.io/log-in-sign-up') {

This is because my Log In / Sign Up page has no navbar and therefore no buttons to show or hide. The line excludes this script from running on that page and causing errors in the console because the buttons can’t be found on the page.

[jorn (Jörn)]

Now that you done this and worked with Firebase I’ll guess nothing is really impossible to do with a Webflow site now?

[jasondark]

Yes, based on having completed this test I would say that using Webflow and Firebase together would cover most use cases of a basic app. Thanks to Webflow giving you access to add in any code you like, I don’t see too many limitations.

If you were planning a huge app then you probably wouldn’t want to host with Webflow as you would likely want to have more control over the back end. However for prototypes, proof of concepts, or basic apps, I don’t see any reason you couldn’t use this approach.

[jorn (Jörn)]

Yeah I would love to build some prototypes to make a proof of concept with this approach. I’ll need to dig in deeper

[jasondark]

When I started using Webflow about 4 years ago I always wished there was a way to do this. At the time I didn’t know anything about code so just thought it was impossible to achieve this sort of thing using Webflow.

I ended up learning Angular, then hating Angular, then turning to Vuejs, and finally learning some JavaScript so that I could use Node with Express for some back end stuff. It was only recently I thought to revisit Webflow and see if this was achievable. Turns out that it is, but you do some proficiency in JavaScript.

I hope that people who are in the same boat that I was 4 years ago can use this project as an example to help bring their ideas to life! If there is decent interest in this post I will look at writing a proper how-to article on how to integrate Webflow with Firebase.

[jorn (Jörn)]

I would love that. I already shared this post on the forum with a few people wanting to this or similar problem.

[XternalDesigns (Daniel)]

Hi guys and gals,

I thought I’d clear up the air with what you need to know about integrating Webflow with Firebase UI. I’ve been going to Jason back and forth with questions about getting this set up and we’d like to create a quick FAQ to help all of you set this up and hopefully turn it into your own projects as well! (Please note that basic CSS & JS knowledge is required to set this up.)

FAQ

I’ve created a firebase account and got on the console. Now what?
Below is a screenshot of the dashboard. Click on “Add Firebase to your web app” It’s important to understand the tools on the left-hand side as well. Under “Authentication”, this is where you will be able to get your custom code to connect Firebase UI to Webflow. Please note that “Database, Storage, Hosting, and Functions” will be left untouched. This integration is with code only and not nodes. (If you get what I mean)

How Do I Install Firebase UI Into Webflow?
Please visit the Github link and look at Option #1 for installation. I copied and pasted the code under Custom Code in Project Settings so it will work on all of your pages.

I’ve Noticed Errors When Attempting To Update Information. How To Fix?
In your case you simply need to give your inputs an ID from within Webflow, like such:

Click on each input and give it the correct ID. You can see this in your code, but from memory these IDs should be:

Email input: email-address
First name input: first-name
Last Name input: last-name
Phone number input: phone-number
Bio input: bio

Also, you will need to set the ID of your buttons. In the same way, set these to:

Update email button: btnUpdateEmail
Update profile button: btnUpdateProfile
Log out button: btnLogOut

I hope this helps as these were questions I’ve asked @jasondark when attempting to create the project he made!

Thanks,

Dan

[jasondark]

Great explanations Dan!

[aaronocampo]

Wow @jasondark this is awesome!! I would VERY interested in that ‘how to’ you mentioned.

I started my Webflow journey a couple of years ago and this something I wanted to achieve many times, now I’m starting my education precisely in JS to have a little more control over my projects but definitely this is something I would like to know.

Cheers! and keep up the good work!

[vincent (Vincent Bidaux)]

Awesome! Sorry if it’s already answered but from ther,e how would you design a system where a user, onces signedin can access content solely for him or his group… A request you can see every week on this forum is to control content depending on users. Users want to be able to identify users to serve different content/downloads.

[jasondark]

Hi Aaron,

There seems to be enough people interested in a tutorial so I’m planning a series of screencast videos showing how to set things up.

What specifically would you want to see in a tutorial? Vincent mentioned that people are often asking how to control what content is displayed to users based on their role. Do you have any other ideas?

Jason

[jasondark]

Hey Vincent, so you would need to set up role based access control for your users. This is more advanced that what I have shown in my demo site, but I could certainly make a video on how to do it. Do you have any other suggestions for what you would like to see in a video?

[vincent (Vincent Bidaux)]

Not really but is your search for “user system” on this forum you’ll see all the use cases users are looking to reproduce

A user system in Webflow is asked for, a lot.

[aaronocampo]

Thank you @jasondark

Maybe paid subscriptions?

Looking forward to it!