Feathery Docs
HomeCommunityGitHub
  • Platform
    • Quickstart
    • Form Fields
      • Hidden Fields
      • How to Set Field Values
      • Link Fields Across Forms
      • Custom Field Input Format
    • Build Forms
      • Elements
        • Basic
          • Container
          • Button
          • Text
          • Progress Bar
          • Image
          • PDF Viewer
          • Video
          • Table
          • Tooltip
        • Fields
          • Address
            • Street Address Line 1
            • Street Address Line 2
            • City
            • State
            • Country
            • Zip Code
          • Button Group
          • Checkbox
          • Checkbox Group
          • Color Picker
          • Combobox
          • Dropdown
          • Dropdown Multiselect
          • Date Selector
          • Time Selector
          • Email
          • File Upload
          • Matrix
          • Number
          • Password
          • Picture Choice
          • Pin Input
          • Phone Number
          • Radio Group
          • Rating
          • Signature
            • Legally Binding Signatures
          • Slider
          • Social Security Number
          • Text Area
          • Text Field
          • Payment Method
          • URL
        • Custom HTML, JS, CSS, and Iframes
        • Custom Fields
      • Design
        • Reuse styles and elements
          • Styling
          • Assets
        • Alignment and Spacing
        • Sizing Forms and Elements
        • Responsive Layouts
      • Actions
      • Logic
        • Navigate Steps Conditionally
        • Show Elements Conditionally
        • Custom Field Validation
        • Available Conditions
        • Display Dynamic Text
        • Dynamically Repeating Containers
      • Advanced Logic & API Connections
        • Visual Rule Builder
          • Connect to API Action
            • Salesforce API Connector
          • Set Field Value Action
          • Navigate Step Action
          • Set Field Error Action
          • Open URL Action
          • Set Calendly URL Action
        • Javascript Rule Builder
          • API Connections in Code
          • Trigger Integrations from Logic
          • Reusable Logic Configs
        • Examples
          • API Connectors
            • Dynamic dropdown options
            • Dynamic form navigation
            • Pre-fill form from Salesforce
            • Pre-fill form from Hubspot
            • Pre-fill field options from Google Sheets
            • Generate ChatGPT Message
          • Field Validation
            • Complex Field Validation
            • Date and Time Validations
          • Initialize Date Field
          • Dynamically set field placeholder
          • Randomize Field Option Order
          • Update field options based on previous selection
      • Integrations
        • Event Triggers
        • Examples
          • Upload Files to Google Drive
      • Dev & Staging Environments
    • Launch Forms
      • Embed Your Forms
      • Custom URLs & SEO
      • User Tracking
      • Completion Criteria
      • UTM Parameters
      • Accessibility Standards
      • Analytics
      • A/B Testing
      • Offline Mode
    • Document Intelligence
      • Review Extractions
      • Post Processing
      • Supported Document Types
      • Prompting Guide
      • Examples
        • Investment Report
    • Document Autofill & Signatures
      • Autofill Document Templates
        • PDF Autofill
        • Word Doc Autofill
          • Dynamic Tables
        • Excel Autofill
        • PowerPoint Autofill
        • InDesign Autofill
      • Signature Workflows
        • Signature Notifications
        • Access Signed Documents
        • 21 CFR Part 11 Compliance
      • Export Form Submission PDF
    • Workflows
      • Collaboration
        • Email Invite
        • Start Directly
        • Anonymous Starts
      • Review, Edit & Approve
      • Unique Submission Links
    • Enterprise Compliance
      • Security and Privacy
      • Reliability and Performance
      • Document Management
      • Data Sovereignty
    • International Forms
      • Translate Forms
      • Right to Left (RTL) Support
      • International Form Fields
    • White Label Feathery
      • Build Custom Form Fields
      • Offer Custom Form Templates
      • Custom Dashboard Domain
    • Account Settings
      • Managing Your Team
      • Permissions and User Groups
      • Account Attributes
    • FAQs
      • Account & Billing
  • Guides
    • Verify Submissions & Prevent Spam
    • Build a Login or Verification Flow
      • Connect an Auth Integration
      • Add Auth Methods
        • Email SMS Code
        • Email Magic Link
        • Phone Number Verification
        • Social Logins
          • Google
          • Amazon
          • Apple
          • Bitbucket
          • Coinbase
          • Discord
          • Facebook
          • GitHub
          • GitLab
          • LinkedIn
          • Microsoft
          • Slack
          • Twitch
          • Twitter
      • (Optional) Require Auth for Onboarding Steps
      • (Optional) Add Login Flow to Your Site
        • Feathery-Hosted (Recommended)
        • Embed Login Flow
          • Login Embed Tutorial
    • Build a Payment Flow
      • Connect to Stripe
      • Select Products or Plans
      • Collect Payment Method
      • Purchase Products
    • Send Custom SMS Messages
    • Salesforce Picklist Options
  • Developers
    • React SDK
      • API Guide
        • init()
        • <Form>
          • contextRef
          • Event Handlers
            • onSubmit()
            • onLoad()
            • onChange()
            • onAction()
            • onError()
            • onFormComplete()
            • onView()
          • Custom JSX Components
          • PopupOptions
          • initialLoader
        • getFieldValues()
        • setFieldValues()
        • updateUserId()
        • Login API
          • <LoginForm>
          • useAuthClient()
      • Inline vs Popup Form
    • Javascript SDK
    • Context API
      • Field Object
      • field.setStyles()
      • Deprecated Context API
    • REST API
Powered by GitBook
On this page

Was this helpful?

  1. Guides
  2. Build a Login or Verification Flow
  3. Add Auth Methods

Phone Number Verification

Add a phone number SMS code authentication , Telesign silent verification, Telesign voice code or Telesign SMS code authentication flow to your Feathery form.

PreviousEmail Magic LinkNextSocial Logins

Last updated 11 months ago

Was this helpful?

Enable Phone Auth Integrations

The first step is to ensure you have the right integrations enabled for your form. In the integrations tab of your form, make sure you have one of the following enabled: SMS One-Time Passcodes (Feathery's native SMS OTP), Firebase, Stytch, or Telesign.

Phone Number SMS Code Authentication

  1. Create a Sign In step, then add both a and a to the step. Give the phone field an ID such as login-phone. Change the button text to Sign In and configure the action to Send SMS Verification Code with the target login-phone. In this case, the target is the field containing the phone number that the verification code will be sent to.

  1. Next, create a Confirmation step. Add an additional Go To Step action to the Sign In button you just created, and have it navigate to the Confirmation step.

    1. Add a Go To Step action to the button with the Verify action, and have it navigate to the step you want the user to see post-login.

    2. (Optional) On this step, you can give the user the ability to re-send the SMS verification code if they haven't see it yet.

Phone Number Silent Verification Powered by Telesign

  1. Use Telesign Silent Verify to verify an end user via mobile device data associated with their device, without any additional action by the end user. Make sure Telesign integration is connected before using silent verification.

    • Create the first action on the button and configure it to Trigger Telesign Silent Verification with the target PhoneNumber1 for Phone Number. In this case, the target is the field containing the phone number that the silent verification will conduct on.

    • Then configure Verification Status with the target test-telesign-silent, or any hidden field you would like to store the result of silent verification. The value of this field will be either True or False (Boolean).

    • Create the second action Go To Step, and configure the Next Step to be the intended step you want to take the user to when silent verification is successful. Here we will redirect user to a step called success.

  2. Go to the Flow tab, edit the connection between input-phone and add a condition where the field is the hidden field you set the silent verification status to store at (in this case, test-telesign-silent), and select is true in the dropdown to indicate when the value of this field is a boolean value of true.

  1. Similarly you can create another connection for when silent verification fails (test-telesign-silent is false) per below example.

Phone Number Voice and SMS OTP Powered by Telesign

  1. Following the example above, create another step called OTP-option. Add two buttons to allow users to choose a method of sending an OTP code to the phone number inputted in PhoneNumber1. For OTP via SMS without Telesign, please refer to the Phone Number SMS Code Authentication section above. You can also refer to below for a sample setup for this particular work flow.

  1. For OTP via Voice powered by Telesign create the first action on the button Voice and configure it to Send Telesign Voice OTP. For OTP via SMS powered by Telesign create the first action on the button SMS and configure it to Send Telesign SMS OTP.

    • In either case, the target should be PhoneNumber1 (or any phone filed name you have given) for Phone Number. In this case, the target is the field containing the phone number that Telesign will contact in order to send the OTP code.

  2. Create the second action on your chosen button as Go To Step, and configure the Next Step to be a step where users can input the OTP code.

Request Phone Type via Telesign

Instead of prompting users to select an OTP method, Feathery also supports phone type identification through Telesign. Once users input their phone number, Feathery provides an action to identify whether this number is a mobile number or landline number, and based on the result, you can redirect users to the respective OTP method accordingly:

  • Create another action on the button and configure it to Request Telesign Phone Type with the target PhoneNumber1 for Phone Number.

  • Then configure Phone Type with the target telesign-type, or any hidden field you would like to store the type of the phone number user provided. The value of this field will be either "Mobile", "Landline" or "Other".

Add a to the Confirmation step, and then add a with its action set to Verify SMS Code. Set the target of the Verify action to the pin input field you just created. This step will allow the user to input the verification code they just received from their phone number, and verification will fail if the code is incorrect.

Create a form with a and a to the step input-phone. Give the phone field an ID such as PhoneNumber1.

Create a step to allow users to input the OTP pin. Configure the length of the to be 7 for Telesign Voice OTP and name it VoicePinInput. Add a Submit button and set the action to Verify Telesign OTP with the Pin Code field set to VoicePinInput. You can also add a second action to redirect users to the success step if the pin is correct.

pin input field
button
phone field
button
pin input field
phone field
button