Hosted Pages

Define your configuration key. The configuration key is used to retrieve your Hosted Pages set from the frontend. The configuration key must be in snake_case. This key is added to the Hosted Page URL as a query parameter, for example: https://yourDomain/auth?conf_key=your_configuration_key.

Select your First-party Identity client from the dropdown menu.

(Optional) Upload a logo to be displayed on your Hosted Pages.

(Optional) Upload a favicon to be displayed in the browser tab.

Add the Website URL. This is the target URL when users click on your logo.

Add your Allowed Redirect URLs. These URLs are used to redirect users after successful authentication or password operations. You can specify multiple valid URLs (one by line), starting with http:// or https://.

(Optional) Choose a background color.

Don’t forget to Save your input.

Ensure the Authentication page is enabled.

Specify the Redirect URI.

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

{
  "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",
    {
      "key": "consents.accept_confidential", (1)
      "defaultValue" : false, (2)
      "required" : true (3)
    }
  ],
  "recaptcha_enabled": true, (4)
  "recaptcha_site_key": <SITE_KEY>, (5)
  "captchaFoxEnabled": true, (6)
  "captchaFoxSiteKey": <SITE_KEY>, (7)
  "captchaFoxMode": "inline" (8)
}

Don’t forget to Save your input.

Check it works at <yourDomain>/auth?conf_key=<configuration_key>.

Enable the Email confirmation page.

Click Display a link to redirect to homepage if you want to display a link to redirect users back to the site’s home page after confirming.

Don’t forget to Save your input.

Check it works at <yourDomain>/email-confirmation?conf_key=<configuration_key>.

Go to the Password editor tab.

Ensure the Password editor page is enabled.

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

Don’t forget to Save your input.

Check it works at <yourDomain>/password-change?conf_key=<configuration_key>.

Go to the Password reset tab.

Ensure the Password reset page is enabled.

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"
}

Don’t forget to Save your input.

Check it works at <yourDomain>/password-reset?conf_key=<configuration_key>.

Go to the Passwordless tab.

Ensure the Passwordless page is enabled.

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.

{
  "socialProviders" : [ "facebook", "google" ], (1)
  "theme" : {
    "primaryColor" : "#274890",
    "borderRadius" : "25",
    "socialButton" : {
      "inline" : true
    }
  },
  "recaptcha_enabled": true, (2)
  "recaptcha_site_key": <SITE_KEY>, (3)
  "captchaFoxEnabled": true, (4)
  "captchaFoxSiteKey": <SITE_KEY>, (5)
  "captchaFoxMode": "inline" (6)

}

Don’t forget to Save your input.

Check it works at <yourDomain>/passwordless?conf_key=<configuration_key>.

Check the FIDO2 Prerequisites to enable FIDO2.

Go to the WebAuthn Devices tab.

Ensure the WebAuthn Devices page is enabled.

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"
  }
}

Don’t forget to Save your input.

Check it works at <yourDomain>/webauthn-devices?conf_key=<configuration_key>.

Enable the Double opt-in consent confirmation page.

Check it works at <yourDomain>/doi-consent-confirmation?conf_key=<configuration_key>.

In the ReachFive Console, go to Hosted Pages  Third party consents.

Add the desired text in the Content of the consent page text area.

Specify the Accept button text.

Specify the Decline button text.

Add any desired custom styles in standard CSS format.