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