Hosted Pages

ReachFive provides hosted pages for:

  • Authentication (sign up, login, forgot password): https://YOUR_DOMAIN/auth

  • Email confirmation: https://YOUR_DOMAIN/email-confirmation

  • Password Reset: https://YOUR_DOMAIN/password-reset

  • Password Change: https://YOUR_DOMAIN/password-change

These pages are hosted by ReachFive, which means that they embark ReachFive SDK widgets natively. You can focus on integrating hosted pages with your website, toggle a widget feature on or off, and customize every aspect of the layout directly from within the ReachFive console.

By using hosted pages, you reduce your implementation time, and are updated instantly with every roll out. Such deployments are typically more secure since hosted pages are deployed to URLs that are specific to your ReachFive tenant.

Prerequisites

Whitelist the following URLs in your selected first-party identity API client:

  • The URL of your ReachFive account in the "Allowed Origins (CORS)" field (e.g. https://brand.com).

  • Authentication callback route URLs on your website in the "Allowed Callback URLs" field (e.g. https://brand.com/logged-in, https://brand.com/signed-up).

Hosted pages setup

  1. Connect to the ReachFive console at https://console.reach5.co.

  2. Enter your account and navigate to Settings  Hosted Pages.

  3. Under Hosted Pages  General settings:

    1. Select the first-party identity API client.

    2. Upload the logo and favicon of your brand to be displayed on all pages.

    3. Configure the URL to go to when clicking on the logo ("Website URL" field).

    4. Define the list of URLs that can be used for callback after login or sign-up ("Allowed Redirect URLs" field).

    5. Set the background color for all pages ("Background Color" field).

  4. Under Hosted Pages  Authentication page:

    1. Configure the "Redirect URI" to be called during the exchange of access token.

      You can override the redirect URI parameter when calling for the /auth hosted page, as follows: https://YOUR_DOMAIN/auth?redirectUri=https://linktoyourweb.site. Note: the URL you pass as a parameter must be whitelisted.

      If you do not specify a redirect URI when calling the hosted page, the website URL is used as a fallback.

    2. Configure the showAuth widget.

  5. Under Hosted Pages  Password editor page, configure the showPasswordEditor widget.

  6. Under Hosted Pages  Password reset page, configure the showPasswordReset widget.

  7. Click Save.

Widgets integrated in Hosted Pages do not support all parameters from the UI SDK widgets. You can refer to the examples section below to get the list of supported parameters. Note that those parameters behave exactly as described in UI SDK reference documentation.

At the time of writing, the Email Confirmation page is not configurable, but still inherits from the global values set for the Logo, Website URL, and Background Color settings.

Hosted pages are activated for your ReachFive tenant.

This means you can now access these URLs, and check if the widgets layout is suitable:

  • https://YOUR_DOMAIN/auth

  • https://YOUR_DOMAIN/email-confirmation

  • https://YOUR_DOMAIN/password-reset

  • https://YOUR_DOMAIN/password-change

Hosted pages examples

This section provides widget configuration examples for each page, and the corresponding layout.

Login - /auth

A login redirects to the redirect URI set within the console, or falls back on the website URL. You can also use the query string to transfer the state of your application and manage redirection after retrieving the access token.

Authentication Widget configuration (Login)
{
  "showSocialLogins": true,
  "socialProviders": ["facebook", "google"],
  "theme" : {
    "primaryColor" : "#229955",
    "borderRadius" : "3",
    "socialButton" : {
      "inline" : true
    }
  },
  "initialScreen": "login",
  "allowLogin": true,
  "allowForgotPassword": true,
  "allowSignup": true,
  "signupFields" : ["birthdate", "email", "password"]
}

The unit for borderRadius is px.

ReachFive provides you with an authorization code which you can exchange against an access token. Then you can authenticate the user and forward to the redirectUri returned (e.g. https://brand.com/logged-in).

Signup - /auth, /email-confirmation

A signup redirects to the redirect URI set within the console, or falls back on the website URL. You can also use the query string to transfer the state of your application and manage redirection after retrieving the access token.

Important: for users to receive the signup verification email and activate their account, you must enable the corresponding template (Emails  Template  Signup) and specify https://YOUR_DOMAIN/email-confirmation within the "Redirect to" field.

You can define where to redirect the end user after the email is confirmed. To do so, add a query string parameter to your signup call as follows:

https://YOUR_DOMAIN/auth?return_to_after_email_confirmation=https://linktomyweb.site

The URL you pass as a parameter must be whitelisted.

This link will be passed as a parameter through the email confirmation link to the /email-confirmation page and will be used to redirect the end user after displaying the confirmation message.

Authentication Widget configuration (Signup)
{
  "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"]
}

The unit for borderRadius is px.

ReachFive provides you with an authorization code which you can exchange against an access token. Then you can authenticate the user and forward to the redirectUri returned (e.g. https://brand.com/logged-in).

Assuming you defined the /email-confirmation page as the redirect to and defined the return_to_after_email_confirmation parameter, a verification email is sent containing such a link to verify the user’s email address:

https://YOUR_DOMAIN/link/verify-email/dGVzdCtzaWdudXAraHArMTA5MjgrZnJhbmNvaXNAcmVhY2g1LmNvOjIxMTc5MQ?client_id=J3tVGroDowkMcdOjTqqL&redirect_url=https://YOUR_DOMAIN/email-confirmation?return_to_after_email_confirmation=https://linktomyweb.site

When clicking this link, users are redirected to https://YOUR_DOMAIN/email-confirmation?return_to_after_email_confirmation=https://linktomyweb.site, and can proceed with a login. The "Go home" link used is https://linktomyweb.site.

Forgot password - /auth, /password-reset

Important: You must enable the corresponding template (Emails  Template  Password reset) and specify https://YOUR_DOMAIN/password-reset in the "Redirect to" field.

You can define where to redirect the end user after the password is reset. To do so, add a query string parameter to your signup call as follows:

https://YOUR_DOMAIN/auth?return_to_after_password_reset=https://linktomyweb.site

The URL you pass as a parameter must be whitelisted.

This link will be passed as a parameter through the password reset link to the /password-reset page and will be used to redirect the end user after displaying the confirmation message.

Assuming you defined the /password-reset page as the redirect to and defined the return_to_after_password_reset parameter, a password reset email is sent containing such a link to verify the let users reset his password:

https://YOUR_DOMAIN/password-reset?verification_code=987646&email=john.doe@mail.com&return_to_after_password_reset=https://linktomyweb.site

When clicking this link, users are redirected to https://YOUR_DOMAIN/password-reset?return_to_after_password_reset=https://linktomyweb.site, they then can update their password and proceed with a login. The "Go home" link used is https://linktomyweb.site.

Change password - /password-change

You can redirect users to https://YOUR_DOMAIN/password-change to let them change their password.

Unless SSO is enabled in the ReachFive console, you must pass an accessToken in the query string when calling the page:

https://YOUR_DOMAIN/password-change?accessToken=eyJ0…​PgQA.

Password Editor widget configuration
{
  "promptOldPassword": true,
    "i18n": {
        "newPassword": "Your new password",
        "oldPassword": "Your old password",
        "passwordConfirmation": "Confirm your new password"
    },
  "theme" : {
    "primaryColor" : "#229955",
    "borderRadius" : "3",
  }
}

The unit for borderRadius is px.

Once users are authenticated, they can change their password.

You can define where to redirect the end user after the password is changed. To do so, add a query string parameter to your change password call as follows:

https://YOUR_DOMAIN/password-change?redirectUrl=https://linktomyweb.site

The URL you pass as a parameter must be whitelisted.

This link will be used to redirect the end user after displaying the confirmation message.