Help + Clarifications regarding ACUL

Get Help
,
1

Hi,

I am currently trying to wrap my head around ACUL and how it works. I have been following the steps outlined here Migrate from Classic Login to Universal Login with ACUL - Auth0 Docs .

The documentation implies that ACUL supports all frameworks, but the template project (I chose auth0-acul-js) generated is entirely written in react, and react seems to be required to use the UL Context Inspector. My initial understanding based on reading the docs was that running auth0 acul dev would automatically wrap the page in the context inspector, but it looks like it’s actually handled by the file DevScreenManager.tsx which was generated as part of the template, and has a react dependency.

I’m wondering if I am fundamentally misunderstanding something here about how to approach ACUL and its CLI when it comes to customising pages without writing them in react?

Any help or guidance would be appreciated, thanks!

3

Hi @james.bramley

Welcome to the Auth0 Community!

ACUL does support all frameworks (or no framework at all). The reason you are seeing React in the auth0-acul-js template is that the Universal Login Context Inspector is built using React.

Your actual production login screens will be compiled as pure Vanilla JavaScript. The React code is strictly a local development dependency used to render the nice testing harness around your Vanilla JS code.

To approach customizing pages without writing React, you simply ignore the DevScreenManager.tsx file entirely.

You do not need to touch, modify, or understand the React code to build your application. You should focus all of your development effort entirely within your individual screen files (e.g., login.ts , signup.ts , or your raw .html files).

If you have any other questions, let me know!

Kind Regards,
Nik