Hosted Pages

ReachFive offers hosted pages to simplify the integration process for authenticating users and even for resetting and changing passwords. These pages are enabled via the the ReachFive Console and help you get up and running in no time as they invoke the ReachFive SDK widgets natively. You just simply configure them from your ReachFive Console. You can add a logo, favicon, and even configure a custom background colour to match your brand’s palette.

Currently, we provide hosted pages for:

I just want to see a video

Skip ahead to a short video tutorial to configure the Authentication Hosted Page.

Set up Hosted Pages

You set up your hosted pages from your ReachFive Console. You must first configure the General Settings for hosted pages and then you can go on to configure the hosted pages individually.

Query parameters for Hosted Pages

ReachFive’s Hosted Pages feature allows you to use query parameters on the Hosted Pages endpoints to achieve certain tasks.

Query parameter format
<yourDomain>/<HP_endpoint>?<query_parameter>=<value>
Parameter Description /HP

origin

You can specify the origin (login source) in the URL as a query parameter for any of the Hosted Pages.

This value is found in the user events triggered from the Hosted Page.

all

return_to_after_email_confirmation

Returns users to a specific URL after an email confirmation as part of your signup flow.

This URL must be whitelisted in the Allowed Redirect URLs of the General settings of your Hosted Pages.

/auth

return_to_after_password_reset

Returns users to a specific URL after a password reset as part of your password reset flow.

This URL must be whitelisted in the Allowed Redirect URLs of the General settings of your Hosted Pages.

/password-reset

return_to

Redirects users to a specific URL. The Go Home link at the bottom of a Hosted Page is displayed when the return_to query parameter is used.

This URL must be whitelisted in the Allowed Redirect URLs of the General settings of your Hosted Pages.

/auth
/password-reset
/password-change
/passwordless
/webauthn-devices

redirectUri

Redirects users to a specific URL as part of your authentication flow.

/auth

Prerequisites

  • You must have at least a CRM User role.

  • You must whitelist your ReachFive account URL in the Allowed Origins (CORS) section of your First-party identity client.

  • You must whitelist your site’s authentication callback route URLs in the Allowed Callback URLs section of your First-party identity client.

Check out the Clients page if you need help whitelisting the URLs.

Instructions

  1. Go to Settings  Hosted Pages in your ReachFive Console.

  2. Choose the General Settings tab.

  3. Under API Client, choose your desired client.

    This is typically your default First-party identity client.
  4. Upload your logo.

    It adds brand identity and users can click it to return to your website or whatever URL you specify in the Website URL field.
  5. Specify the URL to which users are redirected when clicking your logo.

  6. List your Allowed Redirect URLs.

  7. Specify a background colour.

    If left blank, it defaults to a transparent background.
  8. Go to the Consent tab and enable the feature.

    If you do not, consents are not enabled from within Hosted Pages.
    What now

    After configuring the general settings, the Configure the Hosted Pages section guides you on configuring the individual hosted pages.

Configure the Hosted Pages

This section gives some guidance on configuring the individual hosted pages.

Although you cannot currently configure the Email Confirmation Hosted Page itself, there are still important steps regarding whitelisting for the Email confirmation page.

Prerequisites

Configure the widgets

Configure the Hosted Pages widgets below.

  • Authentication

  • Password editor

  • Password reset

  • Passwordless

Endpoint

/auth

The Authentication Hosted Page makes use of the showAuth widget. This allows users to log in, sign up, and request a password reset email.

  1. Ensure the Authentication page is enabled.

  2. Specify the Redirect URI.

    This is where the user is redirected after retrieving a successful access token and subsequent login/signup.
  3. In the JSON config for widget, drop in the JSON content (descriptions) for configuring the authentication page like the example below.

    {
      "showSocialLogins" : true,
      "socialProviders" : [ "facebook", "google" ],
      "theme" : {
        "primaryColor" : "#229955",
        "borderRadius" : "3",
        "socialButton" : {
          "inline" : true
        }
      },
      "initialScreen" : "signup",
      "allowLogin" : true,
      "allowForgotPassword" : true,
      "allowSignup" : true,
      "signupFields" : [ "birthdate", "email", "password", "custom_fields.sport_key", "consents.purple_paint" ]
    }
    If you want to use custom fields or consents, you must declare the specific item (as shown in the example) and not just custom_fields or consents.
  4. Don’t forget to Save your input.

  5. Check it works at <yourDomain>/auth.

Endpoint

/password-change

The Password editor Hosted Page makes use of the showPasswordEditor widget. This allows users to edit their password.

This page is only accessible to authenticated users. If SSO is enabled, the page uses the user’s cookie session. Otherwise, you must provide the user’s access token in the URL as a query parameter as such:
/password-change?accessToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...
  1. Go to the Password editor tab.

  2. Ensure the Password editor page is enabled.

  3. In the JSON config for widget, drop in the JSON content (descriptions) for configuring the Password editor page like the example below.

    {
      "promptOldPassword" : true,
      "theme" : {
        "primaryColor" : "#00bf48",
        "borderRadius" : "3",
        "socialButton" : {
          "inline" : true
        }
      }
    }
  4. Don’t forget to Save your input.

  5. Check it works at <yourDomain>/password-change.

To make sure users receive a password change/update email, make sure you have configured and saved the Password updated Template found at
Endpoint

/password-reset

The Password reset Hosted Page makes use of the showPasswordReset widget. This allows users to reset their password after receiving a password reset email.

To make sure users receive a password reset email, make sure you have configured and saved the Password reset Template found at Settings  Emails  Template  Password reset on the console.
  1. Go to the Password reset tab.

  2. Ensure the Password reset page is enabled.

  3. In the JSON config for widget, drop in the JSON content (descriptions) for configuring the Password reset page like the example below.

    {
      "theme" : {
        "primaryColor" : "#00bf48",
        "borderRadius" : "3",
        "socialButton" : {
          "inline" : true
        }
      },
      "loginLink" : "https://www.example.com/welcome-back"
    }
  4. Don’t forget to Save your input.

  5. Check it works at <yourDomain>/password-reset.

Endpoint

/passwordless

The Passwordless Hosted Page makes use of the showPasswordless widget. This allows users to login without their password.

  1. Go to the Passwordless tab.

  2. Ensure the Passwordless page is enabled.

  3. In the JSON config for widget, drop in the JSON content (descriptions) for configuring the Passwordless page like the example below. This example shows passwordless using the email magic link template.

    {
      "theme" : {
        "primaryColor" : "#274890",
        "borderRadius" : "25",
        "socialButton" : {
          "inline" : true
        }
      }
    }
  4. Don’t forget to Save your input.

  5. Check it works at <yourDomain>/passwordless.

To make sure users receive an email or SMS for passwordless login, make sure you have configured and saved the OTP - passwordless desired template (email or SMS) found at Settings  Passwordless on the console.
  • Webauthn devices

  • Email confirmation

Endpoint

/webauthn-devices

The Webauthn devices Hosted Page makes use of the showWebAuthnDevices widget. This allows users to manage their registered FIDO2 devices.

This page is only accessible to authenticated users. If SSO is enabled, the page uses the user’s cookie session. Otherwise, you must provide the user’s access token in the URL as a query parameter as such:
/webauthn-devices?accessToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...
  1. Check the FIDO2 Prerequisites to enable FIDO2.

  2. Go to the WebAuthn Devices tab.

  3. Ensure the WebAuthn Devices page is enabled.

  4. In the JSON config for widget, drop in the JSON content (descriptions) for configuring the WebAuthn Devices page like the example below.

    {
      "theme" : {
        "primaryColor" : "#274890"
      }
    }
  5. Don’t forget to Save your input.

  6. Check it works at <yourDomain>/webauthn-devices.

Endpoint

/email-confirmation

The Email confirmation page is where users are taken after clicking on the verification link sent in the confirmation email. You cannot currently configure it beyond enabling the page. However, there are some important notes to consider to successfully use this Hosted Page.

  1. Enable the Email confirmation page.

  2. Don’t forget to Save your input.

  3. Check it works at <yourDomain>/email-confirmation.

Inherited Global Settings

The Email confirmation Hosted Page inherits all of the global settings configured while setting up the Hosted Pages.

Email Signup Template

To ensure that your users receive a confirmation email, make sure you have configured and saved the Email Signup Template which is configured at Settings  Emails  Template  Signup on your ReachFive Console.

Whitelist the post-email confirmation URL

If you use return_to_after_email_confirmation as a query parameter in your /auth signup flow to redirect users after email confirmation, you must ensure this is whitelisted under Allowed Redirect URLs found at Hosted Pages  General Settings.

JSON field descriptions

Parameter Description

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.

allowLogin boolean

Boolean that specifies whether login is enabled.

Defaults to true.

allowSignup boolean

Boolean that specifies whether signup is enabled.

Defaults to true.

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.

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.

loginLink boolean

The URL to which the user is redirected after a password reset.

promptOldPassword boolean

Ask for the old password before entering a new one.

Defaults to false.

showSocialLogins boolean

Show the social login buttons.

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)

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

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.

Video tutorial

Feedback