Getting Started

This page guides you on getting started with ReachFive’s Core SDK and includes the following sections:

Install with npm

If you’re experienced with npm and feel comfortable jumping straight in, the latest release is available on npm using the command below. Otherwise, follow along with Install ReachFive.

npm install @reachfive/identity-core

Browser compatibility

The Core SDK is compatible with the latest versions of:

Internet Explorer is no longer supported as of the 17 August, 2021. It has been deprecated by Microsoft.


Install ReachFive

To install the ReachFive client, you need to obtain your ReachFive domain as well as your Client ID. These are found on the ReachFive Console. After that, you’ll just need to paste the code snippet from Create ReachFive Client into your application or directly in a webpage (CDN).

There are two steps:

Get Domain and Client ID

Prerequisites

  • You must have access to the ReachFive Console.

  • You must have a Developer, Manager, or Administrator role.

Instructions

  1. Log in to your ReachFive Console.

  2. Go to Settings.

  3. Copy your ReachFive domain.

    get domain
  4. Go to Settings  Clients.

  5. Create a New Client or select an existing client.

  6. Copy the desired Client Id you wish to use in your application.

    Make sure to keep this handy when you create the ReachFive client.
  7. Under Allowed Origins (CORS), add all URLs that will use the ReachFive Core SDK.

    clients clientId CORS

Create ReachFive Client

You can use Node or the CDN to create a ReachFive client.

  • Node

  • CDN

  1. Install the latest release of ReachFive from npm using the following command:

    npm install @reachfive/identity-core
  2. Copy the following code snippet into your application. See the descriptions below for more details.

    import { createClient } from '@reachfive/identity-core'; (1)
    
    const DOMAIN        = 'Here paste your ReachFive domain'; (2)
    const CLIENT_ID     = 'Here paste your ReachFive client ID'; (2)
    
    const client = createClient({ (3)
        // Required parameters
        domain: DOMAIN, (2)
        clientId: CLIENT_ID, (2)
        // Optional parameter
        language: 'Here paste a language code' (4)
    });
    1 Import the createClient method from the @reachfive/identity-core npm package.
    2 Use your DOMAIN and CLIENT_ID that you got from the ReachFive Console.
    3 Use the createClient method to initialize a ReachFive client.
    4 If you want to provide a language, paste the language code. This will override the language detected in the browser by ReachFive via the user’s locale.
    Currently supported languages
    • de - Deutsch

    • en - English

    • es - Español

    • fr - Français

    • it - Italiano

    • nl - Nederlands

    • ru - Ру́сский (Russian)

    • pt - Portuguese

Copy the following code snippet into your application. See the descriptions below for more details.

const DOMAIN        = 'Paste your ReachFive domain here'; (1)
const CLIENT_ID     = 'Paste your ReachFive Client ID here'; (1)

<script src="https://unpkg.com/@reachfive/identity-core@x.y.z/umd/identity-core.min.js"></script> (2)

const client = reach5.createClient({ (3)
    // Required parameters
    domain: DOMAIN,
    clientId: CLIENT_ID,
    // Optional parameter
    language: 'Paste language code here' (4)
});
1 Use your DOMAIN and CLIENT_ID that you got from the ReachFive Console.
2 Replace x.y.z with the version you require or simply use @latest for the latest version.
3 Use the createClient method on the reach5 global variable to initialize a ReachFive client.
4 If you want to provide a language, paste the language code. This will override the language detected in the browser by ReachFive via the user’s locale.
Currently supported languages
  • de - Deutsch

  • en - English

  • es - Español

  • fr - Français

  • it - Italiano

  • nl - Nederlands

  • ru - Ру́сский (Russian)

  • pt - Portuguese

Test drive the Core SDK

So you have successfully installed ReachFive and you want to test it out before dropping it into your application.

In this brief tutorial, we test out the ReachFive client to make sure all is functioning properly. We will create a very simple application that leverages your recently-installed ReachFive client so you can see it in action.

See the video below for a sneak peek at your super simple test-drive in action.

Prerequisites

  • You must have access to the ReachFive Console.

  • You must have a Developer, Manager, or Administrator role.

  • You must have a code editor or IDE such as Visual Studio Code or IntelliJ.

  • You must have npm installed.

  • You must have installed the ReachFive @reachfive/identity-core npm package.

    If you haven’t, download it now:

    npm install @reachfive/identity-core

Instructions

  1. Create a folder called test-drive in your desired location.

  2. Create a new file called package.json in your test-drive folder and copy the following into that file:

    {
        "name": "test-drive",
        "version": "1.0.0",
        "description": "test-drive",
        "main": "index.js",
        "scripts": {
          "start": "parcel index.html",
          "test": "echo \"Error: no test specified\" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "dependencies": {
          "@reachfive/identity-core": "^1.20.1",
          "parcel-bundler": "^1.12.5"
        }
      }
  3. From the root of your test-drive folder, run:

    npm install
    This installs the dependencies listed in the package.json file.
  4. Create a new file called index.html in your test-drive folder and copy the following into that file:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Test Drive ReachFive</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    </head>
    
    <body>
        <script src="core.js"></script> (1)
    
        <h1 style="text-align: center; margin: 25px;">My Super Simple ReachFive Sandbox</h1>
    
        <div style="width: 50%; margin: auto;">
        <form id="signup-form" onsubmit="signup(event)"> (2)
            <div class="mb-3">
              <label for="exampleInputEmail1" class="form-label">Email address</label>
              <input type="email" name="email" class="form-control" placeholder="Email" aria-describedby="emailHelp"> (3)
              <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Password</label>
              <input type="password" name="password" class="form-control" placeholder="Password"> (3)
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1">@</span>
                <input type="givenName" class="form-control" placeholder="Name" name="givenName" aria-label="Username" aria-describedby="basic-addon1"> (3)
              </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
    </body>
    
    </html>
    1 Calls the core.js file that you will create in the next step.
    2 The signup method is trigged on the onsubmit event.
    3 The form fields.
  5. Create a new filed called core.js in your test-drive folder and copy the following into that file:

    import { createClient } from '@reachfive/identity-core' (1)
    
    const DOMAIN = 'YOUR_REACHFIVE_DOMAIN' (2)
    const CLIENT_ID = 'YOUR_REACHFIVE_CLIENTID' (3)
    
    const client = createClient({ (4)
        domain: DOMAIN,
        clientId: CLIENT_ID
    })
    
    function signup(e) {
        e.preventDefault();
        var form = document.getElementById('signup-form')
        var formData = new FormData(form)
    
        client.signup({ (5)
            data: { (6)
                email: formData.get('email'),
                password: formData.get('password'),
                givenName: formData.get('givenName')
            },
            auth: { (7)
                redirectUri: 'http://localhost:1234'
            }
        })
            .then(() => { (8)
                console.log("Signup")
    
                client.on('authenticated', authResult => {
                    console.log("Listening 1")
                    console.log("authResult1", authResult)
                })
            })
            .catch(console.log)
    
        return
    }
    
    window.signup = signup
    1 Imports the ReachFive client.
    2 Your ReachFive domain.
    3 Your ReachFive client_id.
    4 The client variable (which contains your domain and client_id).
    5 Calls the signup method.
    6 Sets the sign up data for the sign up form; in this case, email, password, and name.
    7 Uses the auth options; in this case, sets the redirectUri to http://localhost:1234.
    8 The response for the signup method. Here, we simply log to the console. Typically, you would receive token information.
    See the authResult object for more details.
  6. From the root of your test-drive folder, run:

    npm run start
  7. Open your browser to localhost:1234.

  8. Sign up a new user.

  9. Go to your ReachFive Console.

  10. Navigate to Analytics  Profiles to see your newly-created user.

Hooray!

You have officially taken ReachFive for a test drive. Now, go put it into action.

Check out all of the methods for the Core SDK, available on the sidebar to your left.

Feedback