Unable to get application Logo URL in ACUL

[Jojo.Jose]

Hi,
We have setup the Logo and other theme parameters for the universal login and wanted to get this on our ACUL screens. For example I have enabled logo and other theme checkbox for login-id screen but unable to find how to use that in the code.

I’m using auth0-acul-samples/react at main · auth0-samples/auth0-acul-samples as a base and from this code.

Is it possible to get this define logo and other themes in code when we are using ACUL

[nik.baleca]

Hi @Jojo.Jose

Auth0 injects that configuration directly into the ACUL context. Because you are using the auth0-acul-samples/react boilerplate, you can access all of these settings by using the useBranding() hook provided by the SDK.

In ACUL, the React SDK parses this context payload and makes it strictly typed and available via React Hooks. The auth0-acul-react package exposes specific hooks for different parts of the context (e.g., useBranding , useClient , useTenant ).

The code itself should look something like this:

import React from 'react';
import { useBranding } from '@auth0/auth0-acul-react'; 

export const CustomHeader = () => {
  const branding = useBranding();
  
  const logoUrl = branding?.settings?.logoUrl;
  const primaryColor = branding?.settings?.colors?.primary;
  const pageBackground = branding?.settings?.colors?.pageBackground;

  return (
    <div style={{ backgroundColor: pageBackground, padding: '20px' }}>
      {logoUrl && (
        <img 
          src={logoUrl} 
          alt="Company Logo" 
          style={{ maxWidth: '150px', marginBottom: '20px' }} 
        />
      )}
      
      <h1 style={{ color: primaryColor }}>
        Welcome to Our App
      </h1>
    </div>
  );
};

If you have any other questions, let me know!

Kind Regards,
Nik