Password authentication options

This page covers how to set up your ReachFive project to allow users to authenticate with either a phone number, email, or custom identifier.

Installation

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

Signup and login

You’ll find below an example of a signup form which registers a new profile to your account. You’ll also see login instructions in the applicable tab.

Signup

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.

Login

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

  • Email

  • Phone number

  • Custom identifier

Signup

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

Login

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

Signup

To allow a user to login with their 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>

Login

The user doesn’t need to verify their phone number to login. 
<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>
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);
}

Signup

<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="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.

Login

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

Implementation

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.