<ConfigurationProvider>

ConfigurationProvider is used to provide the configuration values to our UI components like <Form>. It must be rendered as a parent of the component subtree containing those components. This allows you to override the default configuration using props. Both the look and behaviour can be customised.

Usage

import { SlashIDProvider, ConfigurationProvider } from "@slashid/react"

function Root() {
  return (
    <SlashIDProvider oid="ORGANIZATION_ID">
      <ConfigurationProvider>
        <App />
      </ConfigurationProvider>
    </SlashIDProvider>
  )
}

Props

Prop	Type	Default	Description
logo?	string | React.ReactNode	<SlashID/>	The logo shown in the SlashID components. Can be a url or a React component.
text?	Record<string, string>	See default.	Overrides for text shown in the SlashID components.
factors?	FactorConfiguration[]	[{ method: "webauthn" }, { method: "email_link" }]	The authentication methods to be used.
storeLastHandle?	boolean	false	Flag where true means the handle type and value used in a successful log in action will be persisted in window.localStorage.
defaultCountryCode?	string	US	Default country code to be used for the phone number input. Accepts an Alpha-2 ISO-3166 country code.

Type: FactorConfiguration

OIDC factor can be configured with extra UI options, as described below. Otherwise the Factor type is used.

type OidcFactorConfiguration = {
  method: "oidc"
  label?: string
  options: OIDCMethodOptions
}

type FactorConfiguration = Factor | OidcFactorConfiguration

Overriding the SSO button text

When using the oidc factor, the text shown in the corresponding button can be overridden by including a label field in the factor configuration passed to the <ConfigurationProvider>. By default the SSO button will display capitalized OIDC provider name, e.g. "Sign in with Google". Example:

const factors = [
  {
    method: "oidc",
    label: "SSO with Google",
    provider: "google",
    options: {
      client_id: "CLIENT_ID",
    },
  },
]

// a <Form> rendered with this configuration will show a button with the text "SSO with Google"

Type: FactorWithAllowedHandleTypes

Factors that support multiple handle types have an optional property to explicitly declare which handle types can be used:

type FactorWithAllowedHandleTypes = Factor & {
  allowedHandleTypes?: NonEmptyArray<HandleType>
}

When this option is not specified, all supported handle types are allowed.

Using Passwords with emails only

To allow login only with email + password combination, use allowedHandleTypes option as described below:

const factors = [
  {
    method: "password",
    allowedHandleTypes: ["email_address"],
  },
]

// a <Form> rendered with this configuration will not allow switching to Phone Number handle type

Text overrides

You can use the text prop to override any of the translation keys in the <Form> component:

configuration.tsx

<ConfigurationProvider text={{ "initial.title": "Welcome message override" }}>
  <Form />
</ConfigurationProvider>

This will replace the form title in its initial state.

You can find the complete and up-to-date reference of the translation keys directly in the React SDK source code.

i18n

In order to keep the component as flexible as possible there’s no built-in i18n solution - we recommend you translate the text first using the i18n library of your choice, and then override the existing text identified by the keys documented above.

String interpolation

Some of the translation strings contain {{TEMPLATE_VARIABLES}} meant to be replaced by real values from the SDK. They look similar to the ones in the example below:

Template variables in translation strings

{
  ...
   "authenticating.recoverPassword.message.email":
    "We have sent an email to {{EMAIL_ADDRESS}} with instructions for resetting your password. This email can take a few minutes to arrive, make sure to check your spam.",
  ...
}

When replacing these strings, remember to use the same template variables as the default if you want to use the interpolated values!

configuration.tsx

<ConfigurationProvider
  text={{
    "authenticating.recoverPassword.message.email": "Password reset email sent to {{EMAIL_ADDRESS}}",
  }}
>
  <Form />
</ConfigurationProvider>

If you don't want to use the interpolated values, you can omit the template variables and the override will still work as expected:

configuration.tsx

<ConfigurationProvider
  text={{
    "authenticating.recoverPassword.message.email": "Password reset email sent to your email address",
  }}
>
  <Form />
</ConfigurationProvider>