showPasswordless

client.showPasswordless({
  container: HTMLElement|id,
  // Optional arguments
  authType: string,
  showSocialLogins: boolean,
  socialProviders: string[],
  showIntro: boolean,
  countryCode: string,
  auth: object,
  onReady: function,
  onSuccess: function,
  onError: function,
  theme: object,
  i18n: object,
  recaptcha_enabled: boolean,
  recaptcha_site_key: string,
  phoneNumberOptions:  object
})

See examples

Description

Show the authentication widget with passwordless.

Examples

With an email
With a phone number

client.showPasswordless({
    container: 'passwordless-container',
    showSocialLogins: true,
    socialProviders: ['facebook', 'google'],
    auth: {
        redirectUri: 'http://localhost:3000/local-sandbox/auth-callback'
    },
    onReady: instance => {
      // Destroy the widget
      // if (...) instance.destroy()
    },
    onSuccess: () => {
        console.log("Success!")
    },
      onError: (error: ErrorResponse) => {
        console.error(error)
    },
    theme: {
        primaryColor: '#274890',
        borderRadius: '25',
        socialButton: {
            inline: true
        }
    },
    i18n: {
        'passwordless.intro': 'Enter your email to sign in.'
    }
})

client.showPasswordless({
    container: 'passwordless-container',
    showSocialLogins: true,
    socialProviders: ['facebook', 'google'],
    authType: 'sms',
    countryCode: 'US',
    onReady: instance => {
      // Destroy the widget
      // if (...) instance.destroy()
    },
    onSuccess: () => {
        console.log("Success!")
    },
      onError: (error: ErrorResponse) => {
        console.error(error)
    },
    theme: {
        primaryColor: '#274890',
        borderRadius: '25',
        socialButton: {
            inline: true
        }
    },
    i18n: {
        'passwordless.sms.intro': 'Enter your phone number to sign in.',
    }
})

Parameters

container HTMLElement id

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

authType boolean

The passwordless auth type (magic_link or sms).

Defaults to magic_link.

showSocialLogins boolean

Show the social login buttons.

Defaults to false.

socialProviders string[]

Lists the available social providers. This is an array of strings. If you pass an empty array, social providers are not displayed.

You can also specify variants for a provider as a key:value pair:

<provider>: <variant> (1)

1	Where `provider` is the provider like `line` and the variant is the specific version of that provider like `korea`. Example `line:korea`.

showIntro boolean

Show the introduction text.

Defaults to true.

countryCode string

The ISO country code useful to format phone numbers.

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

auth object

List of authentication options

responseType string

The desired OAuth2 grant type. Use code to request an authorization code (recommended) or token for a token set (implicit grant, discouraged).

Defaults to code when redirectUri is provided, and to token otherwise. For messenger account linking, responseType should be set to messenger_code.

redirectUri string

The URL where the user will be redirected back to after authentication.

This value is required with code response type and defaults to the current page with token response type. For messenger account linking, redirectUri should be set with the redirect_uri query param provided by Facebook on URL.

state string

Persist data between user being directed to the authorization server and back again.

Use case: help mitigate CSRF attacks or indicating which app’s pages to redirect to after authorization. Could be Base64 encoded JSON object, JWT or nonce.

prompt string

Specify whether the social provider should explicitly prompt the user for reauthentication or consent.

The defined values are:

none: Require that no user interaction take place. This is typically used to silenty check for existing authentication and/or consent.
login: The social provider should prompt the user for reauthentication before consent, otherwise an error must be returned to the client (login_required).
consent: The social provider should prompt for consent, otherwise an error must be returned to the client (consent_required).
select_account: The social provider should prompt for user account selection, and if account selection is impossible, return an error (account_selection_required).

nonce string

String value used to associate a local session with an ID Token, and to mitigate replay attacks. The value is passed through unmodified to the ID Token.

popupMode boolean

Boolean that specifies whether to use popup mode or not.

Defaults to false.

Options

true = A popup window is opened to the social provider login page.
false = Instead of a popup window, the user is redirected (in the same window) to the social provider login page.

This mode is not recommended due to known bugs in Android or Firefox in iOS.

origin string

Free text parameter describing the source of the login (only for reporting purposes).

scope string[]

List of space-delimited, case-sensitive strings representing the requested scope.

Optional if the fetchBasicProfile option is set to true and the profile, email, phone and openid scope values are allowed in client configuration.

fetchBasicProfile boolean

Fetch user’s basic profile information when they sign in. Adds profile, email, phone and openid to the requested scopes.

Defaults to true.

accessToken string

Enables social login linking to an existing account with a fresh token (less than 5 minutes old).

providerScope string

List of space-delimited, case-sensitive strings representing the requested scope at the social provider.

Defaults to the scope configured for the given provider in your ReachFive console.

Only for login with social provider.

requireRefreshToken boolean

If set to true, an OAuth 2.0 Refresh Token will be present in the token response.

Defaults to false.

Fetch user basic profile information when they sign in. Adds profile, email, phone and openid to the requested scope.

Refresh Tokens are only available in confidential Clients (with a configured authentication method) or for public Clients that enforce PKCE in the authorization code grant. The Refresh Token option must also be selected.

returnProviderToken boolean

Boolean that specifies whether you should return the provider access token.

If set to true, you retrieve the provider and provider access token as part of the authentication result.

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

…
    onSuccess: () ⇒ {
        // Handle success for showPasswordless
        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.showPasswordless example

…
    onError: (error)  ⇒ {
        // Handle error for showPasswordless
        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.

recaptcha_enabled boolean

Boolean that specifies whether reCAPTCHA is enabled or not.

recaptcha_site_key string

The SITE key that comes from your reCAPTCHA setup. This must be paired with the appropriate secret key that you received when setting up reCAPTCHA.

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.showAuth({
    i18n: {
      email: 'Your email address, por favor.'
    },
    ...
})

See comprehensive label list
Not all labels listed apply to showPasswordless

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