Phone Identifier Enrollment Screen

The Phone Identifier Enrollment screen is part of the Identifier First Authentication flow and allows the user to select a method for verifying their phone number before continuing the signup process. For more details, review Activate and Configure Attributes for Flexible Identifiers.

The Universal Login Context Data contains unique-per-screen transaction and configuration data. Optional context data can be configured in the Management API with the context_configuration parameter. Read Universal Login Context for information about context data and read Configure Screens for details about optional context data.

interface PhoneIdentifierEnrollment {
  client: Client;
  organization?: Organization;
  prompt: Prompt;
  screen: {
    data: {
      phone_number: string;
    }
    links: {
      edit_identifier: string;
    };
    name: string;
  };
  transaction: {
    locale: string;
    state: string;
  };
}

context_configuration: [
  "branding.settings",
  "branding.themes.default",
  "client.logo_uri",
  "client.description",
  "client.metadata.[key_name]",
  "organization.display_name",
  "organization.branding",
  "organization.metadata.[key_name]",
  "screen.texts",
  "tenant.name",
  "tenant.friendly_name",
  "tenant.enabled_locales",
  "transaction.connection.metadata.[key_name]",
  "untrusted_data.submitted_form_data",
  "untrusted_data.authorization_params.ui_locales",
  "untrusted_data.authorization_params.login_hint",
  "untrusted_data.authorization_params.screen_hint",
  "untrusted_data.authorization_params.ext-[key_name]"
]

We recommend using the Auth0 ACUL JS SDK to access the context data for each screen. The SDK provides properties and methods that simplify accessing the data.

Initialize the PhoneIdentifierEnrollment class to access it’s properties and methods.

import PhoneIdentifierEnrollment from '@auth0/auth0-acul-js/phone-identifier-enrollment';
const phoneIdentifierEnrollmentManager = new PhoneIdentifierEnrollment();

// SDK Properties return a string, number or boolean
// ex. "phone-identifier-enrollment"
phoneIdentifierEnrollmentManager.screen.name;

// SDK Methods return an object or array
// ex. { phone_number: "+1234567890" } 
phoneIdentifierEnrollmentManager.screenData();

The Phone Identifier Enrollment screen supports the following operations.

Send an OTP code via the user's chosen method to the phone number provided in the previous step.

JS SDK Method: continuePhoneEnrollment()

phoneIdentifierChallenge.continuePhoneEnrollment({
  type: "text" | "voice"
});

Return the user to the previous step.

JS SDK Method: resendToPrevious()

// This method does not support any parameters
phoneIdentifierChallenge.returnToPrevious();