Webflow integrated with FirebaseUI for user authentication

I’m sure this is entirely possible, I’ve never actually tried this myself. I’ll add this to my list of ideas for future videos, thanks!

This is really cool! I had not come across Flamelink yet.

Is it possible to use Firebase as a CMS?

Yes, seems so from reading their documentation.

and dynamically call posts into webflow?

If you mean from Firebase CMS directly to the client, without the Firebase CMS items never entering the Webflow CMS system, yes certainly. You just won’t be able to build out nice collection templates like you would if you used a CMS collection from within Webflow. This means you would need to deal with your own templating using either a library or code you write yourself.

You could of course use the Webflow CMS api to push data from your Firebase CMS to your Webflow CMS, but then you would have the same problem of not being able to securely and dynamically filter which CMS items get displayed to an individual site user.

2 Likes

Excellent tutorials! Your work may save my client’s project, if not within this season, then surely for next year. Right now, I am suffering from migraines trying to find a simple turnkey solution to member protection with paid subscriptions (Paypal/Stripe) AND multiple-access levels with one login (kind of like an eCommerce profile but with page protection). I’m not a developer/coder so my expertise is limited to HTML/CSS I have picked up along the way.

Currently we are using SentryLogin.com and for every subscription, a user has a new profile/login so this is frustrating for both the user and administration. Many users want to be able to purchase multiple subscriptions without having to sign-up all over again and we want to be able to protect certain pages that match the subscription.

Watched all of the videos (and subscribed :+1:t5:) and am wondering if keyfold will one day be able to soothe this need? If so, here are features I need for my clients:

  • Ability to protect/reveal certain pages individually per paid subscription (Ex: Subscription A gives access to Page 1, Subscription B gives access to page 2, Subscription C gives access to pages 1 and 2).
  • Ability for users to have one sign-on no matter how many subscriptions they pay for (Ex: If a user pays for Subscription A and B separately, they should still be able to access Pages 1 and 2 without having two profiles).
  • And of course, users who do not have a a certain paid subscription, can not view those pages where that particular authentication is found.

Great work and I can’t wait to see what you have in store for WF users!

1 Like

Hey! I’m wondering if what you’re doing here is actually exactly what I’m looking for in the forum topic I just posted.

I’m building a website where I’m trying to let people sign up and post events and volunteer opportunities in their communities, as well as a few other types of things (links, discussion posts, although those are less important).

Basically, I’m trying to build a site that allows people to sign in and post things that then generate and populate new pages on my website. Would this allow me to do that?

I’m doing this website for my senior graphic design thesis project, and I saw that you’re releasing a plugin to add this login functionality really easily to webflow sites. The project is due in 3 weeks, so if you’re looking for anyone to beta test the plugin, I’d love to be able to use it on my site. If not, totally understandable.

Thanks for any help!!

1 Like

Thanks so much for this feedback. Detailed use cases like what you have provided are a tremendous help to us in working out our roadmap. Your use case is pretty much exactly what I had assumed that people would want, so it’s great to hear you validate that.

Yea that sounds horrendous. I’m sure there is some reason that they do this, but this is certainly not how I envisage Keyfold working.

Definitely on our road map.

This is the most logical way of doing things, and definitely on our road map!

Yep definitely on our road map.

Once again, thanks for your detailed feedback. We are hoping to have some alpha testers trying Keyfold very soon so it should not be too long before a beta release.

Hey, thanks for the question. Is what you need a community forum like these Webflow forums? In that case, you don’t even need to build your own solution. Just use something like Discourse (which powers this website).

With this option, you could use Webflow to build a pretty landing page and meet your requirements as a graphic designer, then from there simply link to your instance of Discourse. This can handle all the user registrations, logins, password resets etc.

Otherwise long term yes, Keyfold will probably be able to solve your problem. Unfortunately it won’t be able to within 3 weeks :slight_smile:

Having said this, I do need to identify some alpha testers so if you’re keen just send me a message.

Cheers,
Jason

Less like this forum, more like eventbrite or meetup.com. Basically trying to create something that allows people to post events and have those posts generate pages for those events. And then also trying to have those pages automatically populate the homepage too.

These are the “cards” that are on the homepage of the site that i’m looking to populate with data submitted by users, and I want each of these cards to link to a full page that’s populated with some more data as well. I assume the way to do this would be to have users make an account but I’m not really sure where to go from there. I saw your answer in my other thread which might actually work better for what I’m trying to do but I’m way out of my element here :joy:

Would love to be an alpha tester tho. Will send you a message.

@jasondark This is really exciting and will open up a ton of possibilities within Webflow!

Feature request:

Two paid membership types

  1. Individual member. This would be your standard site member who registered themselves

  2. Business / Group membership. Example: an employer could purchase a block of memberships for their employees under one “account” and payment. However, each employee would have a unique username and password.

This is likely not needed by many so I wouldn’t expect you to drop what you’re doing to figure it out.

Thanks for working on this and I’m following Keyfold.io with anticipation.

Hey, thanks for letting us know! Great to hear this sort of feedback.

This functionality will be available from the first release. After all, this current lack of functionality is the core problem we are aiming to solve!

Just to be sure I’m understanding correctly, you would like to be able to build a website using Keyfold that allows for a business to sign up then for them to create their own organisation’s user accounts within?

Or do you mean that you would like to build a website for a client’s business that allows them to have all their users listed, and an administrator account to manage those users?

Cheers,
Jason

Hey guys,

Just letting you know that I’m developing an MVP of a subscription based platform, similar to patreon.com using Webflow front end, stripe and Firebase/Node backend.

I’m using https://github.com/firebase/functions-samples/tree/master/stripe as a starting point so not to reinvent the wheel.

The platform is early but once it’s in reasonable shape, I’ll be happy to put up the code here if anyone is interested.

Also, feel free to ask questions. I’m still new to Firebase but happy to help out those that are doing something similar!

Best,
Magni

4 Likes

Oh, I love this. I’m trying to sell this idea to fellow developers. I see so much potential in this workflow and being able to quickly change UX and UI to get as near as possible a final product before building the actual product. This workflow must be a timesaver in development for the more complex products.

2 Likes

@jasondark Thanks very much for doing this! I was just searching for something like this to use on an upcoming project. My client has a WebFlow site currently, they want to add the functionality of allowing their employees to have a custom login to reach educational material on their current site while on the job. I hope I can make this happen with WebFlow.

Thanks again,

Esteban

1 Like

Hey Jason!

Thank you so much for your YouTube series on Firebase. It’s helping me expand what is possible for my business and I’m trying to reach a very clear goal:

I’d like my customers to come to my site, log in, enter their name, pronouns, and measurements, and I’d like for the site to reference their name and show what size is best for them based on those measurements.

I’m having some difficulties with this even after your tutorial. I know that it wasn’t meant to be comprehensive, and maybe it’s not even complete. But I’m wondering:

-The user information being stored in the Realtime Database is easily changeable, but it seems to operate differently than the email address data. We have an update email button in the tutorial–how do we allow users to change the email?
-Why isn’t the realtime database saving the email address? Is there a way to view with user is using which email?
-How would I get the site to reference information outside of text boxes?
-Is there going to be an expansion of your tutorials soon that get into the inner-workings of Firebase soon? Or just more regardless? Admittedly, I’m not well versed in code, esp javascript. So this has been great, but I’d appreciate some gaps being filled in functionality.

As a designer with good ideas and no idea how to implement them, your tutorials are inspiring–the solutions aren’t that difficult. But there’s a learning curve. But I’ve learned that there isn’t a lot of middle ground in the world of learning to code. I’m either finding patronizing tutorials or advanced level stuff that’s all over my head. This seems like a middle ground, and I’d love to expand my knowledge more. If you know of any resources where creatives like me who know exactly what they want but just not how to implement it, please let me know!

Hi Christian,

Thanks for the great feedback and the detailed information on what you would like to achieve.

-The user information being stored in the Realtime Database is easily changeable, but it seems to operate differently than the email address data. We have an update email button in the tutorial–how do we allow users to change the email?
-Why isn’t the realtime database saving the email address? Is there a way to view with user is using which email?

Each user has certain attributes assiociated with their profile which Firebase provides by default. These are fields such as display name, email address, phone number, account verified or not, etc. You can see all of these fields in the Firebase documentation here.

This means that you don’t actually need to create your own way of storing users’ email addresses, display names, etc because Firebase already provides each user with these fields in their profile by default. In my tutorial series I was doing it with the real time database for demonstration purposes.

-How would I get the site to reference information outside of text boxes?

I probably need some more detail here to give you a good answer. Broadly speaking you would just reference any element on the page (aka DOM elements) by giving an element an ID then getting the element by doing a document.getElementById("someIdHere");

-Is there going to be an expansion of your tutorials soon that get into the inner-workings of Firebase soon?

I am very busy working on Keyfold at the moment, so not in the very near future. Having said this I very much enjoyed making this first tutorial series and seeing it help so many people. I would love to do more videos, and also hopefully improve the sound quality, video editing quality, put some proper structure in place to allow people to follow along better.

1 Like

Thanks Jason & Daley for your efforts

Can you tell us when you are launching the great Keyfold, as i am eagerly waiting for the amazing code free solution

or i go with your Firebase UI solution, please tell will it work for my B2B website where i just want user to get registered before seeing my whole product range

Regards
Jayant

Hi Jason,

First of all, thanks a lot for this, it’s really awesome!

Secondly, I wonder how it is possible to actually restrict the access of certain content (to be precise to show some of the content only to signed-in AND authorized (e.g. admin) users).

The problem is that at the moment anyone can have access to the “restricted” content by simply creating an account. In a nutshell - I need them to be able to create an account, but I also need to manually validate each registration due to the private nature of the restricted content, so ideally they could create an account, but didn’t see anything hidden as long as I (or someone authorized) wouldn’t give them special access manually. Is this possible somehow with Firebase?

Thanks a million!
Gabor

Hey @jasondark thanks so much for your generous tutorials so far. I’m just wondering if there’s a way to use the profile page for individual users as a way to display information and content specific to them. I ask as someone who is new to Webflow but understands how to use it, and has next to zero coding knowledge. My first experience with firebase is from your tutorial as well.

Basically I need a login page for my client’s clients to view the progress of their projects currently. For example if it was a construction project, a way for them to see the progress of the construction or the progress of their paperwork and approvals. Ideally file upload capability also.

I’m guessing the ideal way to get this working is somehow getting the Webflow CMS and the firebase database to communicate with each other, but I have no idea how to do this.

Any ideas? Thanks so much for all your hard work in advance even if you can’t help!

Hi, glad you found the tutorials useful. What you want to achieve could be done securely by storing user information in Firebase (projects, etc) then displaying these to a user on the profile page. You would be able to verify their JWT and keep it secure this way.

The problem with using the Webflow CMS to store secure user data is that there is no way to securely check a user’s JWT and serve them the content they are allowed to see. At least not that I’m aware of.

Hope this helps.
Jason

1 Like

Hi, yes this would be possible, but while the content you are wanting to hide is stored in Webflow it would never be properly secure. At present there is no way to check a user’s JWT then securely serve them the content they are allowed to see. You have to rely fully on client side validation - in other words this is not secure. Sure, technically you could do this, especially if your content isn’t top secret, but it’s not considered good practice.

If your secure content lives in Firebase (Real Time Database or Firestore) then you can do things securely. You can verify a user’s Token and only send data if they have appropriate permissions. You could write a function that gets data secure data from your database when the page loads, sends your user’s JWT with the request and Firebase would return the data if the user has access.

Hi Jason,

This is some amazing work. Do you have a donate / patreon anything where I can show some support?

I have built out a clients website with firebase integrated as you have shown in your fantastic video series and using the resources you have made available here.

I have two brief questions:

  1. How have you got the upload-able profile picture set up, and how did you link it with firebase?
  2. I want to make two separate types of profile for my clients website, one for businesses to sign up to, one for students. Each with a different profile page. Would you have any advice on how to set this up?

Keep pushing webflow to the limit!

Kindest Regards -
Steve