> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-quickstart-revamp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Learn about the ACUL Device Code Activation screen classes

# Device Code Activation screen classes

## Device Code Activation screen class

The Device Code Activation screen class provides methods associated with the device-code-activation screen. This screen is displayed when a user needs to enter a code on their device to activate it.

<Frame>
  <img src="https://mintcdn.com/docs-staging-quickstart-revamp/95MUIRU4PPeO3xcE/images/cdy7uua7fh8z/2O0X9zVXut4NCScLVcrqf9/45b13c2807c5cf40327ecd2b6231f66a/Screenshot_2025-04-23_at_15.07.42.png?fit=max&auto=format&n=95MUIRU4PPeO3xcE&q=85&s=1ff9f11efe7a12f671d3f55bdb472b1b" alt="" width="363" height="489" data-path="images/cdy7uua7fh8z/2O0X9zVXut4NCScLVcrqf9/45b13c2807c5cf40327ecd2b6231f66a/Screenshot_2025-04-23_at_15.07.42.png" />
</Frame>

Import and instantiate the Device Code Activation screen class:

```js lines
import DeviceCodeActivation from '@auth0/auth0-acul-js/device-code-activation';
const deviceCodeActivationManager = new DeviceCodeActivation();

// SDK Properties return a string, number or boolean
// ex. "login-id"
deviceCodeActivationManager.screen.name;

// SDK Methods return an array
deviceCodeActivationManager.continue({
  code: 'HXNL-XWMT',
});
```

### Properties

The Device Code Activation screen class properties are:

<Tabs>
  <Tab title="branding">
    ```ts lines expandable
    interface branding {
      settings: null | BrandingSettings;
      themes: null | BrandingThemes;
    }

    interface BrandingSettings {
      colors?: {
        pageBackground?: string | {
          angleDeg: number;
          end: string;
          start: string;
          type: string;
        };
        primary?: string;
      };
      faviconUrl?: string;
      font?: {url: string;};
      logoUrl?: string;
    }

    interface BrandingThemes {
      default: {
        borders: Record<string, string | number | boolean>;
        colors: Record<string, string>;
        displayName: string;
        fonts: Record<string, string | boolean | object>;
        pageBackground: Record<string, string>;
        widget: Record<string, string | number>;
      };
    }
    ```
  </Tab>

  <Tab title="client">
    ```ts lines
    interface client {
      description: null | string;
      id: string;
      logoUrl: null | string;
      name: string;
      metadata: null | {[key: string]: string;};
    }
    ```
  </Tab>

  <Tab title="organization">
    ```ts lines
    interface organization {
      branding: null | {
        colors?: {
          pageBackground?: string;
          primary?: string;
        };
        logoUrl?: string;
      };
      displayName: null | string;
      id: null | string;
      metadata: null | {[key: string]: string;};
      name: null | string;
      usage: null | string;
    }
    ```
  </Tab>

  <Tab title="prompt">
    ```ts lines
    interface prompt{
      name: string;
    }
    ```
  </Tab>

  <Tab title="screen">
    ```ts lines expandable
    interface screen {
      captcha: null | CaptchaContext;
      captchaImage: null | string;
      captchaProvider: null | string;
      captchaSiteKey: null | string;
      data: null | Record<string,
          | string
          | boolean
          | PasskeyCreate
          | string[]
          | PhonePrefix[]>
          | Record<string, string[]>>;
      isCaptchaAvailable: boolean;
      links: null | Record<string, string>;
      name: string;
      texts: null | Record<string, string>;
    }

    interface CaptchaContext {
      image?: string;
      provider: string;
      siteKey?: string;
    }

    interface PhonePrefix {
      country: string;
      country_code: string;
      phone_prefix: string;
    }

    interface PasskeyCreate {
        public_key: {
            authenticatorSelection: {
                residentKey: string;
                userVerification: string;
            };
            challenge: string;
            pubKeyCredParams: [{ alg: number; type: string }];
            rp: { id: string; name: string };
            user: { displayName: string; id: string; name: string };
        };
    }
    ```
  </Tab>

  <Tab title="tenant">
    ```ts lines
    interface tenant {
      enabledFactors: null | string[];
      enabledLocales: null | string[];
      friendlyName: null | string;
      name: null | string;
    }
    ```
  </Tab>

  <Tab title="transaction">
    ```ts lines expandable
    interface transaction {
      alternateConnections: null | (Connection | EnterpriseConnection)[];
      connectionStrategy: null | string;
      countryCode: null | string;
      countryPrefix: null | string;
      currentConnection: null | Connection;
      errors: null | Error[];  
      hasErrors: boolean;
      locale: string;
      state: string;
    }

    interface Connection {
      metadata?: Record<string, string>;
      name: string;
      strategy: string;
    }

    interface EnterpriseConnection {
      metadata?: Record<string, string>;
      name: string;
      options: {
        displayName?: string;
        iconUrl?: string;
        showAsButton: boolean;
      };
      strategy: string;
    }
    ```
  </Tab>

  <Tab title="untrustedData">
    ```ts lines
    interface untrustedData {
      authorizationParams: null | {
        login_hint?: string;
        screen_hint?: string;
        ui_locales?: string;
        [key: `ext-${string}`]: string;
      };
      submittedFormData: null | {
        [key: string]:
            | string
            | number
            | boolean
            | undefined;
      };
    }
    ```
  </Tab>

  <Tab title="user">
    ```ts lines
    interface user {
      appMetadata: null | {[key: string]: string;};
      email: null | string;
      enrolledDevices: null | ShortEntity<"device">[];
      enrolledEmails: null | ShortEntity<"email">[];
      enrolledFactors: null | string[];
      enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[];
      id: null | string;
      organizations: null | {
        branding: undefined | {logoUrl: undefined | string;};
        displayName: undefined | string;
        organizationId: undefined | string;
        organizationName: undefined | string;
      }[];
      phoneNumber: null | string;
      picture: null | string;
      userMetadata: null | {[key: string]: string;};
      username: null | string;
    }

    ShortEntity<Key>: {
        id: number;
    } & Record<Key, string>
    ```
  </Tab>
</Tabs>

### Methods

The Device Code Activation screen class method is:

#### continue( options ?)

This method continues with the device code activation flow.

```js lines
import DeviceCodeActivation from '@auth0/auth0-acul-js/device-code-activation';
const deviceCodeActivationManager = new DeviceCodeActivation();

await deviceCodeActivationManager.continue({
  code: '123456',
});
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>code</code></td>
      <td>string</td>
      <td>Yes</td>
      <td>The code entered by the user.</td>
    </tr>
  </tbody>
</table>

## Device Code Activation Allowed screen class

The Device Code Activation screen class provides methods associated with the device-code-activation-allowed screen. This screen is displayed when the device code activation is allowed.

<Frame>
  <img src="https://mintcdn.com/docs-staging-quickstart-revamp/R8rXfTj95YBIEuC2/images/cdy7uua7fh8z/4IkAJ0lbhcvwv8qHnH9lgr/17e38628ff74219a623fdbcf780aa9fe/Screenshot_2025-04-23_at_16.19.11.png?fit=max&auto=format&n=R8rXfTj95YBIEuC2&q=85&s=ac8e010e603a2d217d5f24973c8b2e2e" alt="" width="363" height="489" data-path="images/cdy7uua7fh8z/4IkAJ0lbhcvwv8qHnH9lgr/17e38628ff74219a623fdbcf780aa9fe/Screenshot_2025-04-23_at_16.19.11.png" />
</Frame>

Import and instantiate the Device Code Activation Allowed screen class:

```js lines
import DeviceCodeActivationAllowed from '@auth0/auth0-acul-js/device-code-activation-allowed';
const deviceCodeActivationAllowedManager = new DeviceCodeActivationAllowed();
```

### Properties

The Device Code Activation Allowed screen class properties are:

<Tabs>
  <Tab title="branding">
    ```ts lines expandable
    interface branding {
      settings: null | BrandingSettings;
      themes: null | BrandingThemes;
    }

    interface BrandingSettings {
      colors?: {
        pageBackground?: string | {
          angleDeg: number;
          end: string;
          start: string;
          type: string;
        };
        primary?: string;
      };
      faviconUrl?: string;
      font?: {url: string;};
      logoUrl?: string;
    }

    interface BrandingThemes {
      default: {
        borders: Record<string, string | number | boolean>;
        colors: Record<string, string>;
        displayName: string;
        fonts: Record<string, string | boolean | object>;
        pageBackground: Record<string, string>;
        widget: Record<string, string | number>;
      };
    }
    ```
  </Tab>

  <Tab title="client">
    ```ts lines
    interface client {
      description: null | string;
      id: string;
      logoUrl: null | string;
      name: string;
      metadata: null | {[key: string]: string;};
    }
    ```
  </Tab>

  <Tab title="organization">
    ```ts lines
    interface organization {
      branding: null | {
        colors?: {
          pageBackground?: string;
          primary?: string;
        };
        logoUrl?: string;
      };
      displayName: null | string;
      id: null | string;
      metadata: null | {[key: string]: string;};
      name: null | string;
      usage: null | string;
    }
    ```
  </Tab>

  <Tab title="prompt">
    ```ts lines
    interface prompt{
      name: string;
    }
    ```
  </Tab>

  <Tab title="screen">
    ```ts lines expandable
    interface screen {
      captcha: null | CaptchaContext;
      captchaImage: null | string;
      captchaProvider: null | string;
      captchaSiteKey: null | string;
      data: null | Record<string,
          | string
          | boolean
          | PasskeyCreate
          | string[]
          | PhonePrefix[]>
          | Record<string, string[]>>;
      isCaptchaAvailable: boolean;
      links: null | Record<string, string>;
      name: string;
      texts: null | Record<string, string>;
    }

    interface CaptchaContext {
      image?: string;
      provider: string;
      siteKey?: string;
    }

    interface PhonePrefix {
      country: string;
      country_code: string;
      phone_prefix: string;
    }

    interface PasskeyCreate {
        public_key: {
            authenticatorSelection: {
                residentKey: string;
                userVerification: string;
            };
            challenge: string;
            pubKeyCredParams: [{ alg: number; type: string }];
            rp: { id: string; name: string };
            user: { displayName: string; id: string; name: string };
        };
    }
    ```
  </Tab>

  <Tab title="tenant">
    ```ts lines
    interface tenant {
      enabledFactors: null | string[];
      enabledLocales: null | string[];
      friendlyName: null | string;
      name: null | string;
    }
    ```
  </Tab>

  <Tab title="transaction">
    ```ts lines expandable
    interface transaction {
      alternateConnections: null | (Connection | EnterpriseConnection)[];
      connectionStrategy: null | string;
      countryCode: null | string;
      countryPrefix: null | string;
      currentConnection: null | Connection;
      errors: null | Error[];  
      hasErrors: boolean;
      locale: string;
      state: string;
    }

    interface Connection {
      metadata?: Record<string, string>;
      name: string;
      strategy: string;
    }

    interface EnterpriseConnection {
      metadata?: Record<string, string>;
      name: string;
      options: {
        displayName?: string;
        iconUrl?: string;
        showAsButton: boolean;
      };
      strategy: string;
    }
    ```
  </Tab>

  <Tab title="untrustedData">
    ```ts lines
    interface untrustedData {
      authorizationParams: null | {
        login_hint?: string;
        screen_hint?: string;
        ui_locales?: string;
        [key: `ext-${string}`]: string;
      };
      submittedFormData: null | {
        [key: string]:
            | string
            | number
            | boolean
            | undefined;
      };
    }
    ```
  </Tab>

  <Tab title="user">
    ```ts lines
    interface user {
      appMetadata: null | {[key: string]: string;};
      email: null | string;
      enrolledDevices: null | ShortEntity<"device">[];
      enrolledEmails: null | ShortEntity<"email">[];
      enrolledFactors: null | string[];
      enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[];
      id: null | string;
      organizations: null | {
        branding: undefined | {logoUrl: undefined | string;};
        displayName: undefined | string;
        organizationId: undefined | string;
        organizationName: undefined | string;
      }[];
      phoneNumber: null | string;
      picture: null | string;
      userMetadata: null | {[key: string]: string;};
      username: null | string;
    }

    ShortEntity<Key>: {
        id: number;
    } & Record<Key, string>
    ```
  </Tab>
</Tabs>

## Device Code Activation Denied screen class

The Device Code Activation screen class provides methods associated with the device-code-activation-denied screen. This screen is displayed when the device code activation is denied.

<Frame>
  <img src="https://mintcdn.com/docs-staging-quickstart-revamp/MuTsjoV4fPPSGZz9/images/cdy7uua7fh8z/2nHLbMQ6oMfqWVuwvrkS9K/d4239f99eb7c646bdfa05c0b26a97c9f/Screenshot_2025-04-23_at_16.28.37.png?fit=max&auto=format&n=MuTsjoV4fPPSGZz9&q=85&s=85d2be0ce5b6e193c848121789615a26" alt="" width="363" height="487" data-path="images/cdy7uua7fh8z/2nHLbMQ6oMfqWVuwvrkS9K/d4239f99eb7c646bdfa05c0b26a97c9f/Screenshot_2025-04-23_at_16.28.37.png" />
</Frame>

Import and instantiate the Device Code Activation Denied screen class:

```js lines
import DeviceCodeActivationDenied from '@auth0/auth0-acul-js/device-code-activation-denied';
const deviceCodeActivationDeniedManager = new DeviceCodeActivationDenied();
```

### Properties

The Device Code Activation Denied screen class properties are:

<Tabs>
  <Tab title="branding">
    ```ts lines expandable
    interface branding {
      settings: null | BrandingSettings;
      themes: null | BrandingThemes;
    }

    interface BrandingSettings {
      colors?: {
        pageBackground?: string | {
          angleDeg: number;
          end: string;
          start: string;
          type: string;
        };
        primary?: string;
      };
      faviconUrl?: string;
      font?: {url: string;};
      logoUrl?: string;
    }

    interface BrandingThemes {
      default: {
        borders: Record<string, string | number | boolean>;
        colors: Record<string, string>;
        displayName: string;
        fonts: Record<string, string | boolean | object>;
        pageBackground: Record<string, string>;
        widget: Record<string, string | number>;
      };
    }
    ```
  </Tab>

  <Tab title="client">
    ```ts lines
    interface client {
      description: null | string;
      id: string;
      logoUrl: null | string;
      name: string;
      metadata: null | {[key: string]: string;};
    }
    ```
  </Tab>

  <Tab title="organization">
    ```ts lines
    interface organization {
      branding: null | {
        colors?: {
          pageBackground?: string;
          primary?: string;
        };
        logoUrl?: string;
      };
      displayName: null | string;
      id: null | string;
      metadata: null | {[key: string]: string;};
      name: null | string;
      usage: null | string;
    }
    ```
  </Tab>

  <Tab title="prompt">
    ```ts lines
    interface prompt{
      name: string;
    }
    ```
  </Tab>

  <Tab title="screen">
    ```ts lines expandable
    interface screen {
      captcha: null | CaptchaContext;
      captchaImage: null | string;
      captchaProvider: null | string;
      captchaSiteKey: null | string;
      data: null | Record<string,
          | string
          | boolean
          | PasskeyCreate
          | string[]
          | PhonePrefix[]>
          | Record<string, string[]>>;
      isCaptchaAvailable: boolean;
      links: null | Record<string, string>;
      name: string;
      texts: null | Record<string, string>;
    }

    interface CaptchaContext {
      image?: string;
      provider: string;
      siteKey?: string;
    }

    interface PhonePrefix {
      country: string;
      country_code: string;
      phone_prefix: string;
    }

    interface PasskeyCreate {
        public_key: {
            authenticatorSelection: {
                residentKey: string;
                userVerification: string;
            };
            challenge: string;
            pubKeyCredParams: [{ alg: number; type: string }];
            rp: { id: string; name: string };
            user: { displayName: string; id: string; name: string };
        };
    }
    ```
  </Tab>

  <Tab title="tenant">
    ```ts lines
    interface tenant {
      enabledFactors: null | string[];
      enabledLocales: null | string[];
      friendlyName: null | string;
      name: null | string;
    }
    ```
  </Tab>

  <Tab title="transaction">
    ```ts lines expandable
    interface transaction {
      alternateConnections: null | (Connection | EnterpriseConnection)[];
      connectionStrategy: null | string;
      countryCode: null | string;
      countryPrefix: null | string;
      currentConnection: null | Connection;
      errors: null | Error[];  
      hasErrors: boolean;
      locale: string;
      state: string;
    }

    interface Connection {
      metadata?: Record<string, string>;
      name: string;
      strategy: string;
    }

    interface EnterpriseConnection {
      metadata?: Record<string, string>;
      name: string;
      options: {
        displayName?: string;
        iconUrl?: string;
        showAsButton: boolean;
      };
      strategy: string;
    }
    ```
  </Tab>

  <Tab title="untrustedData">
    ```ts lines
    interface untrustedData {
      authorizationParams: null | {
        login_hint?: string;
        screen_hint?: string;
        ui_locales?: string;
        [key: `ext-${string}`]: string;
      };
      submittedFormData: null | {
        [key: string]:
            | string
            | number
            | boolean
            | undefined;
      };
    }
    ```
  </Tab>

  <Tab title="user">
    ```ts lines
    interface user {
      appMetadata: null | {[key: string]: string;};
      email: null | string;
      enrolledDevices: null | ShortEntity<"device">[];
      enrolledEmails: null | ShortEntity<"email">[];
      enrolledFactors: null | string[];
      enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[];
      id: null | string;
      organizations: null | {
        branding: undefined | {logoUrl: undefined | string;};
        displayName: undefined | string;
        organizationId: undefined | string;
        organizationName: undefined | string;
      }[];
      phoneNumber: null | string;
      picture: null | string;
      userMetadata: null | {[key: string]: string;};
      username: null | string;
    }

    ShortEntity<Key>: {
        id: number;
    } & Record<Key, string>
    ```
  </Tab>
</Tabs>

## Device Code Confirmation screen class

The Device Code Confirmation screen class provides methods associated with the device-code-confirmation screen. This screen is displayed when a user needs to confirm the device code.

<Frame>
  <img src="https://mintcdn.com/docs-staging-quickstart-revamp/AmyDKn5Na0kFZtbL/images/cdy7uua7fh8z/1Rw4mCNC9q1oYRI1jLo701/f20c5511fdb777b2dac995a9712813af/Screenshot_2025-04-23_at_16.31.23.png?fit=max&auto=format&n=AmyDKn5Na0kFZtbL&q=85&s=20893a7c9498c0c4858836d49b1ccb4c" alt="" width="363" height="485" data-path="images/cdy7uua7fh8z/1Rw4mCNC9q1oYRI1jLo701/f20c5511fdb777b2dac995a9712813af/Screenshot_2025-04-23_at_16.31.23.png" />
</Frame>

Import and instantiate the Device Code Confirmation screen class:

```js lines
import DeviceCodeConfirmation from '@auth0/auth0-acul-js/device-code-confirmation';
const deviceCodeConfirmationManager = new DeviceCodeConfirmation();
```

### Properties

The Device Code Confirmation screen class properties are:

<Tabs>
  <Tab title="branding">
    ```ts lines expandable
    interface branding {
      settings: null | BrandingSettings;
      themes: null | BrandingThemes;
    }

    interface BrandingSettings {
      colors?: {
        pageBackground?: string | {
          angleDeg: number;
          end: string;
          start: string;
          type: string;
        };
        primary?: string;
      };
      faviconUrl?: string;
      font?: {url: string;};
      logoUrl?: string;
    }

    interface BrandingThemes {
      default: {
        borders: Record<string, string | number | boolean>;
        colors: Record<string, string>;
        displayName: string;
        fonts: Record<string, string | boolean | object>;
        pageBackground: Record<string, string>;
        widget: Record<string, string | number>;
      };
    }
    ```
  </Tab>

  <Tab title="client">
    ```ts lines
    interface client {
      description: null | string;
      id: string;
      logoUrl: null | string;
      name: string;
      metadata: null | {[key: string]: string;};
    }
    ```
  </Tab>

  <Tab title="organization">
    ```ts lines
    interface organization {
      branding: null | {
        colors?: {
          pageBackground?: string;
          primary?: string;
        };
        logoUrl?: string;
      };
      displayName: null | string;
      id: null | string;
      metadata: null | {[key: string]: string;};
      name: null | string;
      usage: null | string;
    }
    ```
  </Tab>

  <Tab title="prompt">
    ```ts lines
    interface prompt{
      name: string;
    }
    ```
  </Tab>

  <Tab title="screen">
    ```ts lines
    interface screen {
        captcha: null | CaptchaContext;
        captchaImage: null | string;
        captchaProvider: null | string;
        captchaSiteKey: null | string;
        data: null | { textCode: string;};
        isCaptchaAvailable: boolean;
        links: null | Record<string, string>;
        name: string;
        texts: null | Record<string, string>;
    }

    interface CaptchaContext {
        image?: string;
        provider: string;
        siteKey?: string;
    }
    ```
  </Tab>

  <Tab title="tenant">
    ```ts lines
    interface tenant {
      enabledFactors: null | string[];
      enabledLocales: null | string[];
      friendlyName: null | string;
      name: null | string;
    }
    ```
  </Tab>

  <Tab title="transaction">
    ```ts lines expandable
    interface transaction {
      alternateConnections: null | (Connection | EnterpriseConnection)[];
      connectionStrategy: null | string;
      countryCode: null | string;
      countryPrefix: null | string;
      currentConnection: null | Connection;
      errors: null | Error[];  
      hasErrors: boolean;
      locale: string;
      state: string;
    }

    interface Connection {
      metadata?: Record<string, string>;
      name: string;
      strategy: string;
    }

    interface EnterpriseConnection {
      metadata?: Record<string, string>;
      name: string;
      options: {
        displayName?: string;
        iconUrl?: string;
        showAsButton: boolean;
      };
      strategy: string;
    }
    ```
  </Tab>

  <Tab title="untrustedData">
    ```ts lines
    interface untrustedData {
      authorizationParams: null | {
        login_hint?: string;
        screen_hint?: string;
        ui_locales?: string;
        [key: `ext-${string}`]: string;
      };
      submittedFormData: null | {
        [key: string]:
            | string
            | number
            | boolean
            | undefined;
      };
    }
    ```
  </Tab>

  <Tab title="user">
    ```ts lines
    interface user {
      appMetadata: null | {[key: string]: string;};
      email: null | string;
      enrolledDevices: null | ShortEntity<"device">[];
      enrolledEmails: null | ShortEntity<"email">[];
      enrolledFactors: null | string[];
      enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[];
      id: null | string;
      organizations: null | {
        branding: undefined | {logoUrl: undefined | string;};
        displayName: undefined | string;
        organizationId: undefined | string;
        organizationName: undefined | string;
      }[];
      phoneNumber: null | string;
      picture: null | string;
      userMetadata: null | {[key: string]: string;};
      username: null | string;
    }

    ShortEntity<Key>: {
        id: number;
    } & Record<Key, string>
    ```
  </Tab>
</Tabs>

### Methods

The Device Code Confirmation screen class methods are:

#### cancel( options ?)

This method cancels the confirmation process.

```js lines
import DeviceCodeConfirmation from '@auth0/auth0-acul-js/device-code-confirmation';
const deviceCodeConfirmationManager = new DeviceCodeConfirmation();

const handleCancel = async () => {
  await deviceCodeConfirmationManager.cancel();
};
```

#### confirm( options ?)

This method confirms the code was successfully entered.

```js lines
import DeviceCodeConfirmation from '@auth0/auth0-acul-js/device-code-confirmation';
const deviceCodeConfirmationManager = new DeviceCodeConfirmation();

const handleConfirm = async () => {
  await deviceCodeConfirmationManager.confirm();
};
```