Customized Consent screen class

The Customized Consent screen class provides methods associated with the customized consent screen.

Import and instantiate the Customized Consent screen class:

import CustomizedConsent from '@auth0/auth0-acul-js/customized-consent';
const customizedconsentManager = new CustomizedConsent();

Properties

The Customized Consent screen class properties are:

branding

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>;
  };
}

client

interface client {
  description: null | string;
  id: string;
  logoUrl: null | string;
  name: string;
  metadata: null | {[key: string]: string;};
}

organization

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;
}

prompt

interface prompt{
  name: string;
}

screen

interface screen {
    authorizationDetails: AuthorizationDetail[];
    captcha: null | CaptchaContext;
    captchaImage: null | string;
    captchaProvider: null | string;
    captchaSiteKey: null | string;
    data:
        | null
        | Record<
            string,
            | string
            | boolean
            | PasskeyCreate
            | string[]
            | Record<string, string[]>
            | Classes.PhonePrefix[],
        >;
    isCaptchaAvailable: boolean;
    links: null | Record<string, string>;
    name: string;
    scopes: Scope[];
    texts: null | Record<string, string>;
}

interface AuthorizationDetail {
    type: string;
    [key: string]: string;
}

interface CaptchaContext {
    image?: string;
    provider: string;
    siteKey?: 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 };
    };
}

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

interface Scope {
    description?: string;
    value: string;
}

tenant

interface tenant {
  enabledFactors: null | string[];
  enabledLocales: null | string[];
  friendlyName: null | string;
  name: null | string;
}

transaction

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;
}

untrustedData

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;
  };
}

user

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>

Methods

The Customized Consent screen class methods are:

accept( options? )

This method submits the user’s decision to accept the requested permissions.

import CustomizedConsent from '@auth0/auth0-acul-js/customized-consent';
const customizedConsentManager = new CustomizedConsent();
const handleAccept = async () => {
 try {
   await customizedConsentManager.accept();
   console.log('Consent accepted successfully.');
 } catch (err) {
   console.error('Error accepting consent:', err);
 }
};

Parameter	Type	Required	Description
[key: string]	string | number | boolean | undefined	No	Optional data collected from user.

deny( options? )

This method submits the user’s decision to deny the requested permissions.

import CustomizedConsent from '@auth0/auth0-acul-js/customized-consent';
const customizedConsentManager = new CustomizedConsent();
const handleDeny = async () => {
try {
    await customizedConsentManager.deny({ denial_reason: "user_declined" });
    // On success, Auth0 will typically redirect.
  } catch (e) {
    console.error('Failed to deny consent:', e);
  }
 }

Parameter	Type	Required	Description
[key: string]	string | number | boolean | undefined	No	Optional data collected from user.

getError( options? )

This method retrieves the array of transaction errors from context or an empty array if none exist.

import CustomizedConsent from '@auth0/auth0-acul-js/customized-consent';
    const customizedConsentManager = new CustomizedConsent();
    await customizedConsentManager.getError();