showAuth

client.showAuth({
  container: HTMLElement|id,
  auth: object,
  // Optional arguments
  allowLogin: boolean,
  allowWebAuthnLogin: boolean,
  allowSignup: boolean,
  allowForgotPassword: boolean,
  initialScreen: boolean,
  signupFields: string[]|object[],
  socialProviders: string[],
  showLabels: boolean,
  showRememberMe: boolean,
  canShowPassword: boolean,
  displaySafeErrorMessage: boolean,
  countryCode: string,
  onReady: function,
  theme: object,
  i18n: object,
})

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 the profile can choose his phone number to login.

  • The WebAuthn feature must be enabled on your ReachFive Console account if the profile can choose to login 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,
    initialScreen: 'login',
    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'
    }
})

Widget

Signup

showAuth signup

Signup with custom password policy

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

showAuth signup custom rules

Login

showAuth login

Login with biometric

showAuth login with biometric

Forgot Password

showAuth forgotpassword

Options

container HTMLElement |id

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

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

Whether to use popup mode.

Defaults to false.

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

Access token of the current user. Enables social login linking to an existing account.

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.

allowLogin boolean

Boolean that specifies whether login is enabled.

Defaults to true.

allowWebAuthnLogin boolean

Whether biometric login is enabled.

Defaults to false.

allowSignup boolean

Boolean that specifies if signup is enabled.

Defaults to true.

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.

initialScreen string

The widget’s initial screen.

Possible values: login, login-with-web-authn, signup or forgot-password.

Defaults to:

  • if allowLogin is set to true, it defaults to login.

  • if allowLogin is set to false and allowSignup is set to true, it defaults to signup.

  • if allowLogin is set to false and allowWebAuthnLogin is set to true, it defaults to login-with-web-authn.

  • otherwise, defaults to forgot-password.

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)

  • Password: password

  • Password confirmation: password_confirmation

  • Gender: gender

  • Birthdate: birthdate

  • Custom field: custom_fields.<custom_field_key>

  • Consent: consents.<consent_key> (the Consents feature must be enabled)

All predefined fields are required.

socialProviders string[]

List of the available social providers.

Defaults to all configured providers in your account settings.

showLabels boolean

Whether the signup form fields' labels are displayed on the login view.

Defaults to false.

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

canShowPassword boolean

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

Defaults to false.

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.

countryCode string

The ISO country code useful to format phone numbers.

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

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.

theme object

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

primaryColor string

The button and link default color.

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

Default to 3.

socialButton object

Social button theming options.

i18n object

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

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