Add Email/Phone Verification

Available from version > react-native-cotter@0.3.6

Most of the time, it's required for you to check if the user's identifier (their email or phone number) is valid. With Cotter, you can verify your users via email, SMS, or WhatsApp.

Step 1: Set Up Deep Linking

The verification will follow OAuth's PKCE flow which will open an in-app browser where your user can enter the OTP sent to their email/phone.

Pick a unique URL scheme for redirecting the user back to your app after the verification in the in-app browser is successful. For this example, we'll use myexample://auth_callback .

Follow the guide under Sign in with Email/Phone – Step 3: Setting up Deep Linking, then come back to this step.

Step 2: Update your Sign Up Function

Make sure you followed the guide for Sign In with Device. Update your Sign Up Function that you made on Step 3.

Verifying Before Registering the User

Verify the email/phone number first, then continue registering the user if verification is successful

This will work the following way:

1. The user will be asked to verify their email or phone number

2. If verification successful, we'll create a new User

3. Then, set up the current device as trusted.

If the user already exists but doesn't have a Trusted Device set up (for example from logging-in to your website):

1. The user will be asked to verify their email or phone number

2. Then if verification successful, set up the current device as trusted.

import { Cotter } from "react-native-cotter";

class SignUp extends Component {
  ...
  // Remove your `register` function, and update to the following
  // signupOrLogin function.
  // This function handles both Sign Up and Login
  
  const signupOrLogin = async () => {
    let cotter = new Cotter(API_KEY_ID);

    try {
      // Fetch user using the User API
      // identifier = user's email
      const user = await cotter.getUserByIdentifier(identifier);
      console.log(user);

      if (validUUID(user.ID) && user.enrolled.includes('TRUSTED_DEVICE')) {
        // ========================
        //      Existing User
        // ========================
        // A) User already have a trusted device
        // proceed with SignInWithDevice
        cotter.signInWithDevice(
          identifier,
          resp => console.log('Success', resp),
          errs => console.log('Error', errs),
        );
      } else {
        // ===========================================================
        //      New User OR Existing but No Trusted Device
        // ===========================================================
        // B) User doesn't exists OR exists doesn't have a trusted device
        // 1️⃣ Verify Email
        await cotter.signInWithEmailLink(
          'myexample://auth_callback',
          resp => {
            // 2️⃣  Proceed with registering this device as a trusted device
            registerDeviceAsTrusted();
          },
          err => alert('Error', err),
          {email: identifier},
        );
      }
    } catch (e) {
      alert('Error', err);
    }
  };
  
  const registerDeviceAsTrusted = async () => {
    let cotter = new Cotter(API_KEY_ID);
    const user = await cotter.getLoggedInUser();
    user.registerDevice(
      resp => console.log('Success', resp),
      err => console.log('Error', err),
    );
  };
  ...
}