showProfileEditor

client.showProfileEditor({
  container: HTMLElement|id,
  accessToken: string,
  fields: Field[], (1)
  // Optional arguments
  showLabels: boolean,
  countryCode: string,
  redirectUrl: string,
  onReady: function,
  onSuccess: function,
  onError: function,
  theme: object,
  i18n: object,
  phoneNumberOptions:  object
})

You can force certain fields to be optional when needed by passing the key for the field and required: false as shown in the example below.

showProfileEditor optional fields

client.showProfileEditor({
    container: 'profile-editor-container',
    accessToken,
    fields: [
        { key: 'phone_number', required: false }, (1)
        'given_name',
        'family_name',
        'gender',
        'birthdate',
        'consents.newsletter',
        'custom_fields.loyalty_card_number'
    ],
    showLabels: true,
    countryCode: 'US',
    onReady: instance => {
      // Destroy the widget
      // if (...) instance.destroy()
    },
})

1	`phone_number` is optional in this example.

Description

Show the widget allowing the current profile to edit his data.

Examples

import { ErrorResponse } from '@reachfive/identity-ui'

const accessToken = // Here paste the authorization token of the profile retrieved after login

// The SMS feature is disabled on the ReachFive account
client.showProfileEditor({
    container: 'profile-editor-container',
    accessToken,
    fields: [
        'given_name',
        'family_name',
        'phone_number',
        'gender',
        'birthdate',
        'consents.newsletter',
        'custom_fields.loyalty_card_number'
    ],
    showLabels: true,
    countryCode: 'US',
    onReady: instance => {
      // Destroy the widget
      // if (...) instance.destroy()
    },
    onSuccess: () => {
        console.log("Profile updated with success!")
    },
    onError: (error: ErrorResponse) => {
        console.error(error)
    },
    theme: {
        primaryColor: '#274890',
        borderRadius: '#374890'
    },
    i18n: {
        'save': 'Save your profile\'s data'
    }
})

Parameters

container HTMLElement id

The DOM element or the id of a DOM element in which the widget should be embedded.

accessToken function

The profile’s access token.

fields Field[]

List of the fields to display in the form.

You can force certain fields to be optional when needed by passing the key for the field and required: false as shown here.

The following fields cannot be changed with this widget:

password
password_confirmation

It is not possible to update the primary identifier submitted at registration (email or phone number). When the primary identifier is the email address (SMS feature disabled), users can only enter a phone number and update without limit.

Note on consents

Any consent used in the fields property that is archived won’t be checkable on the showProfileEditor widget. This means the user cannot interact with the archived consent (unless they had previously accepted the consent), potentially lessening the overall user experience. If the now archived consent was in fact previously accepted, the user is able to uncheck (refuse) the consent.

Archived consent with no user history/previously rejected

Consent to receiving monthly newsletter.

Previously accepted consent

Consent to receiving monthly newsletter.

showLabels boolean

Boolean for whether the signup form fields' labels are displayed on the login view.

Defaults to false. If set to true, the labels are shown which includes an asterisk (*) next to required fields.

countryCode string

The ISO country code useful to format phone numbers.

Defaults to the predefined country code in your account settings or FR.

redirectUrl string

The URL sent in the email to which the user is redirected. This URL must be whitelisted in the Allowed Callback URLs field of your ReachFive client settings.

onReady function

Callback function called after the widget has been successfully loaded and rendered inside the container. The callback is called with the widget instance.

onSuccess function

Callback function called when the request was successful.

You can override this function with custom logic if desired:

client.showProfileEditor example

…
    onSuccess: () ⇒ {
        // Handle success for showProfileEditor
        console.info('Success!')
    },
…

onError function

Callback function called when the request has failed.

See our full list of SDK and API errors.

You can override this function with custom logic if desired:

client.showProfileEditor example

…
    onError: (error)  ⇒ {
        // Handle error for showProfileEditor
        console.error("An error occurred", error)
    },
…

theme object

The options to set up to customize the appearance of the widget.

Below is an example of some of the theme attributes.

For a full list, see theme attributes.

primaryColor string

The button and link default color.

Defaults to #229955.

borderRadius string

The radius of the social login button and other input (in px).

This can be used to make inline and/or circle social login buttons.

Defaults to 3.

socialButton object

Social button theming options.

Parameters

inline- Boolean that specifies if the buttons are inline (horizonally-aligned).
textVisible - Boolean that specifies if the text is visible.
fontWeight - Specifies the font-weight (such as normal, bold, or 900).
fontSize - Specifies the font-size.
lineHeight - Specifies the line-height.
paddingX - Specifies the padding for the x axis. (left and right)
paddingY - Specifies the padding for the y axis. (top and bottom)
borderRadius - Specifies the border-radius.
borderWidth - Specifies the border-width.
focusBoxShadow - Boolean that specifies if there is a box shadow on the button or not.

i18n object

Widget labels and error messages to override. Falls back to the default wordings in en, fr, es, it and nl.

Using the i18n field, you can override default labels to suit your particular setup.

You might re-word the socialAccounts.linkNewAccount or change the way other wordings display to the user while leaving the remaining text on the widget intact.

phoneNumberOptions object

Object that lets you set display options for the phone number field.

Options

withCountrySelect: boolean that lets you display the option to select the country for a phone number. Defaults to false.
- false: only the language configured for the account is displayed. No other countries are available in this case.
- true: users are able to select a country from the dropdown.

`theme` attributes

base

attribute

animateWidgetEntrance

fontSize

smallTextFontSize

lineHeight

headingColor

textColor

mutedTextColor

borderRadius

borderColor

borderWidth

backgroundColor

primaryColor

dangerColor

warningColor

successColor

lightBackgroundColor

maxWidth

paddingY

paddingX

spacing

_absoluteLineHeight

_blockInnerHeight

_blockHeight

link

color

decoration

hoverColor

hoverDecoration

input

color

placeholderColor

background

disabledBackground

boxShadow

focusBoxShadow

fontSize

lineHeight

paddingX

paddingY

borderRadius

borderColor

borderWidth

focusBorderColor

height

button

fontWeight

fontSize

lineHeight

paddingX

paddingY

borderRadius

borderWidth

focusBoxShadow

height

socialButton

inline

textVisible

fontWeight

fontSize

lineHeight

paddingX

paddingY

borderRadius

borderWidth

focusBoxShadow

height

passwordStrengthValidator

color0

color1

color2

color3

color4

UI labels

ReachFive has a set of default labels for UI components and fields. This includes a range of things from names and sign up fields to verification code fields, and more.

Using the i18n field, you can override these default labels to suit your particular setup.

Example

client.showProfileEditor({
    i18n: {
      email: 'Your email address, por favor.'
    },
    …
})

See comprehensive label list
Not all labels listed apply to showProfileEditor

Label Description

Label	Description
`gender`	Gender
`givenName`	First name
`familyName`	Last name
`email`	Email address
`phoneNumber`	Phone number
`identifier`	Email address or phone number
`verificationCode`	Verification code
`password`	Password
`oldPassword`	Old password
`newPassword`	New password
`friendlyName`	Device’s name
`passwordConfirmation`	Password confirmation
`biometrics`	Biometrics
`birthdate`	Birth date
`save`	Save
`resetPassword`	Please enter your new password.
`send`	Send
`lastTimeYouLoggedInWith`	Last time you logged in with
`notYourAccount`	Not your account?
`unexpectedErrorOccurred`	Unexpected error occurred. Please retry later.
`confirmYourIdentity`	To continue, please confirm your identity.
`rememberMe`	Remember me
`or`	or
`back`	Back
`remove`	Remove
`add`	Add
`address.streetAddress`	Street address
`address.locality`	City
`address.region`	Region
`address.postalCode`	Postal code
`address.country`	Country
`login.title`	Log in
`login.submitLabel`	Log in
`login.withBiometrics`	Login with biometrics
`login.withPassword`	Login with password
`login.forgotPasswordLink`	Don’t remember your password?
`login.signupLinkPrefix`	Do not have an account?
`login.signupLink`	Sign up
`login.password.userAnotherIdentifier`	Use another identifier
`signup.title`	Sign up
`signup.submitLabel`	Sign up
`signup.loginLinkPrefix`	Already have an account?
`signup.loginLink`	Log in
`signup.withBiometrics`	Signup with biometrics
`signup.withPassword`	Signup with password
`forgotPassword.title`	Forgot password
`forgotPassword.prompt`	Enter the email address associated with your account, and we’ll email you a link to reset your password.
`forgotPassword.prompt.phoneNumber`	Please enter the phone number associated with your account. We will text you a code to reset your password.
`forgotPassword.useEmailButton`	Use email address
`forgotPassword.usePhoneNumberButton`	Use phone number
`forgotPassword.backToLoginLink`	Back to Login
`forgotPassword.submitLabel`	Send reset link
`forgotPassword.submitLabel.code`	Send reset code
`forgotPassword.verificationCode`	Please enter the verification code we’ve sent to your phone, along with your new password.
`forgotPassword.successMessage`	An email containing a link to update your password has been sent to you.
`passwordless.intro`	Enter your email to sign in or create an account.
`passwordless.emailSent`	We sent you a link to sign in to your email.
`passwordless.sms.intro`	Enter your phone number to sign in or create an account.
`passwordless.email.verification.intro`	Please enter the verification code we sent to your email.
`passwordless.sms.verification.intro`	Please enter the verification code we sent to your phone.
`passwordReset.title`	Reset your password
`passwordReset.intro`	Please type your new password.
`passwordReset.successTitle`	Password updated
`passwordReset.successMessage`	Your password has been modified. Go back to login page to authenticate yourself.
`passwordReset.loginLink`	Login
`accountRecovery.title`	Recover your account
`accountRecovery.prompt`	Enter the email address associated with your account, and we will send you a link to reset your credentials.
`accountRecovery.submitLabel`	Send reset link
`accountRecovery.successMessage`	An email containing a link to reset your credentials has been sent to you.
`accountRecovery.backToLoginLink`	Back to Login
`accountRecovery.password.title`	Create your password
`accountRecovery.passkeyReset.title`	Create a new passkey
`accountRecovery.passkeyReset.successTitle`	Passkeys updated
`accountRecovery.passkeyReset.successMessage`	Your previous passkeys have been invalidated. You can remove them from your credential manager as well. You can go back to the Login page to authenticate yourself.
`accountRecovery.passkeyReset.loginLink`	Login
`accountRecovery.passkeyReset.intro`	Sign-in faster and safer with passkeys.
`accountRecovery.passkeyReset.subtitle1`	What are passkeys?
`accountRecovery.passkeyReset.legend1`	Passkeys are encrypted digital keys you create using your fingerprint, face, or screen lock.
`accountRecovery.passkeyReset.subtitle2`	Where are passkeys saved?
`accountRecovery.passkeyReset.legend2`	Passkeys are saved to your password manager, so you can sign in on other devices.
`accountRecovery.passkeyReset.button`	Continue
`emailEditor.intro`	Please enter your new email address
`emailEditor.successMessage`	Your request has been processed successfully. Please check now your mailbox: a verification email has been sent to it.
`emailEditor.successMessage`	Your request has been processed successfully. Please check now your mailbox: a verification email has been sent to it.
`phoneNumberEditor.intro`	Please enter your new phone number
`phoneNumberEditor.verification.intro`	Please enter the verification code we sent to your phone.
`socialAccounts.noLinkedAccount`	No linked third-party account
`socialAccounts.linkNewAccount`	Link new account
`webauthn.registredDevices.list`	List of registered devices
`webauthn.registredDevices.no.list`	No registered device
`webauthn.registredDevices.add`	Enter a device name below to add a device
`webauthn.registredDevices.confirm.removal`	Do you confirm that you want to remove the device?
`webauthn.registredDevices.createdAt`	Created at
`webauthn.registredDevices.lastUsedAt`	Last used at
`webauthn.friendly.name`	Device’s name
`passwordStrength.minimum.required`	The minimum required strength is
`passwordStrength.score0`	Very weak
`passwordStrength.score1`	Weak
`passwordStrength.score2`	Medium
`passwordStrength.score3`	Good
`passwordStrength.score4`	Excellent
`day`	Day
`month`	Month
`year`	Year
`january`	January
`february`	February
`march`	March
`april`	April
`may`	May
`june`	June
`july`	July
`august`	August
`september`	September
`october`	October
`november`	November
`december`	December
`dateFormat`	mm/dd/yyyy
`genders.male`	Male
`genders.female`	Female
`genders.other`	Other
`form.required.fields`	Required fields
`validation.birthdate.dayOfMonth`	The day doesn’t look right. Be sure to use a 2-digit number that is a day of the month.
`validation.birthdate.yearLimit`	Age must be between 6 and 129.
`validation.birthdate.year`	The year doesn’t look right. Be sure to use an actual date of birth with four digits.
`validation.required`	This field is required.
`validation.checked`	Please check the box to continue.
`validation.email`	This is not a valid email.
`validation.phone`	This is not a valid phone number.
`validation.identifier`	This is not a valid email or phone number.
`validation.integer`	This is not a valid integer.
`validation.float`	This is not a valid float number.
`validation.date`	This is not a valid date. The expected format is 'mm/dd/yyyy'
`validation.passwordMatch`	Passwords are not the same.
`validation.password.must.contain`	Your password must contain:
`validation.password.minLength`	At least {min} characters.
`validation.password.maxLength`	Please limit your password to a maximum of {max} characters.
`validation.password.minStrength`	Some of the most used words and names may be prohibited.
`validation.password.specials.characters`	At least one special character.
`validation.password.specials.lowercase`	At least one lowercase character.
`validation.password.specials.uppercase`	At least one uppercase character.
`validation.password.specials.digit`	At least one digit character.
`mfa.register.email`	Enable email 2FA
`mfa.verify.email`	Please enter the code you received by Email
`mfa.email.explain`	Use your email identifier as a 2FA
`mfa.email.explain.required`	Please activate your email as second factor to log in
`mfa.email.registered`	Email registered as 2FA
`mfa.phoneNumber.explain`	Use this phone number as a 2FA
`mfa.verify.sms`	Please enter the code you received by SMS
`mfa.phoneNumber.registered`	Phone number registered as 2FA
`mfa.register.phoneNumber`	Enable 2FA
`mfa.email.alreadyRegistered`	Email already registered as a 2FA
`mfa.stepUp.start`	Start a strong authentication
`mfa.stepUp.trustDevice`	Trust this device
`mfa.select.factor`	Please select your factor
`mfa.email.remove.explain`	Disable email second factor
`mfa.phoneNumber.remove.explain`	Disable phone number second factor
`mfa.remove.email`	Disable email second factor
`mfa.remove.phoneNumber`	Disable phone number as second factor
`mfa.email.removed`	Email as a second factor has been disabled
`mfa.phoneNumber.removed`	Phone number disabled as a second factor
`mfaList.noCredentials`	No credentials.
`mfaList.createdAt`	Created at

gender

Gender

givenName

First name

familyName

Last name

email

Email address

phoneNumber

Phone number

identifier

Email address or phone number

verificationCode

Verification code

password

Password

oldPassword

Old password

newPassword

New password

friendlyName

Device’s name

passwordConfirmation

Password confirmation

biometrics

Biometrics

birthdate

Birth date

save

Save

resetPassword

Please enter your new password.

send

Send

lastTimeYouLoggedInWith

Last time you logged in with

notYourAccount

Not your account?

unexpectedErrorOccurred

Unexpected error occurred. Please retry later.

confirmYourIdentity

To continue, please confirm your identity.

rememberMe

Remember me

or

back

Back

remove

Remove

add

Add

address.streetAddress

Street address

address.locality

City

address.region

Region

address.postalCode

Postal code

address.country

Country

login.title

login.submitLabel

login.withBiometrics

login.withPassword

login.forgotPasswordLink

Don’t remember your password?

login.signupLinkPrefix

Do not have an account?

login.signupLink

login.password.userAnotherIdentifier

Use another identifier

signup.title

signup.submitLabel

signup.loginLinkPrefix

Already have an account?

signup.loginLink

signup.withBiometrics

Signup with biometrics

signup.withPassword

Signup with password

forgotPassword.title

Forgot password

forgotPassword.prompt

Enter the email address associated with your account, and we’ll email you a link to reset your password.

forgotPassword.prompt.phoneNumber

Please enter the phone number associated with your account. We will text you a code to reset your password.

forgotPassword.useEmailButton

Use email address

forgotPassword.usePhoneNumberButton

Use phone number

forgotPassword.backToLoginLink

Back to Login

forgotPassword.submitLabel

Send reset link

forgotPassword.submitLabel.code

Send reset code

forgotPassword.verificationCode

Please enter the verification code we’ve sent to your phone, along with your new password.

forgotPassword.successMessage

An email containing a link to update your password has been sent to you.

passwordless.intro

Enter your email to sign in or create an account.

passwordless.emailSent

We sent you a link to sign in to your email.

passwordless.sms.intro

Enter your phone number to sign in or create an account.

passwordless.email.verification.intro

Please enter the verification code we sent to your email.

passwordless.sms.verification.intro

Please enter the verification code we sent to your phone.

passwordReset.title

Reset your password

passwordReset.intro

Please type your new password.

passwordReset.successTitle

Password updated

passwordReset.successMessage

Your password has been modified. Go back to login page to authenticate yourself.

passwordReset.loginLink

accountRecovery.title

Recover your account

accountRecovery.prompt

Enter the email address associated with your account, and we will send you a link to reset your credentials.

accountRecovery.submitLabel

Send reset link

accountRecovery.successMessage

An email containing a link to reset your credentials has been sent to you.

accountRecovery.backToLoginLink

Back to Login

accountRecovery.password.title

Create your password

accountRecovery.passkeyReset.title

Create a new passkey

accountRecovery.passkeyReset.successTitle

Passkeys updated

accountRecovery.passkeyReset.successMessage

Your previous passkeys have been invalidated. You can remove them from your credential manager as well. You can go back to the Login page to authenticate yourself.

accountRecovery.passkeyReset.loginLink

accountRecovery.passkeyReset.intro

Sign-in faster and safer with passkeys.

accountRecovery.passkeyReset.subtitle1

What are passkeys?

accountRecovery.passkeyReset.legend1

Passkeys are encrypted digital keys you create using your fingerprint, face, or screen lock.

accountRecovery.passkeyReset.subtitle2

Where are passkeys saved?

accountRecovery.passkeyReset.legend2

Passkeys are saved to your password manager, so you can sign in on other devices.

accountRecovery.passkeyReset.button

Continue

emailEditor.intro

Please enter your new email address

emailEditor.successMessage

Your request has been processed successfully. Please check now your mailbox: a verification email has been sent to it.

emailEditor.successMessage

Your request has been processed successfully. Please check now your mailbox: a verification email has been sent to it.

phoneNumberEditor.intro

Please enter your new phone number

phoneNumberEditor.verification.intro

Please enter the verification code we sent to your phone.

socialAccounts.noLinkedAccount

No linked third-party account

socialAccounts.linkNewAccount

Link new account

webauthn.registredDevices.list

List of registered devices

webauthn.registredDevices.no.list

No registered device

webauthn.registredDevices.add

Enter a device name below to add a device

webauthn.registredDevices.confirm.removal

Do you confirm that you want to remove the device?

webauthn.registredDevices.createdAt

Created at

webauthn.registredDevices.lastUsedAt

Last used at

webauthn.friendly.name

Device’s name

passwordStrength.minimum.required

The minimum required strength is

passwordStrength.score0

Very weak

passwordStrength.score1

Weak

passwordStrength.score2

Medium

passwordStrength.score3

Good

passwordStrength.score4

Excellent

day

Day

month

Month

year

Year

january

January

february

February

march

March

april

April

may

May

june

June

july

July

august

August

september

September

october

October

november

November

december

December

dateFormat

mm/dd/yyyy

genders.male

Male

genders.female

Female

genders.other

Other

form.required.fields

Required fields

validation.birthdate.dayOfMonth

The day doesn’t look right. Be sure to use a 2-digit number that is a day of the month.

validation.birthdate.yearLimit

Age must be between 6 and 129.

validation.birthdate.year

The year doesn’t look right. Be sure to use an actual date of birth with four digits.

validation.required

This field is required.

validation.checked

Please check the box to continue.

validation.email

This is not a valid email.

validation.phone

This is not a valid phone number.

validation.identifier

This is not a valid email or phone number.

validation.integer

This is not a valid integer.

validation.float

This is not a valid float number.

validation.date

This is not a valid date. The expected format is 'mm/dd/yyyy'

validation.passwordMatch

Passwords are not the same.

validation.password.must.contain

Your password must contain:

validation.password.minLength

At least {min} characters.

validation.password.maxLength

Please limit your password to a maximum of {max} characters.

validation.password.minStrength

Some of the most used words and names may be prohibited.

validation.password.specials.characters

At least one special character.

validation.password.specials.lowercase

At least one lowercase character.

validation.password.specials.uppercase

At least one uppercase character.

validation.password.specials.digit

At least one digit character.

mfa.register.email

Enable email 2FA

mfa.verify.email

Please enter the code you received by Email

mfa.email.explain

Use your email identifier as a 2FA

mfa.email.explain.required

Please activate your email as second factor to log in

mfa.email.registered

Email registered as 2FA

mfa.phoneNumber.explain

Use this phone number as a 2FA

mfa.verify.sms

Please enter the code you received by SMS

mfa.phoneNumber.registered

Phone number registered as 2FA

mfa.register.phoneNumber

Enable 2FA

mfa.email.alreadyRegistered

Email already registered as a 2FA

mfa.stepUp.start

Start a strong authentication

mfa.stepUp.trustDevice

Trust this device

mfa.select.factor

Please select your factor

mfa.email.remove.explain

Disable email second factor

mfa.phoneNumber.remove.explain

Disable phone number second factor

mfa.remove.email

Disable email second factor

mfa.remove.phoneNumber

Disable phone number as second factor

mfa.email.removed

Email as a second factor has been disabled

mfa.phoneNumber.removed

Phone number disabled as a second factor

mfaList.noCredentials

No credentials.

mfaList.createdAt

Created at