MfaSmsChallenge - Auth0 Docs

The mfa-sms-challenge screen prompts the user to enter a one-time code sent to their phone via SMS to complete MFA verification.

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

// partial import
import {
  useMfaSmsChallenge,
  // Context hooks
  useUser,
  useTenant,
  useBranding,
  useClient,
  useOrganization,
  usePrompt,
  useScreen,
  useTransaction,
  useUntrustedData,
  // Common hooks
  useCurrentScreen,
  useAuth0Themes,
  useErrors,
  // Utility hooks
  useChangeLanguage,
  useResend,
  // Methods
  continueMfaSmsChallenge,
  getACall,
  pickSms,
  resendCode,
  tryAnotherMethod,
} from "@auth0/auth0-acul-react/mfa-sms-challenge";

function MfaSmsChallengeScreen() {
  const { continueMfaSmsChallenge } = useMfaSmsChallenge();
  return (
    <button onClick={() => continueMfaSmsChallenge({ code: '123456' })}>
      Verify Code
    </button>
  );
}

Context Hooks

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

useBranding

() => BrandingMembers

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

Example

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

useClient

() => ClientMembers

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

Example

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

useOrganization

() => OrganizationMembers

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

Example

import { useOrganization } from '@auth0/auth0-acul-react/mfa-sms-challenge';
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/mfa-sms-challenge';
function FlowInfo() {
  const prompt = usePrompt();
}

useScreen

() => ScreenMembersOnMfaSmsChallenge

This hook contains details specific to the mfa-sms-challenge screen, including its configuration and context.

Example

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

useTransaction

() => TransactionMembers

This hook provides transaction-specific data for the mfa-sms-challenge screen, such as the current MFA flow state.

Example

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

useUntrustedData

() => UntrustedDataMembersOnMfaSmsChallenge

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

Example

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

useMfaSmsChallenge

MfaSmsChallengeMembers

This hook returns all methods and context available on the mfa-sms-challenge screen.

Methods

continueMfaSmsChallenge

void | Promise<void>

This method submits the SMS one-time code to complete the MFA challenge.

Example

import { useMfaSmsChallenge } from '@auth0/auth0-acul-react/mfa-sms-challenge';

function VerifyCodeForm() {
  const { continueMfaSmsChallenge } = useMfaSmsChallenge();
  return (
    <button onClick={() => continueMfaSmsChallenge({ code: '123456' })}>
      Verify Code
    </button>
  );
}

Show Parameters

payload

MfaSmsChallengeOptions

code

string

required

The one-time code sent to the user’s phone via SMS.

rememberDevice

boolean

Whether to remember the device and skip MFA on future logins.

[`key`: `string`]

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

Any additional custom options.

getACall

void | Promise<void>

This method switches the MFA challenge to a voice call instead of SMS.

Example

import { useMfaSmsChallenge } from '@auth0/auth0-acul-react/mfa-sms-challenge';

function GetACallButton() {
  const { getACall } = useMfaSmsChallenge();
  return (
    <button onClick={() => getACall()}>
      Get a Call Instead
    </button>
  );
}

Show Parameters

payload

CustomOptions

[`key`: `string`]

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

Any additional custom options.

pickSms

void | Promise<void>

This method navigates to the SMS phone number selection screen.

Example

import { useMfaSmsChallenge } from '@auth0/auth0-acul-react/mfa-sms-challenge';

function PickSmsButton() {
  const { pickSms } = useMfaSmsChallenge();
  return (
    <button onClick={() => pickSms()}>
      Use a Different Phone Number
    </button>
  );
}

Show Parameters

payload

CustomOptions

[`key`: `string`]

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

Any additional custom options.

resendCode

void | Promise<void>

This method resends the SMS one-time code to the user’s phone.

Example

import { useMfaSmsChallenge } from '@auth0/auth0-acul-react/mfa-sms-challenge';

function ResendCodeButton() {
  const { resendCode } = useMfaSmsChallenge();
  return (
    <button onClick={() => resendCode()}>
      Resend Code
    </button>
  );
}

Show Parameters

payload

CustomOptions

[`key`: `string`]

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

Any additional custom options.

tryAnotherMethod

void | Promise<void>

This method navigates to the MFA method selection screen so the user can choose a different authentication factor.

Example

import { useMfaSmsChallenge } from '@auth0/auth0-acul-react/mfa-sms-challenge';

function TryAnotherMethodButton() {
  const { tryAnotherMethod } = useMfaSmsChallenge();
  return (
    <button onClick={() => tryAnotherMethod()}>
      Try Another Method
    </button>
  );
}