<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

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

Type: FactorConfiguration

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

type FactorConfiguration = Factor | OidcFactorConfiguration

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. See default text key-value pairs.
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.

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"

Default text key-value pairs

{
  "footer.branding": "Top-tier security by SlashID",
  "initial.title": "Welcome",
  "initial.subtitle": "Sign in to your account",
  "initial.oidc": "Sign in with",
  "initial.authenticationMethod": "Authentication method",
  "initial.handle.email": "Email address",
  "initial.handle.phone": "Phone number",
  "initial.handle.phone.email": "Type your email",
  "initial.handle.phone.placeholder": "Type your phone number",
  "initial.submit": "Continue",
  "initial.divider": "or",
  "authenticating.retryPrompt": "Did not work?",
  "authenticating.retry": "Retry",
  "authenticating.back": "Back",
  "authenticating.message.webauthn": "If you are registering for the first time, you will receive an email to verify your email address.",
  "authenticating.title.webauthn": "You'll be prompted to validate your login via your device",
  "authenticating.message.emailLink": "We have sent you a link via email. Follow the link provided to complete your registration.",
  "authenticating.title.emailLink": "Check your email",
  "authenticating.message.smsLink": "We have sent you a link via text. Follow the link provided to complete your registration.",
  "authenticating.title.smsLink": "Check your phone",
  "authenticating.message.smsOtp": "We have sent you a code via text. Please insert it here.",
  "authenticating.title.smsOtp": "Check your phone",
  "authenticating.message.oidc": "Please follow the instructions in the login screen from your SSO provider.",
  "authenticating.title.oidc": "Sign in with ",
  "authenticating.otpInput": "OTP",
  "authenticating.otpInput.submit": "Submit",
  "success.title": "You are now authenticated!",
  "success.subtitle": "You can now close this page.",
  "error.title": "Something went wrong...",
  "error.subtitle": "There has been an error while submitting your form. Please try again.",
  "factor.webauthn": "Passkeys",
  "factor.otpViaSms": "OTP via SMS",
  "factor.emailLink": "Email link",
  "factor.smsLink": "SMS link"
}

i18n

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 keys documented above and the i18n library you already use in your project.