Skip to main content

Customize the <Form>

The authentication form​

The authentication form is a drop-in React component available to all our customers through the official SlashID’s React SDK. It supports all the authentication methods that our core SDK offers out of the box:

  • Passkeys (WebAuthn)
  • Magic link via email or SMS
  • One-time passwords
  • Single sign-on

In order to use the component, customers only need to specify the authentication methods they want to use in the configuration object.

If you are a SlashID customer you can install our @slashid/react package to start using the components right away.

Configuration​

Configuration is driven by a simple JavaScript object as illustrated below.

This example will result with the component rendering an email input for Passkeys and two buttons for the login via SSO providers. The component instantly responds to any changes in the configuration and re-renders the UI, giving you a flexible and powerful platform for no-code experimentation.

The configuration object can be constructed dynamically or can also be fetched from a remote service. This facilitates a convenient way to experiment with the onboarding process and improve the related metrics without deploying any code changes.

Customization​

The form is responsive and it will also adapt to dark and light display modes accordingly.

You can apply your own branding through standard CSS variables. This approach is both performant and flexible as it is not locked into a particular library or a build system. Using documented CSS variables you can customize the following:

  • Logo
  • Font family
  • Color palette

If further customization is required, all the building blocks of this component expose public CSS class names that can be used to select and style the elements in place using CSS.

Text content and i18n​

All the text content present in the form can be edited. In order to keep the component as light as possible there’s no built in i18n solution – you can simply pass in the translated strings using the configuration interface and the i18n library you already use.