> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Signup

> Describes all the properties and methods available to customize the Universal Login `signup` screen.

The Signup class implements the `signup` screen functionality. This screen collects the user's identifier and password. Depending on your tenant, this identifier can be an email, phone number, or username.

<Frame>
  <img style={{maxHeight:"400px"}} src="https://mintcdn.com/docs-dev-actions-triggers-prototype/aEQNasKiS5oso5hx/docs/images/cdy7uua7fh8z/5IrmDuvj5xma8DmkIMJ7ol/42363cde670f86561666c9e930f76883/Screenshot_2025-02-05_at_15.43.23.png?fit=max&auto=format&n=aEQNasKiS5oso5hx&q=85&s=91e308d909213f3fb291b0ea46b6fda2" alt="ACUL Signup screen image" width="374" height="736" data-path="docs/images/cdy7uua7fh8z/5IrmDuvj5xma8DmkIMJ7ol/42363cde670f86561666c9e930f76883/Screenshot_2025-02-05_at_15.43.23.png" />
</Frame>

## Constructors

Create an instance of Signup screen manager:

```typescript Example theme={null}
import Signup from '@auth0/auth0-acul-js/signup';
const signupManager = new Signup();
signupManager.signup({
  email: 'test@example.com',
  password: 'P@$wOrd123!',
});
```

## Properties

<ParamField body="branding" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/BrandingMembers">BrandingMembers</a></span>}>
  Provides branding-related configurations, such as branding theme and settings.
</ParamField>

<ParamField body="client" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/ClientMembers">ClientMembers</a></span>}>
  Provides client-related configurations, such as `id`, `name`, and `logoUrl`, for the `signup` screen.
</ParamField>

<ParamField body="organization" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/OrganizationMembers">OrganizationMembers</a></span>}>
  Provides information about the user's Organization, such as `id` and `name`.
</ParamField>

<ParamField body="prompt" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/PromptMembers">PromptMembers</a></span>}>
  Contains data about the current prompt in the authentication flow.
</ParamField>

<ParamField body="screen" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/ScreenMembersOnSignup">ScreenMembersOnSignup</a></span>}>
  Contains details specific to the `signup` screen, including its configuration and context.
</ParamField>

<ParamField body="tenant" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/TenantMembers">TenantMembers</a></span>}>
  Contains data related to the tenant, such as `id` and associated metadata.
</ParamField>

<ParamField body="transaction" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/TransactionMembersOnSignup">TransactionMembersOnSignup</a></span>}>
  Provides transaction-specific data, such as active identifiers and flow states.
</ParamField>

<ParamField body="untrustedData" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/UntrustedDataMembers">UntrustedDataMembers</a></span>}>
  Handles untrusted data passed to the SDK, such as user input during login.
</ParamField>

<ParamField body="user" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/UserMembers">UserMembers</a></span>}>
  Details of the active user, including `username`, `email`, and `roles`.
</ParamField>

## Methods

<ParamField body="changeLanguage" type="Promise<void>">
  This method changes the display language of the Universal Login page.

  ```typescript Example theme={null}
  import Signup from '@auth0/auth0-acul-js/signup';
  const signupManager = new Signup();
  signupManager.changeLanguage({
    language: 'fr',
  });
  ```

  **Method Parameters**

  <Expandable title="Parameters">
    <ParamField body="options">
      [LanguageChangeOptions](/docs/libraries/acul/js-sdk/Screens/interfaces/LanguageChangeOptions).
    </ParamField>

    <ParamField body="language" type="string" required>
      The locale code for the desired language (for example, `'en'`, `'fr'`, `'es'`).
    </ParamField>

    <ParamField body="persist?" type="&#x22;session&#x22;">
      When set to `'session'`, the selected language persists for the duration of the session.
    </ParamField>

    <ParamField body="[`key`: `string`]" type="&#x22;string&#x22; | &#x22;number&#x22; | &#x22;boolean&#x22; | &#x22;undefined&#x22;">
      Additional custom fields prefixed with `ulp-` (for example, `'ulp-custom-field'`).
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="federatedSignup" type="Promise<void>">
  This method handles the submission of the social signup form. It is similar to the [signup](#signup) method but is used for social signups.

  ```typescript Example theme={null}
  import Signup from '@auth0/auth0-acul-js/signup';
  const signupManager = new Signup();
  signupManager.federatedSignup({
    connection: 'google-oauth2',
  });
  ```

  **Method Parameters**

  <Expandable title="Parameters">
    <ParamField body="options">
      [FederatedSignupPayloadOptions](/docs/libraries/acul/js-sdk/Screens/interfaces/FederatedSignupPayloadOptions).
    </ParamField>

    <ParamField body="connection" type="string" required>
      The social connection name to use.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="getErrors" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/Error">Error</a>[]</span>}>
  This method retrieves the array of transaction errors from the context, or an empty array if none exist. An array of error objects from the transaction context.
</ParamField>

<ParamField body="getSignupIdentifiers" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/Identifier">Identifier</a>[] | null</span>}>
  This method returns the list of enabled identifiers for the signup form, marking each as required or optional based on transaction config. An array of identifier objects (for example, email, phone, username).

  ```typescript Example theme={null}
  import Signup from '@auth0/auth0-acul-js/signup';
  const signupManager = new Signup();
  const identifiers = signupManager.getSignupIdentifiers();
  // [{ type: 'email', required: true }, { type: 'username', required: false }]
  ```
</ParamField>

<ParamField body="pickCountryCode" type="Promise<void>">
  This method redirects the user to the country code selection list, where they can update the country code prefix for their phone number.

  ```typescript Example theme={null}
  import Signup from '@auth0/auth0-acul-js/signup';
  const signupManager = new Signup();
  signupManager.pickCountryCode();
  ```
</ParamField>

<ParamField body="signup" type="Promise<void>">
  This method handles the submission of the signup form.

  ```typescript Example theme={null}
  import Signup from '@auth0/auth0-acul-js/signup';
  const signupManager = new Signup();
  signupManager.signup({
    email: 'test@example.com',
    password: 'P@$wOrd123!',
  });
  ```

  **Method Parameters**

  <Expandable title="Parameters">
    <ParamField body="options">
      [SignupPayloadOptions](/docs/libraries/acul/js-sdk/Screens/interfaces/SignupPayloadOptions).
    </ParamField>

    <ParamField body="email?" type="string">
      The user's email.
    </ParamField>

    <ParamField body="username?" type="string">
      The user's identifier.
    </ParamField>

    <ParamField body="phoneNumber?" type="string">
      The user's phone number.
    </ParamField>

    <ParamField body="password?" type="string">
      The user's password.
    </ParamField>

    <ParamField body="captcha?" type="string">
      The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has [Bot Detection](/docs/secure/attack-protection/bot-detection) enabled.
    </ParamField>

    <ParamField body="[`key`: `string`]" type="&#x22;string&#x22; | &#x22;number&#x22; | &#x22;boolean&#x22; | &#x22;undefined&#x22;">
      Additional custom fields prefixed with `ulp-` (for example, `'ulp-custom-field'`).
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="validatePassword" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/PasswordValidationResult">PasswordValidationResult</a></span>}>
  This method returns an object of type [PasswordValidationResult](/docs/libraries/acul/js-sdk/Screens/interfaces/PasswordValidationResult) indicating whether the password is valid and why.

  ```typescript Example theme={null}
  import Signup from '@auth0/auth0-acul-js/signup';
  const signupManager = new Signup();
  const result = signupManager.validatePassword('P@$wOrd123!');
  ```

  **Method Parameters**

  <Expandable title="Parameters">
    <ParamField body="password" type="string" required>
      The user's password.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="validateUsername" type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/UsernameValidationResult">UsernameValidationResult</a></span>}>
  This method validates a given username against the current username policy defined in the transaction context. It returns an object indicating whether the username is valid and why.

  ```typescript Example theme={null}
  import Signup from '@auth0/auth0-acul-js/signup';
  const signupManager = new Signup();
  const result = signupManager.validateUsername('myusername');
  // result => { valid: true, errors: [] }
  ```

  **Method Parameters**

  <Expandable title="Parameters">
    <ParamField body="username" type="string" required>
      The username string to validate.
    </ParamField>
  </Expandable>
</ParamField>
