Authenticate with password: SDK flow

In our examples, we’ll use the stable version installed via NPM.

Check out the SDK Core docs for complete installation instructions.

Here’s the code to instantiate our client.

import { createClient } from '@reachfive/identity-core';

const DOMAIN        = 'Here paste your ReachFive domain';
const CLIENT_ID     = 'Here paste your ReachFive client ID';

const client = createClient({ domain: DOMAIN, clientId: CLIENT_ID });

When the user clicks on the Signup button, the client.signup method sends the user’s data to the ReachFive server and redirects the user after a successful authentication to a redirect URI.

const REDIRECT_URI = 'Here paste your redirect URI';

function signup(event) {
    event.preventDefault();
    const form = event.target('signup-form');
    const formData = new FormData(form);

    client.signup({
      data: {
          givenName: formData.get('given_name'),
          familyName: formData.get('family_name'),
          email: formData.get('email'), (1)
          phoneNumber: formData.get('phone_number'), (2)
          customIdentifier: formData.get('custom_identifier'), (3)
          password: formData.get('password')
        },
        auth: { redirectUri: REDIRECT_URI }
    })
    .catch(console.error);
}

1	Use `email` for email.
2	Use `phoneNumber` for phone numbers.
3	Use `custom_identifier` for custom identifiers. Some example use cases are usernames, customer numbers, or loyalty numbers.

Email
Phone number
Custom identifier

<form id="signup-form" onsubmit="signup">
    <div>
        <label for="given_name">Given name</label>
        <input type="text" id="given_name" name="given_name">
    </div>
    <div>
        <label for="family_name">Family name</label>
        <input type="text" id="family_name" name="family_name">
    </div>
    <div>
        <label for="email">Email</label>
        <input type="email" id="email" name="email">
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
    </div>
    <button type="submit">Signup</button>
</form>

To allow users to login with a phone number, the SMS feature on your account must be enabled.

<form id="signup-form" onsubmit="signup">
    <div>
        <label for="given_name">Given name</label>
        <input type="text" id="given_name" name="given_name">
    </div>
    <div>
        <label for="family_name">Family name</label>
        <input type="text" id="family_name" name="family_name">
    </div>
    <div>
        <label for="phone_number">Phone number</label>
        <input type="phone" id="phone_number" name="phone_number">
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
    </div>
    <button type="submit">Signup</button>
</form>

<form id="signup-form" onsubmit="signup">
    <div>
        <label for="given_name">Given name</label>
        <input type="text" id="given_name" name="given_name">
    </div>
    <div>
        <label for="family_name">Family name</label>
        <input type="text" id="family_name" name="family_name">
    </div>
    <div>
        <label for="email">Email</label>
        <input type="email" id="email" name="email">
    </div>
    <div>
        <label for="custom_identifier">Username</label> (1)
        <input type="text" id="custom_identifier" name="custom_identifier">
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
    </div>
    <button type="submit">Signup</button>
</form>

1	Where the Username is the `custom_identifier`.

At submission, call the loginWithPassword method which takes the user credentials and the callback URL as arguments.

Email
Phone number
Custom identifier

Example form

<form id="login-email-form" onsubmit="login">
    <div>
        <label for="email">Email</label>
        <input type="text" id="email" name="email">
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
    </div>
    <button type="submit">Login</button>
</form>

Code

const REDIRECT_URI = 'Here paste your redirect URI';

function login(event) {
    event.preventDefault();

    const form = event.target('login-phone-form');
    const formData = new FormData(form);

    client.loginWithPassword({
        email: formData.get('email'),
        password: formData.get('password'),
        auth: { redirectUri: REDIRECT_URI }
    })
    .catch(console.error);
}

To allow users to login with a phone number, the SMS feature on your account must be enabled. The user doesn’t need to verify their phone number to login.

Example form

<form id="login-phone-form" onsubmit="login">
    <div>
        <label for="phone_number">Phone number</label>
        <input type="text" id="phone_number" name="phone_number">
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
    </div>
    <button type="submit">Login</button>
</form>

Code

const REDIRECT_URI = 'Here paste your redirect URI';

function login(event) {
    event.preventDefault();

    const form = event.target('login-phone-form');
    const formData = new FormData(form);

    client.loginWithPassword({
        phoneNumber: formData.get('phone_number'),
        password: formData.get('password'),
        auth: { redirectUri: REDIRECT_URI }
    })
    .catch(console.error);
}

Example form

<form id="login-custom_identifier-form" onsubmit="login">
    <div>
        <label for="custom_identifier">Username</label>
        <input type="text" id="custom_identifier" name="custom_identifier">
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
    </div>
    <button type="submit">Login</button>
</form>

Code

const REDIRECT_URI = 'Here paste your redirect URI';

function login(event) {
    event.preventDefault();

    const form = event.target('login-phone-form');
    const formData = new FormData(form);

    client.loginWithPassword({
        customIdentifier: formData.get('custom_identifier'),
        password: formData.get('password'),
        auth: { redirectUri: REDIRECT_URI }
    })
    .catch(console.error);
}

Authenticate with password: SDK flow

Signup

Example signup form

Login