Scope descriptions not accessible in ACUL consent screen

[daniel.bozinovski]

Heya,

We’re currently running a proof of concept for a Custom Universal Login (ACUL) implementation and are using the consent screen as part of our initial testing.

During testing, we noticed that the scope descriptions defined for our API do not appear on the ACUL consent screen.

According to the documentation ( consent | @auth0/auth0-acul-react - v1.0.0 ), we inspected each relevant hook for the consent flow, but only the scope names are being returned - the scope descriptions are either empty or missing.

We also enabled the following tenant flag setting without success:

"use_scope_descriptions_for_consent": true

This flag correctly surfaces the descriptions in the classic Universal Login consent screen, but not in the ACUL version.

Could you please advise whether this is an expected limitation, a configuration issue, or a potential bug?

Any guidance on how to access or display the scope descriptions on the ACUL consent screen would be greatly appreciated.

Thanks so much for your help!

[nik.baleca]

Hi @daniel.bozinovski

The scope descriptions should be available when using ACUL. You can check out our documentation regarding customizing the consent screens.

For the screen customization, you should have an interface which includes the scope name and description:

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

Let me know if you have any other questions or issues on the matter.

Kind Regards,
Nik

[daniel.bozinovski]

Hey @nik.baleca ,

Thanks for your reply!

Yep, I’m aware that the scope descriptions should be available per the documentation but what I’m saying is that they’re never actually populated (i.e. are undefined for example).

[nik.baleca]

Hi again @daniel.bozinovski

Sorry for the delayed reply.

Could you try the following:

• Create a mapping object that links scope names to descriptions:

// constants/scopeDescriptions.js
export const SCOPE_DESCRIPTIONS = {
  'read:appointments': 'View your upcoming and past appointments',
  'write:appointments': 'Schedule and cancel appointments on your behalf',
  'openid': 'Verify your identity',
  'profile': 'Access your basic profile information',
  '...'
  //
};

• Import this map into your Consent screen component and use it to lookup the description based on the scope name provided by the ACUL hook:

import { useConsent } from '@auth0/auth0-acul-react';
import { SCOPE_DESCRIPTIONS } from './constants/scopeDescriptions';

export const ConsentScreen = () => {
  const { state } = useConsent();
  // state.scopes is usually an array of strings or objects with a 'value' property
  
  return (
    <ul>
      {state.scopes.map((scope) => {
        const scopeName = typeof scope === 'string' ? scope : scope.value;
        const description = SCOPE_DESCRIPTIONS[scopeName] || scopeName;
        
        return (
           <li key={scopeName}>
             <strong>{scopeName}</strong>: {description}
           </li>
        );
      })}
    </ul>
  );
};

Let me know if does the trick for you!

Kind Regards,
Nik