Skip to main content

<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
PropTypeDefaultDescription
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?booleanfalseFlag where true means the handle type and value used in a successful log in action will be persisted in window.localStorage.
defaultCountryCode?stringUSDefault 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.