Customized Consent screen class

Customized Learn about the ACUL 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();