Webflow integrated with FirebaseUI for user authentication

Happy to hear you’re finding the tutorials useful!

The problem with using the Webflow CMS to store any secure data is that there is no way (that I’m aware of) to conditionally load it onto the page.

From the Webflow designer, you can put your CMS collection onto your page as normal, but you can’t stop it from being put there depending on whether or not a user is authenticated.

Once it’s on the page, you can stop it from being displayed based on auth state, but this is not secure as the information is still sitting right there on the front end for someone to find if they go digging.

So really data needs to be stored somewhere that you can check a user’s token before permitting access. Like an external database that you can control such as Firebase Database / Firestore.

That was a bit long winded but I hope it clears that up for you.

I’m considering a few different options for new videos. I think the best approach would be something where I show how to build a mini app. Maybe a to do list, or something along those lines. That would cover a lot of ground; user auth, database, displaying secure content, user roles etc. The down side to this is that preparing a high quality tutorial that’s easy to follow would take a huge amount of time and energy. It would also end up being a bit of a marathon in terms of video time.

Another option is to focus on shorter, more targeted tutorials. I guess I need to hear what people would find most valuable and go from there, so thanks for letting me know what interests you!

2 Likes

Understand completely!

For myself, I’d gain a lot out of a video on showing user content for authenticated users. I’m doing a bit of testing at the moment and hitting some roadblocks. I’ll post something in this thread if I make any progress

1 Like

@jasondark What is your definition of a small app? Would you recommend this approach if you know you have 1k members signing up for your app?

Would love you to show us how to build a mini app. Have no problem with donating to your Patreon to help compensate your time. Keep it up! :eyes:

Yea I’m starting to hear this from quite a few people so thinking that showing something along these lines would be the best content for my next videos.

Hey Mark,

In this context, in saying “small app” what I mean is a very basic app that I would build for demonstration purposes. For example, a to-do list. Something like this would cover many fundamentals that people can learn to then go on and apply to their own specific applications (user auth, potentially user roles, loading data from Firebase, etc).

The key here for me would be working out what sort of app I could build which would demonstrate the most things that people would want to learn. It doesn’t have to be a do to app, that’s just an example, but I think it’s worth me spending some time planning this well. After all, doing a video series on this would be a pretty huge undertaking so it’s worth getting it right.

I think this would work fine, with one caveat. The Webflow terms of service state that you may not:

take any action that imposes, or may impose at our sole discretion an unreasonable or disproportionately large load on our infrastructure

So, if you have a resource heavy app with 1000 users, you may annoy Webflow. Then again, you may not, I’m not sure where they draw the line. But of course you can just host your site else where if Webflow decide that you’re exceeding fair use of their infrastructure’s resources. I show how to do this in my video here.

Tell me about what you are hoping to build? Might give me some inspiration for the next videos.

Jason

1 Like

@jasondark Thanks for the quick reply! What about a video education app. Where people can sign up for a monthly subscription and start learning. Save their favourite vids in a playlist, monitor progress etc… (this is what i am hoping to build)

You can use your videos as content for the learning platform :wink:

1 Like

Hey @jasondark this is awesome! I hope Webflow takes note and implements this shortly.

Quick favour, could you have a look at Graphjs and see if this could be implemented in Webflow? I see you are also a Kiwi judging by the accent in your videos! I’m also in Auckland so if Graphjs can integrate with Webflow my company may look at integrating it.

Cheers bro!

Hey yes according to the Webflow wish list they are planning to build this natively for Webflow! Will be amazing.

I’ve looked into Graphjs in the past and tested it out on a Webflow site. It worked well, only thing to watch out for is it that Graphjs attaches a graph to an HTML canvas element. You will need to embed one of these and give it the correct ID (Webflow doesn’t have this element natively as far as I know).

I ended up going with Google Charts instead. I’ve used this pretty extensively with Webflow and it works really well. This is how I’ve built most of the wall dashboards around our office. I probably wouldn’t use Google Charts for any client facing work (lack of CSS customisation, little bit ugly IMO) but for my purposes it is perfect.

I’m in Auckland too, that’s 3 people I know of here now who use Webflow! Might be time to create a meetup soon.

Cheers,
Jason

@jasondark You should. I create a Wellington meetup and will host the first one prob early November. You should get in touch with @PixelGeek to help organise.

We should also create a Webflow NZ page on FB so we can people on there and promote the events.

4 Likes

I can potentially try hook you up on with some event spaces…

Hey yea good idea re the Webflow NZ FB page. Happy to help admin on that if you’d like? Would be keen to gauge numbers to see if there are enough people who would show up to a meetup!

@anonmusic
Hey there, for your use case, I know you could use @foxy for the ecommerce and integrate “Cart Hook” or something similar for the “Cart Abondonment Emails”
… to track the Cart Abondonment rate, and carts, you can track all of this by implementing ecommerce tracking/events/advanced analytics in Google Analytics.

I assume if this was also paired with Firebase then, you’d have a full fledged web shop experience with accounts, order history, etc… all in Webflow! :star2:

@Scott_Van_Zandt Thanks for recommending us.

@anonmusic Please let us know if we can help with anything.

Thanks,
Josh

1 Like

Hey @jasondark, do you freelance at all? Looking to add user functionality to my webflow site.

1 Like

Hey yes I do some freelance work around day job, usually pretty busy though!

Hi, thank you for this solution !

i’m not a developper, is it hard to create this without dev skills ?

Best regards

Yes, it will be hard - but everything is hard until you learn it. The idea of my videos is to point people in the right direction. If this sort of project interests you then I suggest you use the videos as a starting point and begin learning more from there.

@jasondark

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

Any update on your success with this? Your alpha site receives an error when clicking the Facebook sign-in. Is this still possible to do in Webflow?

Hey I never ended up setting this up in the demo. But yes this is still 100% doable.

I’m up to step 6 on the video tutorials but the widget isn’t appearing. What can be done to troubleshoot? Are there any updates that may have changed the setup from the original? Many thanks.