Firebase

Firebase Authentication is a service by Google that allows you to authenticate users to your application. You can integrate Firebase directly with Feathery to build forms for login and signup.

What you need

  • An active Feathery account and form
  • A Firebase account

How to activate

Open Firebase, create a project, and navigate to its settings. Copy your API Key, Project ID, App ID, and Sender ID to your clipboard.

Navigate to the Feathery form that you want to track. Click on the Connect tab.

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

Click Save, and you’re now ready to build authentication into your Feathery forms.

Usage

SMS & Magic Link Authentication

In the Feathery visual editor, the Login field under Advanced Fields will become available once you've activated your Firebase integration. Once the field has been added, you can modify the supported login methods under properties.

The PIN Input field will also become available when Firebase is enabled. Under properties, you can set the field to verify a SMS code from a Firebase-generated phone verification text from a Login field.

Resend SMS Authentication

SMS verification can be triggered by adding a Button to your form step and configuring the action to Send SMS Verification Code. This can be especially useful if you'd like to provide a button that allows end users to click and resend an SMS verification code.

Build an Auth Gate

When creating navigation rules between steps, you can also use the logged in and not logged in conditions if you're checking if a step is loaded.

Example: Authenticate Users with an SMS Code

Once your Firebase integration is activated, you'll be able to authenticate your users using SMS codes.

Under the Advanced Fields section, find and add a Login field to your step. Under Actions in the field's properties, select SMS Verification Code as the login method.

In the next form step, find and add PIN Input from the Advanced Fields section. Under Actions in the PIN Input field's properties, select Verify SMS Code.

Once you publish your changes, you'll be able to test them out on your live form. Fill in your phone number on the Login step, and wait to receive a SMS code on your phone. You can then input it into the PIN Input field on the next step to complete the authentication process.

Example: Authenticate Users by Emailing a Magic Link

Once your Firebase integration is activated, you'll be able to authenticate your users by emailing a magic link.

Under the Advanced Fields section, find and add a Login to your step. Under Actions in the field's Properties, select Email Magic Link as the login method.

Once you publish your changes, you'll be able to test them out on your live form. Fill in your email address on the Login step, and wait to receive a SMS code on your phone. You can then input it into the PIN Input field on the next step to complete the authentication process.

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.