Authentication with a Phone Number

Installation

Refer to the Identity for Web guide to install the ReachFive SDK.

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

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

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

If an email address is provided instead of a phone number, the user’s identifier will be his email.

You’ll find below an example of a signup form which registers a new profile to your account.

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.

<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="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>
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') || null,
          phoneNumber: formData.get('phone_number'),
          password: formData.get('password')
        },
        auth: { redirectUri: REDIRECT_URI }
    })
    .catch(console.error);
}

Phone number verification

If the phone number verification is set up on your account, the user will receive an SMS with a code to verify his phone number. Have a look at the Set and customize verification SMS guide to configure the Signup verification SMS template.

Use the verifyPhoneNumber method to validate the user’s code.

One of the required argument is the user’s access token that you can retrieve through an authorization code request or an implicit flow.

<form id="verification-phone-form" onsubmit="verifyPhoneNumber">
    <div>
        <label for="phone_number">Phone number</label>
        <input type="phone" id="phone_number" name="phone_number">
    </div>
    <div>
        <label for="code">Code</label>
        <input type="text" id="code" name="code">
    </div>
    <button type="submit">Verify</button>
</form>
const ACCESS_TOKEN = 'Here paste the user\'s access token';

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

    client.verifyPhoneNumber({
        accessToken: ACCESS_TOKEN,
        phoneNumber: formData.get('phone_number'),
        verificationCode: formData.get('code')
    });
}

Login

Finally, build the login form with a phone number. At submission, call the loginWithPassword method which takes the user credentials and the callback URL as arguments.

The user doesn’t need to verify his 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);
}

Phone number update

The user can change his phone number provided that the phone number verification is enabled on your account. Refer to the Set and customize verification SMS guide to enable and configure the Verification SMS template.

The client.updatePhoneNumber will take into argument the new phone number and the user access token that you can retrieve through an authorization code request or an implicit flow.

<form id="update-phone-form" onsubmit="updatePhoneNumber">
    <div>
        <label for="new_phone_number">New phone number</label>
        <input type="phone" id="new_phone_number" name="new_phone_number">
    </div>
    <button type="submit">Update</button>
</form>
const ACCESS_TOKEN = 'Here paste the user\'s access token';

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

    client.updatePhoneNumber({
        accessToken: ACCESS_TOKEN,
        phoneNumber: formData.get('new_phone_number')
    });
}