LoginId - Auth0 Docs

The login-id screen collects the user’s identifier as the first step of an identifier-first authentication flow. Depending on your tenant, this identifier can be an email, phone number, or username. It also supports passkey login and federated identity providers.

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 useful when you want a unified build to handle all possible screens.

Import Example

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

// partial import
import {
  useLoginId,
  // Context hooks
  useUser,
  useTenant,
  useBranding,
  useClient,
  useOrganization,
  usePrompt,
  useScreen,
  useTransaction,
  useUntrustedData,
  // Common hooks
  useCurrentScreen,
  useAuth0Themes,
  useErrors,
  // Utility hooks
  useLoginIdentifiers,
  useChangeLanguage,
  usePasskeyAutofill,
  // Methods
  login,
  federatedLogin,
  passkeyLogin,
  pickCountryCode,
} from '@auth0/auth0-acul-react/login-id';

function LoginIdForm() {
  const { login } = useLoginId();
  return (
    <button onClick={() => login({ username: 'user@example.com' })}>
      Continue
    </button>
  );
}

Context Hooks

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

useBranding

() => BrandingMembers

Provides branding configurations, such as logo, colors, and theme settings displayed on the login-id screen.

Example

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

useClient

() => ClientMembers

Provides client-related configurations, such as id, name, and logoUrl, for the login-id screen.

Example

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

useOrganization

() => OrganizationMembers

Provides information about the user’s organization if the login is organization-scoped. Returns null when no organization context is present.

Example

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

usePrompt

() => PromptMembers

Contains data about the current prompt in the authentication flow.

Example

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

useScreen

() => ScreenMembersOnLoginId

Contains details specific to the login-id screen, including its configuration and context.

Example

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

useTenant

() => TenantMembers

Contains data related to the tenant, such as id and associated metadata.

Example

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

useTransaction

() => TransactionMembersOnLoginId

Provides transaction-specific data for the login-id screen, such as active connections, available login methods, and current flow state.

Example

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

useUntrustedData

() => UntrustedDataMembers

Handles untrusted data passed to the screen, such as a prefilled identifier from URL parameters.

Example

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

useUser

() => UserMembers

Details of the active user, including username, email, and available authentication methods.

Example

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

Methods

Initiates authentication via a federated identity provider such as Google or GitHub.

Example

import { useLoginId } from '@auth0/auth0-acul-react/login-id';

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

Show Parameters

payload

FederatedLoginPayloadOptions

connection

string

required

The social connection name to use (e.g. google-oauth2, github).

[`key`: `string`]

"string" | "number" | "boolean" | "undefined"

Any additional custom options.

Submits the user’s identifier to proceed to the next step in the authentication flow.

Example

import { useLoginId } from '@auth0/auth0-acul-react/login-id';

function LoginIdForm() {
  const { login } = useLoginId();
  return (
    <button onClick={() => login({ username: 'user@example.com' })}>
      Continue
    </button>
  );
}

Show Parameters

payload

LoginOptions

username

string

required

The identifier (email, phone number, or username) to authenticate with.

captcha

string

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

[`key`: `string`]

"string" | "number" | "boolean" | "undefined"

Any additional custom options.

Initiates passwordless authentication using a passkey.

Example

import { useLoginId } from '@auth0/auth0-acul-react/login-id';

function PasskeyButton() {
  const { passkeyLogin } = useLoginId();
  return (
    <button onClick={() => passkeyLogin()}>
      Sign in with Passkey
    </button>
  );
}

Show Parameters

payload

CustomOptions

Optional custom parameters to pass with the request.

[`key`: `string`]

"string" | "number" | "boolean" | "undefined"

Any additional custom options.

pickCountryCode

void | Promise<void>

Navigates to the country code picker for phone-based login flows.

Example

import { useLoginId } from '@auth0/auth0-acul-react/login-id';

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