Stytch

Integrate Stytch with your form to handle authenticated login and signup.

What you need

  • An active Feathery account and form
  • An active Stytch account, if not using the sign-up template
  • An active Google Cloud account, if you want to use Google-Sign-In

Quick start

The Feathery Signup Flow uses our Stytch integration for user authentication. To help you test your signup flow, we connect this template to a test Stytch integration. By default, this template uses a test Stytch key that allows you and a small number of users to experiment with a fully-functional Feathery signup flow.

Use our template to quickly get started with a signup flow.

How to set up

Feathery

Navigate to the Feathery form where you want to embed Stytch. Click on the Connect tab.

Open the Stytch integration and fill out the settings with both your test and live tokens. The live Stytch token will be used when you use your production Feathery SDK key and test Stytch token will be used when you use your test Feathery SDK key. This can be found in step 5 of the Stytch section below.

If desired, change the expiration time for Login & Signup magic links, as well as the session duration (how long a user will stay signed in before they need to log back in).

Click Save.

Go to your form builder and add both a Login field (Advanced Fields) and a Button (Basic) to a step. Leave the button action as Submit Data and change the button text to say something like Send Magic Link.

If you have set up Google Log-In, add another Button and set the Click Action on the button to Trigger Google OAuth Login.

Publish your form.

Stytch

Select an existing Stytch project or create a new one. Your users will see the name of this project when they log in.

Note, that both the Stytch Test and Live environments require configuration for the following steps.

Go to the SDK Configuration tab. Under “Authorized environments” add the domain(s) of your website. Under “Session options” set the maximum duration of your users’ authenticated sessions in minutes. Under “Auth methods” enable “Email magic links” and “OAuth” (if you want to use Google Sign-In).

Go to the Redirect URLs tab. Add the URL corresponding to your Feathery Form. 

Go to the API keys tab. You will need the test and live public tokens for step 2 of the Feathery setup above.

Go to the magic link templates tab. Here you can add your branding to the emails that Stytch sends for magic links.

Google Sign-In

Visit the Google Cloud Credentials page.

In another tab visit the Stytch Google OAuth page.

Follow the instructions from Stytch, to get your credentials from Google to enter into Stytch, and also create your Google OAuth consent screen if needed.

For Developers

Forms with Stytch will dynamically load the Stytch JS SDK, if it is not already present in your host application. If you are already using the Stytch SDK in your application, you can set it with the Feathery setAuthClient function.

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.