@andrewrubio Hey Andrew, thanks for the feedback. Makes it all worthwhile when I can see people getting some real value!
To answer your questions:
Question 1:
When I have elements on the same page where I want some to be visible if the user’s info meets certain criteria (from the database), and some elements visible for other users, the elements seem to appear or disappear in a flash just as the page loads. You can see this on the homepage for example. The way I’ve done this is through hiding the elements by default and applying jQuery to show the elements if the user has the correct fields in their user record. Is there a smarter and faster way to do this?
This is happening because you have set the buttons to display “block” or “inline-block” within the webflow designer. This is the css equivalent of doing something like:
<style>
.btn-login {
display: block;
}
</style>
So what happens is that when your page loads, the CSS style has already been set to display “block” or “inline block”. This is set before your scripts which hide and show buttons depending on your user’s authentication state have a chance to run. This script takes a few split seconds to run after the page loads, so this is why you briefly see buttons that you shouldn’t.
To fix this, you can do a bit of a dirty Webflow hack that works. You can just set all your buttons that needs to be either shown or hidden to “display: none” from within Webflow. The downside to this is that you won’t be able to see them in the editor and it will just look weird.
What I did was add a custom CSS tag to my buttons in Webflow which I simply called “hide”. Then in the site wide head code, in first place before anything else runs I wrote a custom style tag:
<style>
.hide {
display: none;
}
</style>
This way, when my page loads, the buttons for which I want to set visibility depending on user authentication state are not visible until my script has a chance to run. It also allows me see my buttons in the Webflow editor.
Question 2:
How would I be able to set up paid subscriptions? I know you’ve mentioned it in your original post but it’d be great if I could somehow integrate this. The use case here being a monthly subscription that they pay through a direct debit for updated monthly content. Ideally this should be done during the sign-up stage.
I am actually building a demo site right now where I am doing exactly this. The short answer is that yes it’s entirely possible, but at the time of me writing this you can’t do it with FirebaseUI. FirebaseUI is an excellent solution that is very easy to get set up and running with, but it does have limitations. For example, there is no way to set user roles (admin, premium user, free user, etc).
To do this you must generate your own custom authentication tokens, and only then can you add custom “claims” (Firebase jargon for user roles) to these tokens. On your Firebase database, you can then check the claims in a user’s token when they try to read or write to make sure that they have the appropriate user role to do so.
Stay tuned as once I have finished my demo site I am going to make a new screen cast series where you can follow along as I set this up and see how its done.
Question 3:
Is there a way to influence the filters on a Collection list by using data from Firebase. For example, in a collection list you can say “Return me items between 10 and 100” - can the number 10 here be filled in dynamically depending on a field of the current user: e.g. CurrentUser’s “monthsPaid” = 17, therefore show Collection list from 17 to 100.
In short, I don’t know because I have never tried. Webflow kindly gives you API access to their CMS system, so it is probably possible to do something like this. If there is much demand for tutorials on how to integrate Firebase with the Webflow CMS then I will do a new screen cast series and show people how to do it. Assuming I can get it working myself, of course