### Complete Example with Error Handling

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/get-current-screen-options.md

This example demonstrates how to retrieve current screen options and log detailed information about the client, screen, organization, transaction, tenant, and prompt. It includes robust error handling for transaction errors and general exceptions.

```typescript
import { getCurrentScreenOptions } from '@auth0/auth0-acul-js';

function handleScreenOptions() {
  try {
    const screenOptions = getCurrentScreenOptions();
    
    // Log current context
    console.log('=== Auth0 Screen Context ===');
    
    // Client info
    if (screenOptions.client) {
      console.log(`Client: ${screenOptions.client.id}`);
    }
    
    // Current screen
    if (screenOptions.screen) {
      console.log(`Screen: ${screenOptions.screen.name}`);
    }
    
    // Organization
    if (screenOptions.organization) {
      console.log(`Organization: ${screenOptions.organization.id}`);
    }
    
    // Transaction state
    if (screenOptions.transaction) {
      console.log(`Transaction State: ${screenOptions.transaction.state}`);
      console.log(`Locale: ${screenOptions.transaction.locale}`);
      
      // Handle errors
      if (screenOptions.transaction.errors && screenOptions.transaction.errors.length > 0) {
        console.warn('Transaction Errors:');
        screenOptions.transaction.errors.forEach(error => {
          console.error(`- ${error.code}: ${error.message}`);
        });
      }
    }
    
    // Tenant info
    if (screenOptions.tenant) {
      console.log(`Enabled Locales: ${screenOptions.tenant.enabledLocales.join(', ')}`);
    }
    
    // Prompt context
    if (screenOptions.prompt) {
      console.log(`Prompt: ${screenOptions.prompt.name}`);
    }
    
    return screenOptions;
    
  } catch (error) {
    console.error('Error getting screen options:', error);
    return null;
  }
}

// Usage
const options = handleScreenOptions();
```

--------------------------------

### Install Auth0 ACUL React SDK

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-react/README.md

Install the SDK using npm. Ensure React is installed as a peer dependency.

```bash
npm install @auth0/auth0-acul-react
```

```bash
npm install react
```

--------------------------------

### Polling Usage Example (with stop/start)

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/mfa-push-challenge-push.md

Demonstrates how to start and stop the polling mechanism for push notification acceptance using the MfaPushChallengePush SDK in a React component.

```APIDOC
## Polling Usage Example (with stop/start)

This example shows how to initiate and manage the polling process for MFA push notification acceptance within a React component. It includes starting the polling on component mount and stopping it on unmount.

### Method
```typescript
new MfaPushChallengePush().pollingManager(interval: number, callback: () => Promise<void>)
```

### Parameters
- `interval` (number): The time in milliseconds to wait between polling attempts.
- `callback` (function): A function to be executed on each polling interval. This function should typically call `mfaPushChallengePush.continue()`.

### Usage
```tsx
import React, { useEffect, useRef } from 'react';
import MfaPushChallengePush from '@auth0/auth0-acul-js/mfa-push-challenge-push';

const mfaPushChallengePush = new MfaPushChallengePush();
const pollerRef = useRef(null);

useEffect(() => {
  // Start polling for push notification acceptance
  pollerRef.current = mfaPushChallengePush.pollingManager(5000, () => {
    mfaPushChallengePush.continue();
  });

  // To stop polling when component unmounts
  return () => {
    if (pollerRef.current) pollerRef.current.stopPolling();
  };
}, []);

// To manually stop polling:
// pollerRef.current.stopPolling();

// To restart polling:
// pollerRef.current.startPolling();

// To check if polling is running:
// const isPolling = pollerRef.current.isRunning();
```
```

--------------------------------

### Polling Control Example (start/stop/running)

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/mfa-push-challenge-push.md

Illustrates how to directly control the polling process, including starting, stopping, and checking the running status of the poller, in both plain JavaScript and React environments.

```APIDOC
## Polling Control Example (start/stop/running)

This section details how to manage the polling lifecycle: starting, stopping, and checking if the polling is active. Examples are provided for both plain JavaScript and React.

### Plain JavaScript Usage

#### Method
```javascript
new MfaPushChallengePush().pollingManager(interval: number, callback: () => Promise<void>)
```

#### Usage
```javascript
import MfaPushChallengePush from '@auth0/auth0-acul-js/mfa-push-challenge-push';

const mfaPushChallengePush = new MfaPushChallengePush();

// Get polling object
const polling = mfaPushChallengePush.pollingManager(5000, async () => {
  await mfaPushChallengePush.continue();
});

// Start polling
polling.startPolling();

// Stop polling
polling.stopPolling();

// Check if polling is running
console.log(polling.isRunning()); // true or false
```

### React Usage Example

#### Usage
```tsx
import React, { useEffect, useRef } from 'react';
import MfaPushChallengePush from '@auth0/auth0-acul-js/mfa-push-challenge-push';

const MfaPushChallengePushScreen: React.FC = () => {
  const mfaPushChallengePush = React.useMemo(() => new MfaPushChallengePush(), []);
  const pollingRef = useRef<any>(null);

  useEffect(() => {
    // Get polling object
    pollingRef.current = mfaPushChallengePush.pollingManager(5000, async () => {
      await mfaPushChallengePush.continue();
    });
    // Start polling
    pollingRef.current.startPolling();
    return () => {
      pollingRef.current?.stopPolling();
    };
  }, [mfaPushChallengePush]);


  return <div>...</div>;
};
```
```

--------------------------------

### Login with Auth0 Universal Login

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/signup.md

This example demonstrates how to initiate the login process with Auth0 Universal Login. It redirects the user to the Auth0 login page.

```javascript
import { createAuth0Client } from '@auth0/auth0-spa-js';

async function initializeClient() {
  const auth0Client = await createAuth0Client({
    domain: 'YOUR_AUTH0_DOMAIN',
    clientId: 'YOUR_AUTH0_CLIENT_ID',
  });

  // Check the user's authentication state
  const isAuthenticated = await auth0Client.isAuthenticated();

  if (!isAuthenticated) {
    // Redirect to the login page
    await auth0Client.loginWithRedirect({
      appState: {
        returnTo: window.location.pathname,
      },
    });
  }
}

initializeClient();
```

--------------------------------

### Polling Control Example (Plain JavaScript)

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/mfa-push-challenge-push.md

Demonstrates how to get the polling object, start, stop, and check the running status of the polling mechanism in plain JavaScript.

```javascript
import MfaPushChallengePush from '@auth0/auth0-acul-js/mfa-push-challenge-push';

const mfaPushChallengePush = new MfaPushChallengePush();

// Get polling object
const polling = mfaPushChallengePush.pollingManager(5000, async () => {
  await mfaPushChallengePush.continue();
});

// Start polling
polling.startPolling();

polling.stopPolling();

console.log(polling.isRunning()); // true or false
```

--------------------------------

### Install Auth0 Auth0-ACUL-JS SDK via npm

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/FAQ.md

Install the Auth0 Auth0-ACUL-JS SDK using npm. This is the required method for integrating the SDK into your project, as CDN usage is not supported.

```sh
npm install @auth0/auth0-acul-js
```

--------------------------------

### Install Auth0 ACUL React SDK

Source: https://github.com/auth0/universal-login/blob/master/README.md

Install the SDK for React projects using npm. Requires React 18.3.1 or higher.

```sh
npm install @auth0/auth0-acul-react
```

--------------------------------

### Verify Peer Dependencies

Source: https://github.com/auth0/universal-login/blob/master/MIGRATION_JS_TO_REACT.md

Command to ensure React and ReactDOM are installed with compatible versions required by the Auth0 React SDK.

```bash
npm install react@^18.0.0 react-dom@^18.0.0
```

--------------------------------

### Manage Email Resend Timers

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/email-identifier-challenge.md

This example shows how to set up and manage a resend timer for verification codes. It includes callbacks for status changes and timeouts. The startResend() function initiates the cooldown period.

```typescript
import EmailIdentifierChallenge from '@auth0/auth0-acul-js/email-identifier-challenge';

const emailIdentifierChallenge = new EmailIdentifierChallenge();

function handleStatusChange(remainingSeconds: number) {
  console.log('Remaining seconds:', remainingSeconds);
}

function handleTimeout() {
  console.log('Resend timeout completed');
}

const resendManager = emailIdentifierChallenge.resendManager({
  timeoutSeconds: 15,
  onStatusChange: handleStatusChange,
  onTimeout: handleTimeout,
});

const { startResend } = resendManager;

// Use startResend() to initiate the resend with cooldown
startResend();

```

--------------------------------

### Initialize the SDK Class

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/mfa-webauthn-platform-challenge.md

Import and instantiate the MfaWebAuthnPlatformChallenge class. Access screen data like the public key challenge, remember device option, and UI texts.

```APIDOC
## Initialize the SDK Class

First, import and instantiate the class for the screen:

```typescript
import MfaWebAuthnPlatformChallenge from '@auth0/auth0-acul-js/mfa-webauthn-platform-challenge';

const sdk = new MfaWebAuthnPlatformChallenge();

// Access screen data
const publicKeyOptions = sdk.screen.publicKey; // Contains the challenge for navigator.credentials.get()
const showRemember = sdk.screen.showRememberDevice;
const texts = sdk.screen.texts; // UI texts like title, button labels

if (!publicKeyOptions) {
  console.error("WebAuthn platform challenge options (publicKey) are not available.");
  // Handle this case, e.g., by showing an error or guiding the user.
}
```
```

--------------------------------

### Polling Control Example (React)

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/mfa-push-challenge-push.md

Shows how to manage the polling lifecycle (start, stop) within a React component using `useEffect` and `useRef`.

```tsx
import React, { useEffect, useRef } from 'react';
import MfaPushChallengePush from '@auth0/auth0-acul-js/mfa-push-challenge-push';

const MfaPushChallengePushScreen: React.FC = () => {
  const mfaPushChallengePush = React.useMemo(() => new MfaPushChallengePush(), []);
  const pollingRef = useRef<any>(null);

  useEffect(() => {
    // Get polling object
    pollingRef.current = mfaPushChallengePush.pollingManager(5000, async () => {
      await mfaPushChallengePush.continue();
    });
    // Start polling
    pollingRef.current.startPolling();
    return () => {
      pollingRef.current?.stopPolling();
    };
  }, [mfaPushChallengePush]);


  return <div>...</div>;
};
```

--------------------------------

### Initialize the SDK

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/mfa-webauthn-roaming-challenge.md

Import and instantiate the MfaWebAuthnRoamingChallenge class to access its methods and screen data.

```APIDOC
## Initialize the SDK

First, import and instantiate the class for the screen:

```typescript
import MfaWebAuthnRoamingChallenge from '@auth0/auth0-acul-js/mfa-webauthn-roaming-challenge';

const mfaRoamingSdk = new MfaWebAuthnRoamingChallenge();

// Access screen data
const publicKeyOptions = mfaRoamingSdk.screen.data?.publicKeyChallengeOptions;
const showRemember = mfaRoamingSdk.screen.data?.showRememberDevice;
const texts = mfaRoamingSdk.screen.texts;

if (!publicKeyOptions) {
  console.error("WebAuthn challenge options are not available.");
  // Handle this case, e.g., by showing an error or guiding the user.
}
```
```

--------------------------------

### Initialize SDK and Access Passkey Options

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/mfa-webauthn-platform-enrollment.md

Initializes the MfaWebAuthnPlatformEnrollment SDK and demonstrates how to access the public key creation options for WebAuthn.

```typescript
import MfaWebAuthnPlatformEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-platform-enrollment';

const sdk = new MfaWebAuthnPlatformEnrollment();

// Access passkey creation options via the convenient screen.publicKey
const publicKeyCreationOptions = sdk.screen.publicKey;
if (publicKeyCreationOptions) {
  console.log('Public Key Creation Options for WebAuthn:', publicKeyCreationOptions);
} else {
  console.log('Passkey creation options not available.');
}
```

--------------------------------

### Basic MFA Begin Enroll Options Usage (TypeScript)

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/mfa-begin-enroll-options.md

Instantiate the MfaBeginEnrollOptions class to access tenant configuration and initiate the enrollment process for a selected MFA factor. Ensure you handle potential errors during enrollment.

```typescript
import MfaBeginEnrollOptions from '@auth0/auth0-acul-js/mfa-begin-enroll-options';

const mfaBeginEnrollOptions = new MfaBeginEnrollOptions();

// Get available factors from tenant configuration
const { tenant } = mfaBeginEnrollOptions;
const availableFactors = tenant.enabledFactors;

// Continue with selected factor enrollment
const handleFactorSelection = async (factor: string) => {
  try {
    await mfaBeginEnrollOptions.enroll({
      action: factor // e.g. 'push-notification', 'otp', 'sms', etc.
    });
  } catch (error) {
    console.error('Error enrolling factor:', error);
  }
};
```

--------------------------------

### Initialize the SDK Class

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/mfa-webauthn-platform-challenge.md

Import and instantiate the MfaWebAuthnPlatformChallenge class. Access screen data like publicKey options, remember device settings, and UI texts.

```typescript
import MfaWebAuthnPlatformChallenge from '@auth0/auth0-acul-js/mfa-webauthn-platform-challenge';

const sdk = new MfaWebAuthnPlatformChallenge();

// Access screen data
const publicKeyOptions = sdk.screen.publicKey; // Contains the challenge for navigator.credentials.get()
const showRemember = sdk.screen.showRememberDevice;
const texts = sdk.screen.texts; // UI texts like title, button labels

if (!publicKeyOptions) {
  console.error("WebAuthn platform challenge options (publicKey) are not available.");
  // Handle this case, e.g., by showing an error or guiding the user.
}
```

--------------------------------

### Install Auth0 ACUL SDKs

Source: https://context7.com/auth0/universal-login/llms.txt

Install the appropriate ACUL SDK based on your project stack. The React SDK also requires React as a peer dependency.

```bash
# Vanilla JS / TypeScript
npm install @auth0/auth0-acul-js

# React
npm install @auth0/auth0-acul-react react
```

--------------------------------

### Initialize the SDK

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/mfa-webauthn-roaming-challenge.md

Import and instantiate the MfaWebAuthnRoamingChallenge class. Access screen data like challenge options, remember device settings, and texts.

```typescript
import MfaWebAuthnRoamingChallenge from '@auth0/auth0-acul-js/mfa-webauthn-roaming-challenge';

const mfaRoamingSdk = new MfaWebAuthnRoamingChallenge();

// Access screen data
const publicKeyOptions = mfaRoamingSdk.screen.data?.publicKeyChallengeOptions;
const showRemember = mfaRoamingSdk.screen.data?.showRememberDevice;
const texts = mfaRoamingSdk.screen.texts;

if (!publicKeyOptions) {
  console.error("WebAuthn challenge options are not available.");
  // Handle this case, e.g., by showing an error or guiding the user.
}
```

--------------------------------

### Start Polling for Push Notification Acceptance (React)

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/mfa-push-challenge-push.md

Use this snippet to start polling for push notification acceptance when a component mounts. It ensures polling is stopped when the component unmounts.

```tsx
import React, { useEffect, useRef } from 'react';
import MfaPushChallengePush from '@auth0/auth0-acul-js/mfa-push-challenge-push';

const mfaPushChallengePush = new MfaPushChallengePush();
const pollerRef = useRef(null);

useEffect(() => {
  // Start polling for push notification acceptance
  pollerRef.current = mfaPushChallengePush.pollingManager(5000, () => {
    mfaPushChallengePush.continue();
  });

  // To stop polling when component unmounts
  return () => {
    if (pollerRef.current) pollerRef.current.stopPolling();
  };
}, []);

// To manually stop polling
// pollerRef.current.stopPolling();

// To restart polling:
// pollerRef.current.startPolling();

// To check if polling is running:
// const isPolling = pollerRef.current.isRunning();
```

--------------------------------

### Initialize the SDK Class

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/reset-password-mfa-webauthn-platform-challenge.md

Import and instantiate the SDK class for the screen. Access screen data like challenge options, remember device flag, and texts.

```typescript
import ResetPasswordMfaWebAuthnPlatformChallenge from '@auth0/auth0-acul-js/reset-password-mfa-webauthn-platform-challenge';

const sdk = new ResetPasswordMfaWebAuthnPlatformChallenge();

// Access screen data:
// The challenge options for navigator.credentials.get() are in sdk.screen.publicKey
const publicKeyOptions = sdk.screen.publicKey;
const showRemember = sdk.screen.showRememberDevice;
const texts = sdk.screen.texts;

if (!publicKeyOptions) {
  console.error("WebAuthn platform authenticator challenge options (publicKey) are not available.");
}
```

--------------------------------

### Get Mandatory Login Fields

Source: https://github.com/auth0/universal-login/blob/master/README.md

Retrieves the list of mandatory fields required for login from the transaction object.

```typescript
const { transaction } = loginIdManager
const requiredFields = transaction.getActiveIdentifiers();
```

--------------------------------

### Initialize the SDK Class

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/login-email-verification.md

Import and instantiate the `LoginEmailVerification` class to interact with the email verification flow. You can access screen texts and transaction details after initialization.

```APIDOC
## Initialize the SDK Class

First, import and instantiate the class for the screen:

```jsx
import LoginEmailVerification from '@auth0/auth0-acul-js/login-email-verification';

const loginEmailVerificationManager = new LoginEmailVerification();

// You can now access screen data, transaction details, etc.
// For example, to get the page title defined in Auth0 dashboard:
const pageTitle = loginEmailVerificationManager.screen.texts?.title;

// To check for errors from a previous submission attempt:
const errors = loginEmailVerificationManager.transaction.errors;
if (errors && errors.length > 0) {
  errors.forEach(err => console.log(`Error: ${err.message}`));
}
```
```

--------------------------------

### JavaScript SDK: Initialize and Use LoginId

Source: https://github.com/auth0/universal-login/blob/master/MIGRATION_JS_TO_REACT.md

Demonstrates initializing the JavaScript SDK's LoginId manager, accessing transaction and screen context, and calling the login method. Manual error handling is also shown.

```javascript
import LoginId from '@auth0/auth0-acul-js/login-id';

// Create instance
const loginIdManager = new LoginId();

// Access context
const { transaction, screen } = loginIdManager;

// Call methods on instance
await loginIdManager.login({ username: 'user@example.com' });

// Manual error handling
const errors = loginIdManager.getErrors();
```

--------------------------------

### Initialize OrganizationSelection and Access Data

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/organization-selection.md

Demonstrates how to create an instance of the OrganizationSelection class and access its properties like client, organization, prompt, screen, transaction, and user. Use this to get information about the current selection state.

```javascript
import OrganizationSelection from '@auth0/auth0-acul-js/organization-selection';

// Create a new instance of the OrganizationSelection class
const organizationSelection = new OrganizationSelection();

// Access screen data
const client = organizationSelection.client;
const organization = organizationSelection.organization;
const prompt = organizationSelection.prompt;
const screen = organizationSelection.screen;
const transaction = organizationSelection.transaction;
const user = organizationSelection.user;
```

--------------------------------

### Continue Local Passkey Enrollment

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/passkey-enrollment-local.md

Instantiate the PasskeyEnrollment class and call `continuePasskeyEnrollment` to start the local passkey enrollment process.

```typescript
import PasskeyEnrollment from '@auth0/auth0-acul-js/passkey-enrollment-local';

// Create an instance of PasskeyEnrollment to handle the enrollment process
const passkeyEnrollment = new PasskeyEnrollment();

// Begin the passkey enrollment process for local authentication
// This will trigger the necessary flow for the user to enroll their passkey
passkeyEnrollment.continuePasskeyEnrollment();

```

--------------------------------

### Initialize the SDK Class

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/consent.md

Import and instantiate the Consent class to manage consent-related operations. You can access client information, user details, and screen configurations after instantiation.

```APIDOC
## Initialize the SDK Class

First, import and instantiate the class for the Consent screen:

```typescript
import Consent from '@auth0/auth0-acul-js/consent';

const consentManager = new Consent();

// You can now access screen, client information, user details, etc.
const clientName = consentManager.client.name;
const userEmail = consentManager.user.email;
const requestedScopes = consentManager.screen?.scopes;
const shouldHideScopes = consentManager.screen?.hideScopes;

console.log(`${clientName} is requesting consent from ${userEmail}.`);
if (shouldHideScopes) {
  console.log("Scope details are hidden.");
} else if (requestedScopes) {
  console.log("Requested permissions:");
  requestedScopes.forEach(scope => {
    console.log(`- ${scope.description} (${scope.value})`);
  });
}

// Check for errors from a previous submission attempt:
const errors = consentManager.transaction.errors;
if (errors && errors.length > 0) {
  errors.forEach(err => console.error(`Error: ${err.message}`));
}
```
```

--------------------------------

### PasskeyEnrollmentLocal React Example

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/passkey-enrollment-local.md

A React component demonstrating how to integrate local passkey enrollment and abortion with state management for UI feedback.

```typescript
import React, { useState } from 'react';
import PasskeyEnrollmentLocal from '@auth0/auth0-acul-js/passkey-enrollment-local';

const PasskeyEnrollmentLocalScreen: React.FC = () => {
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);
  const [aborted, setAborted] = useState(false);
  const [doNotShowAgain, setDoNotShowAgain] = useState(false);

  const passkeyEnrollment = new PasskeyEnrollmentLocal();

  const handleContinue = async (e) => {
    e.preventDefault();
    setError('');
    setSuccess(false);
    setAborted(false);
    try {
      await passkeyEnrollment.continuePasskeyEnrollment();
      setSuccess(true);
    } catch (err) {
      setError('Failed to enroll passkey. Please try again.');
    }
  };

  const handleAbort = async (e) => {
    e.preventDefault();
    setError('');
    setSuccess(false);
    setAborted(false);
    try {
      await passkeyEnrollment.abortPasskeyEnrollment({ doNotShowAgain });
      setAborted(true);
    } catch (err) {
      setError('Failed to abort enrollment. Please try again.');
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div className="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
          Passkey Enrollment (Local)
        </h2>
      </div>
      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
          <form className="space-y-6" onSubmit={handleContinue}>
            <div className="flex flex-col gap-2">
              <button
                type="submit"
                className="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                Continue Passkey Enrollment
              </button>
            </div>
          </form>
          <form className="space-y-6 mt-4" onSubmit={handleAbort}>
            <div className="flex items-center">
              <input
                id="doNotShowAgain"
                name="doNotShowAgain"
                type="checkbox"
                checked={doNotShowAgain}
                onChange={(e) => setDoNotShowAgain(e.target.checked)}
                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
              />
              <label htmlFor="doNotShowAgain" className="ml-2 block text-sm text-gray-900">
                Do not show again
              </label>
            </div>
            <button
              type="submit"
              className="w-full py-2 px-4 border border-red-600 rounded-md shadow-sm text-sm font-medium text-red-600 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
            >
              Abort Enrollment
            </button>
          </form>
          {error && <div className="text-red-600 text-sm mt-2">{error}</div>}
          {success && <div className="text-green-600 text-sm mt-2">Passkey enrollment successful!</div>}
          {aborted && <div className="text-blue-600 text-sm mt-2">Passkey enrollment aborted.</div>}
        </div>
      </div>
    </div>
  );
};

export default PasskeyEnrollmentLocalScreen;

```

--------------------------------

### Initialize SDK Class

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/reset-password-mfa-webauthn-roaming-challenge.md

Import and instantiate the ResetPasswordMfaWebAuthnRoamingChallenge class. Access screen data like the WebAuthn challenge, remember device option, and UI texts.

```typescript
import ResetPasswordMfaWebAuthnRoamingChallenge from '@auth0/auth0-acul-js/reset-password-mfa-webauthn-roaming-challenge';

const sdk = new ResetPasswordMfaWebAuthnRoamingChallenge();

// Access screen data
const publicKeyChallengeOptions = sdk.screen.publicKey; // Contains the challenge for navigator.credentials.get()
const shouldShowRememberDeviceOption = sdk.screen.showRememberDevice;
const uiTexts = sdk.screen.texts; // For UI labels, titles, button texts

if (!publicKeyChallengeOptions) {
  console.error("WebAuthn challenge options (publicKey) are not available from the server.");
  // Handle this case, e.g., by showing an error message to the user.
}
```

--------------------------------

### Get Current Theme Options

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/get-current-theme-options.md

Use this function to retrieve the flattened theme configuration. It returns an object with theme options or null if none are available.

```typescript
import { getCurrentThemeOptions } from '@auth0/auth0-acul-js';

// Get current theme options
const themeOptions = getCurrentThemeOptions();

if (themeOptions) {
  console.log('Theme options available:', themeOptions);
} else {
  console.log('No theme options available');
}
```

--------------------------------

### Use MFA Polling Hook

Source: https://context7.com/auth0/universal-login/llms.txt

Manages the push-notification polling lifecycle for the mfa-push-challenge-push screen. Automatically starts and stops polling tied to the React component lifecycle.

```tsx
import {
  useMfaPolling,
  continueMethod,
} from '@auth0/auth0-acul-react/mfa-push-challenge-push';

const MfaPushScreen: React.FC = () => {
  const { isRunning, startPolling, stopPolling } = useMfaPolling({
    intervalMs: 5000,
    onCompleted: async () => {
      await continueMethod({ rememberDevice: false });
    },
    onError: (err) => console.error('Poll error:', err),
  });

  return (
    <div>
      <p>{isRunning ? 'Waiting for push approval…' : 'Polling paused.'}</p>
      <button onClick={startPolling} disabled={isRunning}>Start Polling</button>
      <button onClick={stopPolling} disabled={!isRunning}>Stop Polling</button>
    </div>
  );
};

```

--------------------------------

### Enroll with Platform Passkey

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/examples/mfa-webauthn-platform-enrollment.md

Use `submitPasskeyCredential` to initiate platform passkey enrollment. The SDK automatically uses the `publicKey` from the screen context, so no arguments are typically needed. Handle potential errors by reporting them using `reportBrowserError`.

```typescript
import MfaWebAuthnPlatformEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-platform-enrollment';

const sdk = new MfaWebAuthnPlatformEnrollment();

async function enrollPasskey() {
  if (!sdk.screen.publicKey) {
    console.error('Passkey creation options (publicKey) not available on the screen context.');
    // Update UI to inform the user
    return;
  }

  try {
    // Call submitPasskeyCredential without arguments (or with custom options if needed)
    // The SDK will use sdk.screen.publicKey internally.
    await sdk.submitPasskeyCredential(); 
    // On success, Auth0 handles redirection.
  } catch (error: any) {
    console.error('Passkey enrollment failed:', error.message);
    // If it's a WebAuthn API error (e.g., user cancellation), report it
    if (error.name && error.message) {
      try {
        await sdk.reportBrowserError({ error: { name: error.name, message: error.message } });
      } catch (reportError: any) {
        console.error('Failed to report browser error:', reportError.message);
      }
    }
    // Update UI to show error message to the user
  }
}

// Call enrollPasskey() when the user clicks the enroll button.
```

--------------------------------

### Add Logic to Login Button

Source: https://github.com/auth0/universal-login/blob/master/packages/auth0-acul-js/README.md

Example of adding custom logic to the login-id screen. This snippet shows how to instantiate the LoginId manager and trigger the login method.

```typescript
  import  LoginId  from '@auth0/auth0-acul-js/login-id';

  const loginIdManager = new LoginId();

  // Trigger the login method on button click
  loginIdManager.login({
    username: "testUser"
  });
```