<DynamicFlow>

The DynamicFlow component is used to dynamically change the authentication factor based on the handle that was used. In its initial state the form will ask for a handle, and then the factor will be determined based on the handle that was entered. This is controlled by the getFactor prop - it is a callback that receives the handle that was entered and should return the factor to perform authentication with.

A <ConfigurationProvider> needs to be rendered as a parent component, determining the handle types present in the initial state of the component.

Usage

import { ConfigurationProvider, DynamicFlow } from "@slashid/react"
import "@slashid/react/style.css"

// example: change factors based on the domain of the email
const getFactor = (handle) => {
  const domain = handle.value.split("@")[1]
  return domain === "slashid.dev" ? { method: "web_authn" } : { method: "email_link" }
}

const ConfiguredDynamicFlow = () => {
  return (
    <ConfigurationProvider text={{ "initial.oidc": "Continue with" }}>
      <DynamicFlow getFactor={getFactor} />
    </ConfigurationProvider>
  )
}

Props

name	type	default	description
getFactor	(handle?: Handle) => Factor		A function used to determine the factor to perform authentication with given the handle
className?	string		An optional class name used to override the component styles
middleware?	LoginMiddleware | LoginMiddleware[]		Callback or an array of callbacks to be called with the new User instance allowing you to transform the user instance before storing it
onSuccess?	(user: User) => void		An optional callback to be called with the new User instance once the flow succeeds