LoginPasswordlessSmsOtp

The login-passwordless-sms-otp screen prompts the user to enter a one-time password sent to their phone number to complete passwordless SMS authentication.

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 { useLoginPasswordlessSmsOtp } from '@auth0/auth0-acul-react';

// partial import
import {
  useLoginPasswordlessSmsOtp,
  // Context hooks
  useUser,
  useTenant,
  useBranding,
  useClient,
  useOrganization,
  usePrompt,
  useScreen,
  useTransaction,
  useUntrustedData,
  // Common hooks
  useCurrentScreen,
  useAuth0Themes,
  useErrors,
  // Utility hooks
  useChangeLanguage,
  useResend,
  // Methods
  submitOTP,
  resendOTP,
  switchConnection,
} from '@auth0/auth0-acul-react/login-passwordless-sms-otp';

function SmsOtpForm() {
  const { submitOTP } = useLoginPasswordlessSmsOtp();
  return (
    <button onClick={() => submitOTP({ code: '123456' })}>
      Verify Code
    </button>
  );
}

Context Hooks

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

useBranding

() => BrandingMembers

This hook provides branding configurations, such as logo, colors, and theme settings displayed on the login-passwordless-sms-otp screen.

Example

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

useClient

() => ClientMembers

This hook provides client-related configurations, such as id, name, and logoUrl, for the login-passwordless-sms-otp screen.

Example

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

useOrganization

() => OrganizationMembers

This hook 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-passwordless-sms-otp';
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/login-passwordless-sms-otp';
function FlowInfo() {
  const prompt = usePrompt();
}

useScreen

() => ScreenMembersOnLoginPasswordlessSmsOtp

This hook contains details specific to the login-passwordless-sms-otp screen, including its configuration and context.

Example

import { useScreen } from '@auth0/auth0-acul-react/login-passwordless-sms-otp';
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/login-passwordless-sms-otp';
function TenantInfo() {
  const tenant = useTenant();
}

useTransaction

() => TransactionMembersOnLoginPasswordlessSmsOtp

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

Example

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

useUntrustedData

() => UntrustedDataMembers

This hook handles untrusted data passed to the screen, such as a prefilled phone number from URL parameters.

Example

import { useUntrustedData } from '@auth0/auth0-acul-react/login-passwordless-sms-otp';
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/login-passwordless-sms-otp';
function UserProfile() {
  const user = useUser();
}

This hook returns all methods and context available on the login-passwordless-sms-otp screen.

Methods

resendOTP

Promise<void>

This method resends the one-time password(OTP) to the user’s phone number.

Example

import { useLoginPasswordlessSmsOtp } from '@auth0/auth0-acul-react/login-passwordless-sms-otp';

function ResendButton() {
  const { resendOTP } = useLoginPasswordlessSmsOtp();
  return (
    <button onClick={() => resendOTP()}>
      Resend Code
    </button>
  );
}

submitOTP

Promise<void>

This method submits the one-time password to complete passwordless SMS authentication.

Example

import { useLoginPasswordlessSmsOtp } from '@auth0/auth0-acul-react/login-passwordless-sms-otp';

function SmsOtpForm() {
  const { submitOTP } = useLoginPasswordlessSmsOtp();
  return (
    <button onClick={() => submitOTP({ code: '123456' })}>
      Verify Code
    </button>
  );
}

Method Parameters

Show Parameters

options

SubmitOTPOptions.

code

string

required

The one-time password sent to the user’s phone number.

username?

string

The user’s phone number or identifier, if required by the flow.

captcha?

string

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

switchConnection

Promise<void>

This method switches to an alternate authentication connection without restarting the flow.

Example

import { useLoginPasswordlessSmsOtp } from '@auth0/auth0-acul-react/login-passwordless-sms-otp';

function ConnectionSwitcher() {
  const { switchConnection } = useLoginPasswordlessSmsOtp();
  return (
    <button onClick={() => switchConnection({ connection: 'enterprise-saml' })}>
      Use SSO
    </button>
  );
}