<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.