Signup ID Screen

The Signup ID screen is part of the Identifier First Authentication flow and collects the user's identifier. Depending on your tenant setup, this identifier can be an email, phone number, or username.

Signup ID

Context Data

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 SignupId {
  client: Client;
  organization?: Organization;
  prompt: Prompt;
  screen: {
    name: string;
    links: {
      login: string;
    };
    captcha?: Captcha;
  };
  transaction: {
    state: string;
    locale: string;
    errors?: Error[];
    country_code?: CountryCode;
    connection: DbConnection | PasswordlessConnection;
    alternate_connections?: Connection[];
  };
};

Was this helpful?

/

Accessing Context Data

Using the Auth0 ACUL JS SDK to access the context data for each screen is recommended. The SDK provides properties and methods that simplify accessing the data.

Initialize the SignupId class to access its properties and methods.

import SignupId from '@auth0/auth0-acul-js/signup-id';
const signupIdManager = new SignupId();

// SDK Properties return a string, number or boolean
// ex. "signup-id"
signupIdManager.screen.name;

// SDK Methods return an object or array
// ex. { login: "/login_url"} 
signupIdManager.screenLinks();

Was this helpful?

/

SDK Properties & Methods

The following screen-specific properties and methods are available on this screen:

Property or Method Type Description
screen.loginLink

string

Link to the login flow.

transaction.isPasskeyEnabled

boolean

Are passkeys enabled?

transaction.getOptionalIdentifiers()

object

Which optional identifiers can the user sign up with?

transaction.getRequiredIdentifiers()

object

Which required identifiers can the user sign up with?

transaction.getUsernamePolicy()

object

What are the requirements when creating a username?

Screen Operations

The Signup ID screen supports the following operations.

Continue with Identifiers

Continue the transaction with the user's identifiers. This operation takes the user to the next step in the authentication flow. Depending on the server configuration, this screen can include inputs for one or more of the following:

  • email

  • username

  • phone number

For more details, review Flexible Identifiers.

JS SDK Method: signup()

Parameter                  Type Required Description
email string Conditionally The user’s email.
phone string Conditionally The user’s phone number.
username string Conditionally The user’s username.
captcha string Conditionally The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled.
ulp-${my-field} string No Additional data collected from the user. This data is accessible in the pre-user-registration Action trigger. 

signupIdManager.signup({
  email: <EmailFieldValue>,
  phone: <PhoneFieldValue>,
  username: <UsernameFieldValue>
});

Was this helpful?

/

Continue with Connection

Continue with a social or enterprise connection. This operation redirects the user to the social or enterprise identity provider (IdP) for authentication. Review Social Identity Providers and Enterprise Identity Providers for details.

JS SDK Method: socialSignup()

Parameter Type Required Description
connection string Yes The identifier for the connection. 

// Get the desired connection
const selectedConnection = alternateConnections.filter((connection) => 
  connection.strategy === "google-oauth2"
});

signupIdManager.socialSignup({
  connection: selectedConnection.strategy
});

Was this helpful?

/