Firebase

Premium

Overview

Firebase Authentication is a service by Google that allows you to verify users via SMS OTP, email magic links, one-click social logins (Google, Microsoft, Facebook, etc.), and more. You can integrate Firebase directly with your form to build login and signup.

What you need

  • An active Feathery account and form
  • A Firebase account

Background

Firebase is a comprehensive platform developed by Google for building and managing web and mobile applications. It offers a wide range of services and tools that help developers accelerate app development, improve app quality, and grow their user base.

Key Features and Services of Firebase:

  1. Realtime Database: Firebase Realtime Database is a cloud-hosted NoSQL database that allows developers to store and sync data in real-time across connected devices. It enables collaborative and responsive app experiences by automatically synchronizing data changes to all clients.
  2. Authentication: Firebase Authentication provides easy-to-use authentication services, allowing developers to implement secure user authentication with email/password, phone number, social media logins, and more. It handles user management, identity verification, and account recovery seamlessly.
  3. Cloud Firestore: Cloud Firestore is a flexible, scalable, and fully-managed NoSQL document database offered by Firebase. It offers real-time synchronization, offline support, and powerful querying capabilities for storing and syncing structured data across web and mobile applications.
  4. Cloud Functions: Firebase Cloud Functions allows developers to run server-side code in response to events triggered by Firebase features or HTTPS requests. It enables developers to automate tasks, integrate with third-party services, and customize app behavior without managing servers.
  5. Hosting: Firebase Hosting provides fast and secure web hosting for static and dynamic web applications. It allows developers to deploy web apps with a single command, automatically provisions SSL certificates, and provides CDN (Content Delivery Network) support for improved performance.
  6. Cloud Storage: Firebase Cloud Storage offers scalable and secure object storage for storing and serving user-generated content such as images, videos, and files. It provides a simple API for uploading, downloading, and managing files, with built-in security rules for access control.
  7. Analytics: Firebase Analytics provides comprehensive app analytics and reporting features to help developers understand user behavior, track app performance, and optimize user engagement. It offers insights into user demographics, retention, conversion rates, and more.
  8. Remote Config: Firebase Remote Config allows developers to remotely configure app behavior and appearance without requiring app updates. It enables A/B testing, feature flagging, and personalized app experiences based on user segments and conditions.
  9. Performance Monitoring: Firebase Performance Monitoring helps developers identify and fix performance issues in their apps by monitoring key performance indicators such as app startup time, network latency, and UI responsiveness. It provides insights into app performance across devices, networks, and geographical regions.
  10. Cloud Messaging: Firebase Cloud Messaging (FCM) enables developers to send push notifications and messages to users across web and mobile platforms. It supports targeted messaging, audience segmentation, and personalized notifications to engage users effectively.
  11. In-App Messaging: Firebase In-App Messaging allows developers to send targeted and contextual messages to users within their apps. It helps improve user engagement, drive feature adoption, and deliver personalized content based on user behavior.
  12. AdMob Integration: Firebase integrates with Google's AdMob platform, allowing developers to monetize their apps through in-app advertising. It provides analytics, ad mediation, and ad targeting features to maximize ad revenue and user experience.

Common Use Cases for Firebase:

  • Mobile App Development: Firebase is widely used for building native Android and iOS apps, providing essential backend services, user authentication, and analytics out of the box.
  • Web Development: Developers use Firebase for web app development, offering hosting, database, and authentication services tailored for web applications.
  • Real-time Collaboration: Firebase's real-time database and synchronization capabilities make it ideal for building collaborative applications such as chat apps, multiplayer games, and collaborative document editing tools.
  • Progressive Web Apps (PWAs): Firebase Hosting and Cloud Firestore support PWAs, enabling developers to build fast, reliable, and engaging web experiences that work offline and across devices.
  • App Analytics and Optimization: Firebase Analytics and A/B testing features help developers understand user behavior, optimize app performance, and improve user engagement through data-driven insights and experimentation.

Overall, Firebase offers a comprehensive set of tools and services that empower developers to build high-quality web and mobile applications faster, scale seamlessly, and deliver exceptional user experiences. Its integration with other Google services and ease of use make it a popular choice for developers and businesses alike.

How to set up

Firebase setup: 

  • Open Firebase, and create a project (or select an existing one)
  • Navigate to Project Settings by clicking the Gear icon on the top left
  • Then click Add App at the bottom and click the Web App option (with the <> icon) and set an App Name.
  • Within the new App you created, you'll see a config with a few keys: copy the apiKey, projectId, messagingSenderId and appId. You will paste these values into Feathery later
  • Go to Authentication on the left navbar under Build. Then go to the "Sign-in Method" tab and enable Email & Password login   (including passwordless login) and Google login
  • Then go to the "Settings" tab (still on the Authentication screen) and click "Authorized Domains". Then add "feathery.io" and "form.feathery.io" and any other custom subdomains you have set up on your account.
  • Increase your sign up limit as needed in "Sign-up Quota"
  • WIth that, you are good to go on the Firebase side! Now moving on to Feathery setup.

Navigate to your Feathery login form that you want to add Firebase support to. Click on the Integrations tab.

Find the Firebase integration, and paste in your API Key, Project ID, App ID, and Sender ID.

If desired, configure user attributes you want to save into Feathery fields when they sign up (e.g. email or name).

Click Save, and you’re now ready to build authentication into your login form. Follow our auth setup guide to connect Firebase to your form.

For Developers

You can access Feathery's instance of the Firebase SDK from the global firebase object. This allows you to perform custom authentication-related Firebase operations beyond what Feathery provides. This object becomes accessible after a form with Firebase enabled is loaded by the user. However, if you preload a form with Firebase when the Feathery library is initialized, you can access firebase after initialization.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the

"When inside of" nested selector

system.

This is a H6

This is a Link

  • This is a list item
  • This is another list item here
Get started with
Feathery

Request access to stay in the loop

Thanks for joining
the waitlist
Done
Oops! Something went wrong while submitting the form.