Flow Inputs

This guide will cover how to utilize flow inputs within your application using Descope flows. Adding the ability to pass inputs to your flow allows you to improve the user experience, and it also allows you to change behavior within your flow.

Using Flow Inputs

Types of Flow Inputs

• form - Passing flow inputs, such as email addresses, names, etc., from the app's frontend to the flow. The configured form inputs can be used within flow screens, actions, and conditionals prefixed with form..

• client - The client inputs purpose is to contain metadata related to the user environment, such as the browser version. Provide client inputs if you would like to override or add input.

• tenant - Used for associating a user to a tenant. Warning: This input does not assign the tenant to a user, but rather used as a hint and will populate the dct claim. Read More.

• redirectUrl - Used for passing the redirect URL to authentication methods that need to have a return URL post authentication, such as using OAuth with a custom domain. Should be set to the route that contain the page that renders the flow.

Passing Flow Inputs to flows

Below is an example of a configured flow component with both the form and client inputs.

// to get the browser name and version
import { browserName, browserVersion } from "react-device-detect";
 
<Descope
  flowId="sign-up-or-in"
  onSuccess={(e) => console.log(e.detail.user)}
  onError={(e) => console.log('Could not log in!')}
  form={{ 'email': 'predefinedname@domain.com', 'customAttribute.test': 'aaaa', 'myCustomInput': '12' }}
  client={{ 'browserName': browserName, 'browserVersion': browserVersion }}
  tenant="<tenantId>"
  redirectUrl="https://company.com/login"
/>

Display Form Data in screens

Once the form was populated, the data passed to the flow under the form field will populate within the screens for the items you display on the screen. Below is an example of a configured screen and how it appears within the application with the form inputs.