We’ve implemented customized branded ACUL screens and can login successfully on multiple browsers, devices, and screen sizes. Core functionality is fine, however we’ve noticed two major issues which are blockers for us.
First, when using ACUL screens we’ve noticed notable flashes when transitioning between pages to the default background colour set in the auth0 dashboard for the tenant. This problem is exacerbated on slow speeds, but even on gigabit connections the flash is visible. We’re not making any network calls other than for lazy loaded logos - all customization is done in the ULThemePageLayout component via untrustedData?.authorizationParams. Tests are done with browser caching turned on and all links from the Head Tags section have already been fetched. In the worst case, this can result in blank screens for five or ten seconds at a time.
Secondly, we’ve noticed that the passkey-enrollment page does not properly pass authorizationParams. This object comes back nil on this specific page when all other pages within the login flow get the values correctly. This page is configured identically to others through the CLI, and the dashboard shows all of our custom parameters listed and enabled under Additional Data for the page.
import { useCurrentScreen } from "@auth0/auth0-acul-react";
const screen = useCurrentScreen();
const authorizationParams = screen?.untrustedData?.authorizationParams;
// authorizationParams is null/undefined ONLY on passkey-enrollment