Stytch

Integrate Stytch with your form to verify users via SMS OTP, email magic links, one-click social logins (Google, Microsoft, Facebook, etc.), and more. Build login and signup directly into your form.

What you need

  • An active Feathery account and form
  • An active Stytch account, if not using a Feathery signup template
  • An active Google Cloud account, if you want to use Google One Tap Login

Quick start

The Simple Signup template uses Feathery's Stytch integration for user authentication. Once you've selected this template, it will by default use test Stytch credentials that allow you and a small number of users to experiment with a fully-functional signup and login flow. To productionize your template, replace the test credentials with your own Stytch credentials.

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 Integrations tab.

Open the Stytch integration and fill out the settings with both your test and live Stytch tokens. The live Stytch token will be used on your live form and the test Stytch token will be used on your preview / test form.

If desired, configure user attributes you want to save into Feathery fields when they sign up (e.g. email or name). You can also 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. Your integration is now set up!

Go to your form designer and follow our auth setup guide to connect Stytch to 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 the following steps must be followed for both the Stytch Test and Live environments.

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.

Enable Social Login: Google

Visit the Google Cloud Credentials page.

In another tab visit the Stytch Google OAuth page.

Follow the instructions from Stytch to add your Google credentials and 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.