> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# SignupPassword
> Describes all the hooks and methods available to customize the Universal Login `signup-password` screen.
The `signup-password` screen collects the user's password to complete account creation. It is the second step of a multi-step signup flow, following identifier collection. It also supports federated signup via social or enterprise connections.
## 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.
```jsx Import Example theme={null}
// root import
import { useSignupPassword } from '@auth0/auth0-acul-react';
// partial import
import {
useSignupPassword,
// Context hooks
useUser,
useTenant,
useBranding,
useClient,
useOrganization,
usePrompt,
useScreen,
useTransaction,
useUntrustedData,
// Common hooks
useCurrentScreen,
useAuth0Themes,
useErrors,
// Utility hooks
useChangeLanguage,
usePasswordValidation,
// Methods
signup,
federatedSignup,
switchConnection,
} from '@auth0/auth0-acul-react/signup-password';
function SignupPasswordForm() {
const { signup } = useSignupPassword();
return (
);
}
```
## Context Hooks
Screen-scoped hooks that provide read-only access to Auth0 context data on the `signup-password` screen. Import them from `@auth0/auth0-acul-react/signup-password`.
() => BrandingMembers}>
This hook provides branding configurations, such as logo, colors, and theme settings displayed on the `signup-password` screen.
```jsx Example theme={null}
import { useBranding } from '@auth0/auth0-acul-react/signup-password';
function CustomTheme() {
const branding = useBranding();
}
```
() => ClientMembers}>
This hook provides client-related configurations, such as `id`, `name`, and `logoUrl`, for the `signup-password` screen.
```jsx Example theme={null}
import { useClient } from '@auth0/auth0-acul-react/signup-password';
function AppInfo() {
const client = useClient();
}
```
() => OrganizationMembers}>
This hook provides information about the user's Organization if the signup is Organization scoped. Returns `null` when no Organization context is present.
```jsx Example theme={null}
import { useOrganization } from '@auth0/auth0-acul-react/signup-password';
function OrgSelector() {
const organization = useOrganization();
if (!organization) {
return
No organization context
;
}
}
```
() => PromptMembers}>
This hook contains data about the current prompt in the authentication flow.
```jsx Example theme={null}
import { usePrompt } from '@auth0/auth0-acul-react/signup-password';
function FlowInfo() {
const prompt = usePrompt();
}
```
() => ScreenMembersOnSignupPassword}>
This hook contains details specific to the `signup-password` screen, including its configuration and context.
```jsx Example theme={null}
import { useScreen } from '@auth0/auth0-acul-react/signup-password';
function ScreenDebug() {
const screen = useScreen();
}
```
() => TenantMembers}>
This hook contains data related to the tenant, such as `id` and associated metadata.
```jsx Example theme={null}
import { useTenant } from '@auth0/auth0-acul-react/signup-password';
function TenantInfo() {
const tenant = useTenant();
}
```
() => TransactionMembersOnSignupPassword}>
This hook provides transaction-specific data for the `signup-password` screen, such as active connections and current flow state.
```jsx Example theme={null}
import { useTransaction } from '@auth0/auth0-acul-react/signup-password';
function TransactionInfo() {
const transaction = useTransaction();
}
```
() => UntrustedDataMembers}>
This hook handles untrusted data passed to the screen, such as a prefilled email or username from URL parameters.
```jsx Example theme={null}
import { useUntrustedData } from '@auth0/auth0-acul-react/signup-password';
function PrefilledForm() {
const untrustedData = useUntrustedData();
}
```
() => UserMembers}>
This hook provides details of the active user, including `username`, `email`, and available authentication methods.
```jsx Example theme={null}
import { useUser } from '@auth0/auth0-acul-react/signup-password';
function UserProfile() {
const user = useUser();
}
```
SignupPasswordMembers}>
This hook returns all methods and context available on the `signup-password` screen.
## Methods
This method initiates signup via a federated identity provider, such as Google or GitHub.
```jsx Example theme={null}
import { useSignupPassword } from '@auth0/auth0-acul-react/signup-password';
function SocialButton() {
const { federatedSignup } = useSignupPassword();
return (
);
}
```
**Method Parameters**
[FederatedSignupPasswordPayloadOptions](/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/FederatedSignupPasswordPayloadOptions).
The social or enterprise connection name to use (e.g. `google-oauth2`, `github`).
This method submits the user's password to complete account creation.
```jsx Example theme={null}
import { useSignupPassword } from '@auth0/auth0-acul-react/signup-password';
function SignupPasswordForm() {
const { signup } = useSignupPassword();
return (
);
}
```
**Method Parameters**
[SignupPasswordOptions](/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/SignupPasswordOptions).
The password for the new account.
The user's email address.
The username for the new account, if required by the connection.
The user's phone number, if required by the connection.
Captcha value required when bot detection is enabled on the tenant.
Additional custom fields prefixed with `ulp-` (for example, `'ulp-custom-field'`).
This method switches the active connection during the signup-password step, allowing the user to authenticate via a different connection.
```jsx Example theme={null}
import { useSignupPassword } from '@auth0/auth0-acul-react/signup-password';
function SwitchConnection() {
const { switchConnection } = useSignupPassword();
return (
);
}
```
**Method Parameters**
[SwitchConnectionOptionsSignupPassword](/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/SwitchConnectionOptionsSignupPassword).
The connection name to switch to. Use 'email' or 'sms' for passwordless, or a DB connection name for password-based authentication.
Additional custom fields prefixed with `ulp-` (for example, `'ulp-custom-field'`).
## Common/Utility Hooks
useAuth0Themes} type="Hooks">
This hook gets the current theme options with flattened configuration from branding context.
useChangeLanguage} type="Hooks">
This hook returns a function for changing the display language on the current ACUL screen.
useCurrentScreen} type="Hooks">
This hook gets the current screen context and state.
useErrors} type="Hooks">
This hook reads and manages server, client, and developer errors on the screen.
usePasswordValidation} type="Hooks">
This hook validates the user's password against the tenant's password policy requirements.
## 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.
```jsx Import Example theme={null}
// root import
import { useSignupPassword } from '@auth0/auth0-acul-react';
// partial import
import {
useSignupPassword,
// Context hooks
useUser,
useTenant,
useBranding,
useClient,
useOrganization,
usePrompt,
useScreen,
useTransaction,
useUntrustedData,
// Common hooks
useCurrentScreen,
useAuth0Themes,
useErrors,
// Utility hooks
useChangeLanguage,
usePasswordValidation,
// Methods
signup,
federatedSignup,
switchConnection,
} from '@auth0/auth0-acul-react/signup-password';
function SignupPasswordForm() {
const { signup } = useSignupPassword();
return (
);
}
```
## Context Hooks
Screen-scoped hooks that provide read-only access to Auth0 context data on the `signup-password` screen. Import them from `@auth0/auth0-acul-react/signup-password`.