MfaPushChallengePush

Describes all the hooks and methods available to customize the Universal Login mfa-push-challenge-push screen.

The mfa-push-challenge-push screen prompts the user to approve an MFA push notification sent to their mobile device.

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

// partial import
import {
  useMfaPushChallengePush,
  // Context hooks
  useUser,
  useTenant,
  useBranding,
  useClient,
  useOrganization,
  usePrompt,
  useScreen,
  useTransaction,
  useUntrustedData,
  // Common hooks
  useCurrentScreen,
  useAuth0Themes,
  useErrors,
  useMfaPolling,
  // Utility hooks
  useChangeLanguage,
  // Methods
  continueMethod,
  enterCodeManually,
  resendPushNotification,
  tryAnotherMethod,
} from "@auth0/auth0-acul-react/mfa-push-challenge-push";

function MfaPushChallengePushScreen() {
  const { continueMethod } = useMfaPushChallengePush();
  return (
    <button onClick={() => continueMethod({})}>
      I've Approved
    </button>
  );
}

Context Hooks

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

useBranding · () => BrandingMembers

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

Example

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

useClient · () => ClientMembers

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

Example

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

useScreen · () => ScreenMembersOnMfaPushChallengePush

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

Example

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

useTransaction · () => TransactionMembers

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

Example

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

useUntrustedData · () => UntrustedDataMembersOnMfaPushChallengePush

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-push-challenge-push';
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-push-challenge-push';
function UserProfile() {
  const user = useUser();
}

useMfaPushChallengePush · MfaPushChallengePushMembers

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

Methods

continueMethod · void | Promise<void>

This method completes the push challenge after the user has approved the notification on their mobile device.

Example

import { useMfaPushChallengePush } from '@auth0/auth0-acul-react/mfa-push-challenge-push';

function ContinueButton() {
  const { continueMethod } = useMfaPushChallengePush();
  return (
    <button onClick={() => continueMethod({ rememberDevice: true })}>
      I've Approved
    </button>
  );
}

Show Parameters

payload · WithRememberOptions

Properties

rememberDevice? · boolean

If true, the device will be remembered and MFA will not be required again on this device.

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

Any additional custom options.

enterCodeManually · void | Promise<void>

This method navigates to the manual code entry screen so the user can enter an OTP code instead of using the push notification.

Example

import { useMfaPushChallengePush } from '@auth0/auth0-acul-react/mfa-push-challenge-push';

function EnterCodeButton() {
  const { enterCodeManually } = useMfaPushChallengePush();
  return (
    <button onClick={() => enterCodeManually()}>
      Enter Code Manually
    </button>
  );
}

Show Parameters

payload · CustomOptions

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

Any additional custom options.

resendPushNotification · void | Promise<void>

This method resends the push notification to the user’s mobile device.

Example

import { useMfaPushChallengePush } from '@auth0/auth0-acul-react/mfa-push-challenge-push';

function ResendButton() {
  const { resendPushNotification } = useMfaPushChallengePush();
  return (
    <button onClick={() => resendPushNotification({})}>
      Resend Notification
    </button>
  );
}

Show Parameters

payload · WithRememberOptions

Properties

rememberDevice? · boolean

If true, the device will be remembered and MFA will not be required again on this device.

[`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 { useMfaPushChallengePush } from '@auth0/auth0-acul-react/mfa-push-challenge-push';

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

Show Parameters

payload · CustomOptions

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

Any additional custom options.

Common/Utility Hooks

useMfaPolling · Hooks

This hook manages polling state for screens that wait on an async push notification response.

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.