Streaming live at 10am (PST)

Webflow integrated with FirebaseUI for user authentication


#21

Great idea Vincent, I’ll do that.


#22

Hi @jasondark

You’ve maybe seen this already, but there are a lot of comments on this wishlist item, which could also give a good consensus of use cases…

https://wishlist.webflow.com/ideas/DESIGNER-I-11

Thanks for sharing this and putting in the hours to help others!


#23

Thanks, I’ve had a read through here and there seem to be some reoccurring themes!


#24

@aaronocampo @StuM @vincent @jorn @XternalDesigns

I have created the beginning of a screen cast tutorial series if any of you guys want to check it out here.

Cheers,
Jason


#25

Fantastic - thanks for this - you have your 1st sub!

We’ll report back soon :grinning: :+1:


#26

That’s awesome thanks Jason! Looking foward to it :smiley:


#27

Hey @jasondark thanks so much for that great tutorial. I’ve just finished it and now I have prototype. I see so much potential in this workflow. Sadly I can’t write Javascript. Tried to learn a couple of times. Html and css id fine but JS…nope.

Anyway, how do I do so no one can access the profile page? And when I log out I need to be redirected? Did I miss that in the tutorial?


#28

Hi Jorn,

You didn’t miss anything in the tutorials, I just haven’t got that far yet :smile:

To stop users who are not authenticated from accessing the profile page you can add this code to the head code of your profile page. Just pay attentition to the line window.location.replace('/log-in-sign-up'); and make sure that this is the page name of the log in / sign up page on your site.

<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>

If you log out while you are on the profile page, this script will redirect you automatically anyway. So you kill two birds with one stone.

Cheers,
Jason


#29

Awesome, it works, thanks.


#30

Hi Jason

I’m thinking of a tool for users in the community to report issues for the council to deal with. They don’t necassarily need to create a login. Just enter their name, contact details, description of the issue/concern and be able to write that to a database. I have zero PHP knowledge but pretty competent HTML/CSS.

Thanks

Don


#31

Hey @jasondark this is AMAZING! HUUUUGE props to you for figuring this all out, and making an easy to follow webcast series about how to implement this! YOU ROCK!!

@foxy I think you need to see this! I see a TON of potential here, and I wanted to know if you could take a look at @jasondark’s videos when you have some time, and see if this could be something that ties into Foxy.io for e-comm purposes.

I have a client that wants user account functionality on his site, and he wants to be able to send automated emails from Mailchimp to users who added products to the cart, but haven’t checked out yet. This would be sort of a reminder email something to the effect of:

“Hey [NAME], we see you’ve recently added product(s) to your cart, but haven’t yet placed your order. This is just a friendly reminder that items in your cart will clear out after 72 hours if you don’t place your order.”

My client also wants to be able to see which users have items in the cart, but haven’t placed an order yet.

I hope this turns into something super cool that I can implement!


#32

Hi Don,

Without knowing the full details of your use case, I’m wondering if your solution is actually much simpler. Why do you need to store this information in a database? Is there a reason it can’t just go straight to a mailbox?


#33

Hey I’ve just been looking at Foxy.io (looks great by the way) and it looks so complete that I can’t see why you would even need this Firebase solution?

Does Foxy not support user accounts?


#34

@anonmusic Thanks for the nudge. We’ve actually been following this thread since Jason originally posted. We’ve already been discussing internally how we can tie into something like this or another service. No eta, but know that we’re being proactive. :slight_smile:

@jasondark Nice to meet you! Great job on the integration. To answer your questions, Foxy only focuses on the ecommerce side of things. Your website, products, product pages, users, etc. are all hosted and managed by Webflow (or whatever service you’re using)

We provide all of the technology needed to connect things, but until Webflow releases user/member functionality with API access, we’ll need to get creative.

Thanks,
Josh


#35

Hi Josh,

Great work on Foxy, it looks like a really cool product. I have a couple of potential ecommerce builds bubbling away so will definitely look into this at the time.

Would it not be easier to build user account management into your own system? Surely it would be easier to tie your own user management system into your own product, then embed the whole lot into Webflow?

I believe Caspio has a solution that works something like this for user account management. They don’t strictly handle ecommerce, but same principal. From their dashboard you can create user authentication pages which you can embed into Webflow (if you want to pay through the nose for the privilege, might I add).


#36

Hi Jason…Essentially, I need it to be more than just a notification…when the public complete the form to log the issue I need it to be in a database so it becomes a job list for follow up. Multpiple team members should be able to access the list and assign the task to a council worker to investigate/remedy.

I know there are “case management” tools out there whereby I could embed the front end into my Webflow site but they can be costly and local councils don’t have money to invest in such tools.

Unless anyone can suggest a free/low cost tool that meets the need…It would save me a whole load of time having to learn about databases etc :slight_smile:
Use case as follows:-

  1. Member of public visits council website and completes a form to report something (street light not working, broken fence etc)
  2. Council helpdesk team can view list of open issues logged by public.
  3. Assignment of job from within tool to repair/fix team not essential.
  4. helpdesk need to be able to add updates and eventually close ticket.
  5. would be nice to have search feature for all open/closed cases for trend analysis i.e. streetlight #ab123 failed 4 times in last 12 months suggesting more investigation needed.

Make sense?

Thanks

Don


#37

Hi Don,

From what I understand you need a case / job management system. Some (expensive) examples of these are Salesforce and Connectwise. But solutions like these would be like dropping a bomb on an ant because your requirements are so simple.

If I were in your shoes I would sign up for a trial account with both Zendesk and Zoho. These are much cheaper and imo easier to get up and running with. They are both very competent platforms and I think their pricing is realistic.

You need to remember that if you build a custom system, you will need to support it. If it breaks you’re going to need to know how to fix it. If you’ve built a system from some Youtube videos and if don’t properly understand the coding behind them, what happens when one of your dependencies releases a breaking change? Will you have the skills to make the changes to your code and keep everything running?

I don’t want to put you off learning, and in my experience having a real world project is an amazing way to force yourself to learn. Just some considerations for you to think over :slight_smile:


#38

Good thoughts from @jasondark there - and @donski I understand the challenge of working for organisations requiring innovation on a shoestring! (been there!)

This might be too simple, but is free/low cost and could work:

Free or Paid Google account

  • Google Form - allows the public to register the issue - could be separate or embedded to a site
  • The form feeds to a Google sheet (spreadsheet)
  • You add additional fields as needed for assigning and tracking, updating, jobs.
  • Users can be assigned different access/roles - admin/editing/read-only
  • Multiple users (with Google account) can be in the same spreadsheet at the same time
  • Council workers could update the spreadsheet on-the-go from mobile devices (but you would want to restrict that to ‘work’ devices for data protection)

In terms of reporting, another bonus is you can link up separate sheets to each other - so you can have a ‘dashboard’ sheet which pulls data from this sheet (and others) to give an overview of current job status or how many times a troublesome streetlight appears on the list!

Also, it’s online, so unlike a shared spreadsheet on a shared drive, you know it’s always up to date - and can revert, or see which user last updated it…

Hope that helps


#39

Thanks @jasondark. I’m a one man band so need to keep the support risks to a minimum. I’ll take a look at Zendesk et al…Just found this as well… https://freshdesk.com/ which is free with limited functionality but would do the job.

Thanks also @StuM - I had also considered a webflow form using a zap to push the info to another suitable tool but hadn’t got past that thought yet .

Regards

Don


#40

@jasondark - first of all thanks so much for enlightening us with this tutorial! I’ve already tried it out on my own project and it works wonderfully: http://authentication-test.webflow.io/

A few things I want to achieve, which I hope you can help on!

  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?

  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.

  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.

Any ideas on the above would be amazing! Thanks again for your help.

Andrew