LogoLogo
Back to studio
  • Formsort documentation
  • โฉQuickstart
    • ๐ŸŸขGet started with Formsort
    • ๐ŸŽCore concepts
    • โ„น๏ธQuestion and content reference
    • ๐Ÿ“•Key terms
    • ๐Ÿž๏ธCreate your first flow
    • ๐Ÿ“–Add content and collect answers
      • ๐ŸคณCapture demographic data
      • โ„น๏ธAdd informational content
      • ๐Ÿ” Review your variable schema
    • ๐ŸŽจCreate a theme
      • Set brand guidelines
    • ๐ŸคนPersonalize your flow
      • ๐ŸŒŸTemplate your variables
      • ๐Ÿง Add conditional logic
      • ๐Ÿ’ซUsing conditional logic with Calculated and API variables
      • ๐Ÿ”šEnd the flow
    • ๐Ÿ”€Set up integrations
    • ๐Ÿš€Go live
      • Auditing your flow for content, functionality, and design
    • ๐Ÿ’ผCommon use cases
      • ๐Ÿ’”Disqualify responders
      • ๐Ÿ—“๏ธAdd a scheduling option
      • ๐Ÿ“„Allow responders to read and accept your company policies
  • ๐Ÿ—๏ธBuilding flows
    • Flows and variants
      • Flow starts
    • Adding content
      • Groups
      • Steps
        • Settings
        • Logic
        • Style
      • Questions
        • General Settings
        • Style
        • Address
        • Comparison
        • Confirmation
        • Date
        • Date & Time
        • Email address
        • File upload
        • Grid choice
        • Iframe
        • Image upload
        • Number
        • Payment
        • Phone number
        • Postal code
        • Question group
        • Region
        • Select
          • Providing choices via API or calculation
        • Signature
        • SSN
        • Text questions
        • Yes/No
      • Content
        • General Settings
        • Statement
        • Image
        • Video
        • Next button
        • Divider
        • Map
      • Endings
      • Using markdown
      • Using variable templating
        • Template formatting functions
      • Copy-pasting form content
      • Content library
    • Conditions and logic
      • Logical operator reference
      • Advanced logic
    • Variables (answers)
      • Variables from questions
      • Externally provided variables
      • Calculated variables
      • API lookups
      • System Library variables
      • Orphaned variables
    • Schemas
      • JSON Schemas
      • Validating flow schemas
    • Redirects
    • Styling and themes
      • CSS Reference
      • Overriding theme styling
      • Custom CSS overrides
      • Content area
      • Animations and transitions
      • Form Layout
      • Typography
        • Adobe Fonts
        • Hosting custom fonts
      • Color variables
      • Dimension variables
      • Question containers
      • Assets
      • Form Buttons
        • Select buttons
      • Inputs and dropdowns
      • Checkmarks
      • Tables
      • Sliders
      • Divider lines
      • Progress bar
      • Comparison cards
    • Variant settings
      • Form behavior for returning responders
      • Group ranking API
    • Publishing and versions
      • Preview window
      • Deploying
      • History
  • ๐Ÿ’พHandling data
    • Philosophy and data retention policy
    • Viewing form answers
    • Responder UUIDs
    • Environments
      • Loading different environments
    • Passing data in
      • URL parameters
      • POST body
      • Embed query parameters
    • Custom validators
    • Form answers and events
      • Analytics events
      • Signed requests
      • Event payload shape
      • Submission frequencies
      • Runtime error reporting
      • Admin API
      • Flow content data format
    • Integration reference
      • Amplitude
        • Amplitude cross domain tracking
      • BigQuery
      • FullStory
      • Google Analytics
        • Updating from Universal Analytics to GA4
      • Google Cloud Storage
      • Google Sheets
      • Google Tag Manager (GTM)
        • JavaScript triggered by flow events
      • Hubspot
      • Jornaya
      • Optimizely
      • PostgreSQL
      • Redshift
      • Rudderstack
      • S3
      • Salesforce
      • Segment
        • Segment Setup
        • Segment cross domain tracking
      • Stripe
      • TrustedForm
      • Webhooks
        • Zapier
  • ๐Ÿ“บGoing live
    • Custom domains
    • Built-in analytics
    • Embedding
      • Web-Embed API
        • React-embed
      • Adding authentication
      • Embedding forms in iOS and Android
      • Setting up a dev environment
    • Split testing
    • Preflight checklist
  • ๐ŸขTeams
    • Accounts
      • Roles and permissions
    • Events subscriptions
    • Workspace domain detection
Powered by GitBook
On this page
  • Setting up Auth0 authentication
  • Passing an ID token to the flow
  • Behind the scenes
  • Dealing with authentication errors
  • Authenticating API variable lookups

Was this helpful?

  1. Going live
  2. Embedding

Adding authentication

Prevent non-authenticated responders from accessing your flows.

PreviousReact-embedNextEmbedding forms in iOS and Android

Last updated 3 years ago

Was this helpful?

An out-of-the-box Formsort flow allows anyone to access it.

To restrict the responders who are allowed to complete your flows, it's possible to connect your identity provider, so that you can only permit authenticated users.

We do not currently support authenticated flows outside of the embedding context, although we plan to add support for this in the future.

Today, we support , and plan to add other providers depending on demand.

Setting up Auth0 authentication

Authentication is configured on a flow-by-flow basis, like other integrations, and can be configured on a per- basis.

Unlike the other integrations, the authentication settings take effect immediately for all variants in the flow for the selected environment.

You should see that once an identity provider is configured, you will not be able to access variants within the flow, until you provide a valid ID token.

Passing an ID token to the flow

To identify the responder, you must pass a valid Auth0 ID token JSON Web Token (JWT) into the flow.

First, use the Auth0 client libraries to authenticate your responder within the page that is embedding the Formsort form.

Once your user is authenticated, you can initialize the Formsort embed, and pass an authentication object in your configuration, with the idToken containing the ID token JWT.

  authentication?: {
    idToken?: string; // ID Token for authenticated flows
  };

Make sure you are passing the ID token JWT, not the Access token JWT.

Behind the scenes

An authenticated flow will verify the ID token in the following places:

  1. When uploading answers.

  2. When downloading answers (for returning responders).

We don't yet verify the ID token when retrieving the flow definition itself. We will add this in the future.

Dealing with authentication errors

The web embed will emit an unauthorized event whenever the embedded flow has an authentication requirement but the idToken is missing or is invalid.

It's important to handle this, since even correctly-formatted tokens are only valid for a limited period of time.

When you receive an unauthorized event, prompt the user to re-authenticate, and re-initialize the embed with the newly-generated ID token.

Authenticating API variable lookups

Formsort does, however, include credentials when making API requests from authenticated flow. This means that if you set cookies within the parent page, they will be included with API requests, which you can use to verify users.

See the for more detail on other settings that can be passed in. Use to verify and inspect JWT tokens.

We automatically handle public key rotation, since we use Auth0's to retrieve the correct public key depending on the key referenced within the ID token itself.

We do not pass the ID token along with API requests that happen when resolving .

Including credentials means that a GET request is no longer considered a simple request, and therefore requires that your server supports the OPTIONS method for Cross-Origin Resource Sharing (CORS). .

๐Ÿ“บ
web-embed-api documentation
jwt.io
JSON Web Key Sets
API variables
Read more about CORS at MDN
Auth0
environment