Stytch

Premium

Overview

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.

Background

Stytch is a customer authentication platform that provides businesses with secure and easy-to-use authentication solutions for their applications and websites. It offers authentication methods such as passwordless login, two-factor authentication (2FA), and multi-factor authentication (MFA), helping businesses enhance security while improving the user experience.

Key Features of Stytch:

  1. Passwordless Authentication: Stytch enables businesses to implement passwordless authentication, allowing users to log in to their accounts without entering a password. Instead, users receive a one-time passcode (OTP) via email, SMS, or another authentication method, which they can use to authenticate themselves.
  2. Two-Factor Authentication (2FA): Stytch supports two-factor authentication, which adds an extra layer of security to user logins by requiring users to provide a second form of verification in addition to their password. This verification can be done via SMS, email, authenticator apps, or other methods.
  3. Multi-Factor Authentication (MFA): In addition to 2FA, Stytch offers multi-factor authentication, allowing businesses to require multiple forms of verification for user logins. This could include a combination of passwords, SMS codes, biometric authentication, or other factors to ensure secure access to accounts.
  4. Developer-Friendly APIs: Stytch provides developer-friendly APIs and SDKs (Software Development Kits) that make it easy for businesses to integrate authentication solutions into their applications and websites. Developers can quickly implement authentication features without having to build them from scratch.
  5. Customizable Authentication Flows: Stytch allows businesses to customize the authentication experience for their users, including branding, messaging, and user interface elements. This ensures a seamless and consistent authentication experience that aligns with the business's brand and design guidelines.
  6. Security and Compliance: Stytch prioritizes security and compliance, implementing industry-standard security practices and protocols to protect user data and ensure regulatory compliance. This includes encryption, secure transmission protocols, and adherence to data protection regulations such as GDPR and CCPA.
  7. User Management: Stytch provides user management tools that allow businesses to manage user accounts, permissions, and access controls. Administrators can add, remove, and update user accounts, as well as enforce security policies and restrictions as needed.
  8. Authentication Analytics: Stytch offers authentication analytics and reporting features that provide insights into user authentication activity, usage trends, and security incidents. Businesses can monitor authentication performance, detect anomalies, and respond to security threats proactively.

Common Use Cases for Stytch:

  • User Authentication: Businesses use Stytch to authenticate users securely and conveniently, without relying on passwords or sacrificing security.
  • Enhanced Security: Companies implement Stytch's 2FA and MFA solutions to enhance the security of user accounts and protect against unauthorized access and identity theft.
  • Improved User Experience: Stytch helps businesses improve the user experience by simplifying the authentication process and reducing friction for users during login.
  • Developer Integration: Developers integrate Stytch into their applications and websites to add authentication features quickly and efficiently, without needing to build them from scratch.
  • Compliance Requirements: Organizations use Stytch to ensure compliance with data protection regulations and industry security standards, such as GDPR, HIPAA, and SOC 2.

Overall, Stytch is a versatile authentication platform that provides businesses with the tools and capabilities they need to implement secure and user-friendly authentication solutions for their applications and websites. Its developer-friendly APIs, customizable authentication flows, and robust security features make it a popular choice for businesses looking to enhance security and user experience without compromising convenience.

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.