Hosted pages

ReachFive provides hosted pages for:

  • Authentication (subscription, sign-in, forgot password): https://{TENANT}/auth
  • Email confirmation: https://{TENANT}/email-confirmation
  • Password Reset: https://{TENANT}/password-reset
  • Password Change: https://{TENANT}/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.

URL Whitelisting

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

Configure behavior and diplay

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

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

  3. Under General Settings:

    a. Select the first-party identity API client.
    b. Configure the URL of your brand logo to display on all pages (Logo URL).
    c. Configure the logo link, if applicable (Website URL).

    Important: If you do not specify a redirect URI when calling hosted pages, the Website URL is used as a fallback.

  4. Under Pages:

    a. Set the background color for all pages.
    b. Configure the ReachFive widgets.

    Note: Refer to the Examples section for sample configurations and For the complete list of parameters, refer to the SDK reference documentation.

  5. Click Save.

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://{TENANT}/auth
  • https://{TENANT}/email-confirmation
  • https://{TENANT}/password-reset
  • https://{TENANT}/password-change

Examples

This section provides widget configuration examples and the resulting layout per hosted page: expand/collapse arrows to preview the page and corresponding URL, at every step.

Login - /auth

A user login redirects to the Website URL set within the console, or the redirectUri, if passed in the query string. You can also use the query string to transfer the state of your application.

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

Note: The unit for borderRadius is px.

Calling the hosted page with redirectUri and state

https://{TENANT}/auth?redirectUri=https://brand.com/logged-in&state=2bab0...22f9e

hosted pages login

Redirection after login

https://brand.com/logged-in&code=YXxf...Ftlk&state=2bab0...22f9e

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 Website URL set within the console, or the redirectUri, if passed in the query string. You can also use the query string to transfer the state of your application.

Important: For users to receive the signup verification email and activate their account, you must have enabled the corresponding template (Emails > Template > Signup) and specified https://{TENANT}/email-confirmation within the Redirect to field.

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

Note: The unit for borderRadius is px.

Calling the hosted page

https://{TENANT}/auth?redirectUri=https://brand.com/signed-up&state=2bab0...22f9e

hosted pages signup

A verification email is sent containing such a link to verify the user’s email address:

https://{TENANT}/link/verify-email/dGVzdCtzaWdudXAraHArMTA5MjgrZnJhbmNvaXNAcmVhY2g1LmNvOjIxMTc5MQ?client_id=J3tVGroDowkMcdOjTqqL

When clicking this link, users are redirected to https://{TENANT}/email-confirmation, and can proceed with a login:

hosted pages email confirmed

The Go home link is the Website URL.

Forgot password - /auth, /password-reset

Important: You must have enabled the corresponding template (Emails > Template > Password reset) and specified https://{TENANT}/password-reset in the Redirect to field.

Password Reset Widget configuration

{
  "loginLink" : "https://brand.com"
}

Note: The loginLink parameter defines the URL users can access after password reset, at the bottom of the widget.

Ask for a password reset from the hosted page

https://{TENANT}/auth

hosted pages forgot password
Email sent

https://{TENANT}/auth

hosted pages forgot password email sent
Activate email link

Users click on the link received by email - https://{TENANT}/password-reset?verification_code=083046&email=user%40reach5.co - and are redirected:

User resets password

https://{TENANT}/password-reset?verification_code=083046&email=user%40reach5.co

hosted pages reset your password
Password is reset

https://{TENANT}/password-reset?verification_code=083046&email=user%40reach5.co

hosted pages password reset

Change password - /password-change

You can redirect users to https://{TENANT}/password-change to udpate their password.

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

https://{TENANT}/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",
  }
}

Note: The unit for borderRadius is px.

Once users are authenticated, they can reset their password:

hosted pages password change