Signup

Describes all the hooks and methods available to customize the Universal Login signup screen.

The signup screen collects the user’s credentials to create a new account. It supports standard signup with username, email, phone number, and password, as well as federated signup via social or enterprise connections and Google One Tap.

Import

Each screen has its own set of hooks and methods. The SDK supports partial import and root import for each screen.

• Using partial import allows you to include only the code you need for your specific use case.
• Using root import allows you to load all screens from a single bundle, which is useful when you want a unified build to handle all possible screens.

Import Example

// root import
import { useSignup } from '@auth0/auth0-acul-react';

// partial import
import {
  useSignup,
  // Context hooks
  useUser,
  useTenant,
  useBranding,
  useClient,
  useOrganization,
  usePrompt,
  useScreen,
  useTransaction,
  useUntrustedData,
  // Common hooks
  useCurrentScreen,
  useAuth0Themes,
  useErrors,
  // Utility hooks
  useChangeLanguage,
  usePasswordValidation,
  useSignupIdentifiers,
  useUsernameValidation,
  // Methods
  signup,
  federatedSignup,
  googleOneTap,
  pickCountryCode,
} from '@auth0/auth0-acul-react/signup';

function SignupForm() {
  const { signup } = useSignup();
  return (
    <button onClick={() => signup({ email: '[e-mail]', password: 'secret' })}>
      Create Account
    </button>
  );
}

Context Hooks

Screen-scoped hooks that provide read-only access to Auth0 context data on the signup screen. Import them from @auth0/auth0-acul-react/signup.

useBranding · () => BrandingMembers

This hook provides branding configurations, such as logo, colors, and theme settings displayed on the signup screen.

Example

import { useBranding } from '@auth0/auth0-acul-react/signup';
function CustomTheme() {
  const branding = useBranding();
}

useClient · () => ClientMembers

This hook provides client-related configurations, such as id, name, and logoUrl, for the signup screen.

Example

import { useClient } from '@auth0/auth0-acul-react/signup';
function AppInfo() {
  const client = useClient();
}

useOrganization · () => OrganizationMembers

This hook provides information about the user’s Organization if the signup is Organization scoped. Returns null when no Organization context is present.

Example

import { useOrganization } from '@auth0/auth0-acul-react/signup';
function OrgSelector() {
  const organization = useOrganization();
  if (!organization) {
    return <p>No organization context</p>;
  }
}

usePrompt · () => PromptMembers

This hook contains data about the current prompt in the authentication flow.

Example

import { usePrompt } from '@auth0/auth0-acul-react/signup';
function FlowInfo() {
  const prompt = usePrompt();
}

useScreen · () => ScreenMembersOnSignup

This hook contains details specific to the signup screen, including its configuration and context.

Example

import { useScreen } from '@auth0/auth0-acul-react/signup';
function ScreenDebug() {
  const screen = useScreen();
}

useTenant · () => TenantMembers

This hook contains data related to the tenant, such as id and associated metadata.

Example

import { useTenant } from '@auth0/auth0-acul-react/signup';
function TenantInfo() {
  const tenant = useTenant();
}

useTransaction · () => TransactionMembersOnSignup

This hook provides transaction-specific data for the signup screen, such as active connections and current flow state.

Example

import { useTransaction } from '@auth0/auth0-acul-react/signup';
function TransactionInfo() {
  const transaction = useTransaction();
}

useUntrustedData · () => UntrustedDataMembers

This hook handles untrusted data passed to the screen, such as a prefilled email or username from URL parameters.

Example

import { useUntrustedData } from '@auth0/auth0-acul-react/signup';
function PrefilledForm() {
  const untrustedData = useUntrustedData();
}

useUser · () => UserMembers

This hook provides details of the active user, including username, email, and available authentication methods.

Example

import { useUser } from '@auth0/auth0-acul-react/signup';
function UserProfile() {
  const user = useUser();
}

useSignup · SignupMembers

This hook returns all methods and context available on the signup screen.

Methods

googleOneTap · Promise<void>

This method registers a new user using a Google One Tap credential, enabling one-click sign-up without redirecting to a separate page.

Example

import { useSignup } from '@auth0/auth0-acul-react/signup';

function GoogleOneTapHandler({ credential }) {
  const { googleOneTap } = useSignup();
  return googleOneTap({ one_tap_credential: credential });
}

Method Parameters

Show Parameters

one_tap_credential · string · required

The Google One Tap credential token returned by the Google Identity Services prompt.

federatedSignup · Promise<void>

This method redirects the user to the Social or Enterprise Identity Provider (IdP) for signup.

Example

import { useSignup } from '@auth0/auth0-acul-react/signup';

function SocialButton() {
  const { federatedSignup } = useSignup();
  return (
    <button onClick={() => federatedSignup({ connection: 'google-oauth2' })}>
      Sign up with Google
    </button>
  );
}

Method Parameters

Show Parameters

options

FederatedSignupPayloadOptions.

connection · string · required

The Social or Enterprise Identity Provider connection name.

pickCountryCode · Promise<void>

This method opens the country code picker for phone number input during signup.

Example

import { useSignup } from '@auth0/auth0-acul-react/signup';

function CountryCodePicker() {
  const { pickCountryCode } = useSignup();
  return (
    <button onClick={() => pickCountryCode()}>
      Select Country Code
    </button>
  );
}

signup · Promise<void>

This method submits the user’s registration details to create a new account.

Example

import { useSignup } from '@auth0/auth0-acul-react/signup';

function SignupForm() {
  const { signup } = useSignup();
  return (
    <button onClick={() => signup({ email: '[e-mail]', password: 'secret' })}>
      Create Account
    </button>
  );
}

Method Parameters

Show Parameters

options

SignupPayloadOptions.

email · string

The user’s email address.

password · string

The password for the new account.

username · string

The username for the new account, if required by the connection.

phoneNumber · string

The user’s phone number, if required by the connection.

captcha? · string

Captcha value required when bot detection is enabled on the tenant.

[`key`: `string`] · "string" | "number" | "boolean" | "undefined"

Additional custom fields prefixed with ulp- (for example, 'ulp-custom-field').

Common/Utility Hooks

useAuth0Themes · Hooks

This hook gets the current theme options with flattened configuration from branding context.

useChangeLanguage · Hooks

This hook returns a function for changing the display language on the current ACUL screen.

useCurrentScreen · Hooks

This hook gets the current screen context and state.

useErrors · Hooks

This hook reads and manages server, client, and developer errors on the screen.

usePasswordValidation · Hooks

This hook validates the user’s password against the tenant’s password policy requirements.

useSignupIdentifiers · Hooks

This hook returns the available signup identifier types (email, username, phone) configured for the connection.

useUsernameValidation · Hooks

This hook validates the user’s username against the tenant’s username policy requirements.