showAuth

client.showAuth({
  container: HTMLElement|id,
  auth: object,
  // Optional arguments
  allowLogin: boolean,
  allowWebAuthnLogin: boolean,
  allowSignup: boolean,
  allowWebAuthnSignup: boolean,
  allowForgotPassword: boolean,
  allowPhoneNumberResetPassword: boolean,
  allowAccountRecovery: boolean,
  allowCustomIdentifier: boolean,
  allowAuthentMailPhone: boolean,
  enablePasswordAuthentication: boolean,
  initialScreen: string,
  signupFields: string[]|object[], (1)
  redirectUrl: string,
  socialProviders: string[],
  showLabels: boolean,
  showRememberMe: boolean,
  canShowPassword: boolean,
  displaySafeErrorMessage: boolean,
  countryCode: string,
  onReady: function,
  returnToAfterEmailConfirmation: string, (2)
  returnToAfterPasswordReset: string, (2)
  theme: object,
  i18n: object,
  recaptcha_enabled: boolean,
  recaptcha_site_key: string,
  phoneNumberOptions:  object
})

1	You can force certain fields to be optional when needed by passing the `key` for the field and `required: false` as shown in the Examples.
2	These parameters should only be used with Hosted Pages.

Description

Show the authentication widget with signup, login, and forgot password forms.

The RaaS feature must be enabled on your ReachFive Console account.
The SMS feature must be enabled on your ReachFive Console account if you want your users to be able to log in with their phone number.
The WebAuthn feature must be enabled on your ReachFive Console account if you want your users to be able to sign up or log in with biometrics.

Examples

// The SMS feature is disabled on the ReachFive account
client.showAuth({
    container: 'auth-container',
    auth: {
      redirectUri: 'https://example.com/auth-callback'
    },
    allowForgotPassword: false,
    allowPhoneNumberResetPassword: false,
    allowAuthentMailPhone: true,
    initialScreen: 'login',
    redirectUrl: 'https://example-email-validate.com',
    signupFields: [
      { key: 'given_name', label: 'Given name', required: false },
      { key: 'family_name', label: 'Family name', required: false },
      'email',
      'password',
      'password_confirmation',
      'consents.newsletter',
      'custom_fields.loyalty_card_number'
    ],
    socialProviders: ['facebook', 'google'],
    showLabels: true,
    showRememberMe: true,
    countryCode: 'US',
    onReady: instance => {
      // Destroy the widget
      // if (...) instance.destroy()
    },
    theme: {
      primaryColor: '#274890',
      borderRadius: '25',
      socialButton: {
        inline: true
      }
    },
    i18n: {
      email: 'Email'
    }
})

Set password constraints in the ReachFive Console (Settings Security Password policy).

Forgot Password

Parameters

allowForgotPassword boolean

Boolean that specifies if the forgot password option is enabled.

Defaults to true.

If the allowLogin and allowSignup properties are set to false, the forgot password feature is enabled even if allowForgotPassword is set to false.

allowQuickLogin boolean

Boolean that specifies whether quick login is enabled.

Defaults to true.

enablePasswordAuthentication boolean

Boolean that specifies whether password authentication is enabled or not.

Defaults to true.

true = password authentication is available. In this case, the password field is shown.
false = password authentication is unavailable. In this case, the password field is not shown.

allowWebAuthnLogin boolean

Boolean that specifies whether biometric login is enabled.

Defaults to false.

allowWebAuthnSignup boolean

Boolean that specifies whether biometric signup is enabled.

Defaults to false.

allowLogin boolean

Boolean that specifies whether login is enabled.

Defaults to true.

allowSignup boolean

Boolean that specifies whether signup is enabled.

Defaults to true.

allowCustomIdentifier boolean

Boolean that specifies whether an additional field for the custom identifier is shown.

Defaults to false.

allowAuthentMailPhone boolean

Boolean that specifies whether to show the option to authenticate via email or phone number. Defaults to true.

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.

canShowPassword boolean

Whether or not to provide the display password in clear text option.

Defaults to false.

container HTMLElement id

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

countryCode string

The ISO country code useful to format phone numbers.

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

displaySafeErrorMessage boolean

Whether or not to display a safe error message on password reset, given an invalid email address. This mode ensures not to leak email addresses registered to the platform.

Defaults to false.

i18n object

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

You can use the i18n object to override social login button text by passing socialButton.<provider>.title.

Example

client.showAuth({
    container: 'auth-container',
    auth: {
      redirectUri: 'https://example.com/auth-callback'
    },
    i18n: {
      "socialButton.kakaoTalk.title": "카카오톡으로 로그인" (1)
    }
})

1	Users see "카카오톡으로 로그인" (Log in with KakaoTalk) for the KakaoTalk login option in this example.

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.

initialScreen string

The widget’s initial screen.

See initialScreen logic for more details on logic.

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.

allowAccountRecovery goolean

Boolean if the account recovery option is displayed or not.

Defaults to false.

If allowForgotPassword is set to true and allowAccountRecovery is also set to true, allowAccountRecovery takes priority.

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.

returnToAfterEmailConfirmation string

Returned in the redirectUrl as a query parameter, this parameter is used as the post-email confirmation URL.

This parameter should only be used with Hosted Pages.

returnToAfterPasswordReset string

Returned in the redirectUrl as a query parameter, this parameter is used to redirect users to a specific URL after a password reset.

This parameter should only be used with Hosted Pages.

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.

showRememberMe boolean

Whether the Remember me checkbox is displayed on the login view. Affects user session duration.

The account session duration configured in the ReachFive Console (Settings Security SSO) applies when:

The checkbox is hidden from the user
The checkbox is visible and selected by the user

If the checkbox is visible and not selected by the user, the default session duration of 1 day applies.

Defaults to false.

signupFields string

List of the signup fields to display in the form.

Defaults to ["given_name", "family_name", "email", "password", "password_confirmation"].

A field is either a string representing the field’s key (predefined, custom field, or consent) or an object with attributes overriding the default field configuration.

Predefined fields

Given name: given_name
Family name: family_name
Email address: email
Phone number: phone_number (both the international format and the national conventions of the account’s country are accepted if configured in your account settings)
Custom Identifier: custom_identifier (this is used to authenticate with something other than a username or password). For more, see the user profile model page.
Password: password
Password confirmation: password_confirmation
Gender: gender
Birthdate: birthdate
Custom field: custom_fields.<custom_field_key>
Consent: consents.<consent_key> or consents.<consent_key>.v<consent_version_id> (the Consents feature must be enabled)

All predefined fields are required.

You can pass a field as an object to override default values:

Assign defaultValue
Require field
Hide field

...
    {
        "key": "family_name",
        "defaultValue": "Moreau", (1)
        "required": true
    }
...

1	Assign a `defaultValue` if so desired.

...
    {
        "key": "field",
        "defaultValue": true,
        "required": true (1)
    }
...

1	Explicitly require the field.

...
    {
        "key": "given_name",
        "defaultValue": "Kylian",
        "type": "hidden" (1)
    }
...

1	The `"hidden"` type hides a field while still having a value. In this case, the value of `Kylian` remains for `given_name` despite not appearing on the form.

Be sure that any consent you may define in the signupFields property is not archived. If the consent is archived, this causes the widget to not display as well as throwing an error like so:

archived consent <name> cannot be displayed

If no version ID is set in a consent field’s path, the latest version of the consent will be displayed.

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

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.

recaptcha_enabled boolean

Boolean that specifies whether reCAPTCHA is enabled or not.

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.

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.

allowPhoneNumberResetPassword string

Boolean that specifies whether or not users can use a phone number to reset their password.

values

true = yes, users can reset their password with a phone number.
false = no, users cannot reset their password with a phone number.

Defaults to false.

`initialScreen` logic

The initialScreen parameter sets the widget’s initial screen. Depending on your requirements, this can be explicitly set to a certain screen. The options are:

Value Description

Value	Description
`login`	Displays the login screen.
`login-with-web-authn`	Displays the login screen with WebAuthn options such as biometrics.
`signup`	Displays the signup screen.
`forgot-password`	Displays the forgot-password screen.

login

Displays the login screen.

login-with-web-authn

Displays the login screen with WebAuthn options such as biometrics.

signup

Displays the signup screen.

forgot-password

Displays the forgot-password screen.

However, if no value is provided, the initial screen follows the logic provided here.

Flow chart for initialScreen of the widget when no value is provided

`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

showAuth

Description

Examples

Widget

Signup

Signup with custom password policy

Login

Login with biometric

Forgot Password

Parameters

initialScreen logic

theme attributes

`initialScreen` logic

`theme` attributes