ACUL documentation does not line up with linked GitHub repository

Get Help
,
1

I am attempting to evaluate ACUL for our use cases, but

  • The Auth0 ACUL JS SDK Quickstart article mentions an auth0-acul-react-boilerplate folder that doesn’t exist.
  • The start of the App.tsx file iin the Quickstart does not look the same as it does in GitHub.
  • The GitHub documentation contradicts the Quickstart article.

As a result, I am confused on how to leverage the documentation to start testing with ACUL.

2

Hello!
I am facing the same issue. Please inform if you get any solution.

4

Hi Team!

Welcome to the Auth0 Community!

Thank you for the question. Let me go to our Product team to gather some answers, and I will get back to you as soon as I have more details.

Thank you, and I appreciate your patience!
Dawid

5

FWIW, I was able to get a very simple POC of the ACUL functionality run to test it out. This helped me demystify it and test out the flow.

Steps for simple ACUL POC
1- Create a new React project
npm create vite@latest

2- install a few more dependencies
npm install @auth0/auth0-acul-js
npm install tailwindcss @tailwindcss/postcss postcss

2.5 Use the main.tsx file from the Boiler plate repo. See post below.

3-Create a simple form that has the required fields for the screen you are customizing. EG, for the signup-password screen, I’m just using this:
function App() { return ( <> <div>HELLO</div> <form action={window.location.href} method="post"> Username <input type="text" name="username" /> <br/> Password <input type="text" name="password" /> <br/> Favorite Color <input type="text" name="favoriteColor" /> <input type="submit" value="Submit" /> </form> </> ) } export default App;

Important: submit form to the same origin

4-Build the app and serve locally from the ./dist directory
note: you’ll probably need an ssl cert and to tweak the cors settings

5- Tell Auth0 you’re using an advanced screen
Patch the json below here:
[managementApiUri]/api/v2/prompts/signup-password/screen/signup-password/rendering

{ "rendering_mode": "advanced", "head_tags": [ { "tag": "script", "attributes": { "src": "https://192.168.1.39:8080/assets/[YOUR FILE NAME].js", "defer": true } } ] }

That’s basically it. Note, I’m not even using the ACUL JDK in this example. Just submitting a form with the correct fields.

Also, I’m unable to access the form data in the pre-user-registration action, as the documentation indicates you should. If anyone has more lock with this, please let me know.

6

The readme file in GitHub has changed since I last saw it months ago, but the Auth0 docs have not. After using the GitHub readme instructions, I was able to get it up and running locally.

1 Like
7

@jdrew1 I’m actually using your instructions to develop a full POC. However, I end up with a blank page and the error returned is Target container is not a DOM element. This probably because although I have supplied the JS file, there is no corresponding div in the html body and I’m not sure how to do that. I suspect this is related to a subsequent post I made: What is the point of the index.html file in the acul boilerplate? - Auth0 Community.

8

Ahh shoot. I think this is bc I’m using the main.tsx file from the boiler plate repo. Neglected to mention that above.

import React from “react”;
import ReactDOM from “react-dom/client”;
import App from “./App.tsx”;
import “./index.css”;
import { loadAndSetMockContext } from “@/utils/screen/mockContextLoader”;

async function initializeApp() {
await loadAndSetMockContext();

/**

  • ACUL Integration Note:
  • The following lines handle the specific way this React application is integrated
  • into Auth0’s Universal Login page. Auth0 provides the base HTML DOM.
  • This script then dynamically creates a ‘div’ (rootElement),
  • appends it to Auth0’s document.body, and then mounts the React application onto this div.
  • This differs from typical setups where an index.html is bundled directly with the app.
    */
    const rootElement = document.createElement(“div”);
    rootElement.id = “root”;

document.body.appendChild(rootElement);

ReactDOM.createRoot(document.getElementById(“root”)!).render(
<React.StrictMode>

</React.StrictMode>,
);
}

initializeApp();

9

Please let me know if you get your POC working, especially if you’re able to pass custom fields to an Auth0 Action. I’ve been advised by a community engineer to try a different approach, but it’s still not clear to me if this is bc there’sa bug, if I’m doing something wrong, or if that’s the intended functionality.

10

First of all, thank you all for trying out ACUL! I am one of the product manager for this feature. Sorry for the confusion around the docs and Quickstart. We are in the process of reworking the docs and Quickstarts to better align with the current EA features and functionality. I will work with my team to get the ACUL Quickstart Doc updated to avoid confusion.

Regarding your questions, and to help clear up the confusion:

  • The best place to start is the setup recommended in the sample application. This is still under active development and will change and expand quite a bit in the coming months as we near GA.
  • The docs for the Management API are up to date and should work as expected for configuring Universal Login to use ACUL for a specific screen.
  • @BrandenRobinson you are correct that the error you are seeing is because the root div is not included in the page. We don’t add this by default because the various JS frameworks expect different things. There is code in main.tsx in the sample app that shows a simple way to do this.
  • @jdrew1 regarding accessing the data in the Pre User Registration action… when submitting your signup form you need to prefix the custom data keys with ulp-*. This is using Custom Prompts under the hood to capture and forward the data.
screenProvider.signup({
  email: <EMAIL_INPUT_VALUE>,
  password: <PASSWORD_INPUT_VALUE>,
  "ulp-first-name": <INPUT_FIELD_VALUE>
});

Note: The same thing will work on the login screens with the exception that the data will be surfaced in the Post Login action instead.

I hope that helps clear things up!

1 Like