PasskeyEnrollment - Auth0 Docs

The passkey-enrollment screen is displayed when a user is prompted to enroll a passkey as an authentication method. It allows the user to continue with passkey enrollment or abort the process.

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

// partial import
import {
  usePasskeyEnrollment,
  // Context hooks
  useUser,
  useTenant,
  useBranding,
  useClient,
  useOrganization,
  usePrompt,
  useScreen,
  useTransaction,
  useUntrustedData,
  // Common hooks
  useCurrentScreen,
  useAuth0Themes,
  useErrors,
  // Utility hooks
  useChangeLanguage,
  // Methods
  continuePasskeyEnrollment,
  abortPasskeyEnrollment,
  doNotShowAgain,
} from '@auth0/auth0-acul-react/passkey-enrollment';

function PasskeyEnrollmentScreen() {
  const { continuePasskeyEnrollment } = usePasskeyEnrollment();
  return (
    <button onClick={() => continuePasskeyEnrollment()}>Enroll Passkey</button>
  );
}

Context Hooks

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

useBranding

() => BrandingMembers

This hook provides branding configurations, such as logo, colors, and theme settings displayed on the passkey-enrollment screen.

Example

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

useClient

() => ClientMembers

This hook provides client-related configurations, such as id, name, and logoUrl, for the passkey-enrollment screen.

Example

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

useOrganization

() => OrganizationMembers

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

Example

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

useScreen

() => ScreenMembersOnPasskeyEnrollment

This hook contains details specific to the passkey-enrollment screen, including its configuration and context.

Example

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

useTransaction

() => TransactionMembers

This hook provides transaction-specific data for the passkey-enrollment screen, such as active connections and current flow state.

Example

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

useUntrustedData

() => UntrustedDataMembers

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

Example

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

usePasskeyEnrollment

PasskeyEnrollmentMembers

This hook returns all methods and context available on the passkey-enrollment screen.

Methods

continuePasskeyEnrollment

Promise<void>

This method initiates the passkey enrollment process and continues the authentication flow.

Example

import { usePasskeyEnrollment } from '@auth0/auth0-acul-react/passkey-enrollment';

function EnrollButton() {
  const { continuePasskeyEnrollment } = usePasskeyEnrollment();
  return (
    <button onClick={() => continuePasskeyEnrollment()}>
      Enroll Passkey
    </button>
  );
}

abortPasskeyEnrollment

Promise<void>

This method cancels the passkey enrollment process and continues the authentication flow without enrolling a passkey.

Example

import { usePasskeyEnrollment } from '@auth0/auth0-acul-react/passkey-enrollment';

function SkipButton() {
  const { abortPasskeyEnrollment } = usePasskeyEnrollment();
  return (
    <button onClick={() => abortPasskeyEnrollment()}>
      Skip for Now
    </button>
  );
}

doNotShowAgain

Promise<void>

This method skips the passkey enrollment and saves the user’s preference to not be prompted for passkey enrollment again.

Example

import { usePasskeyEnrollment } from '@auth0/auth0-acul-react/passkey-enrollment';

function DoNotShowAgainButton() {
  const { doNotShowAgain } = usePasskeyEnrollment();
  return (
    <button onClick={() => doNotShowAgain()}>
      Don't show this again
    </button>
  );
}

Common/Utility Hooks

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.

​Import

​Context Hooks

​Methods

​Common/Utility Hooks

Import

Context Hooks

Methods

Common/Utility Hooks