I am attempting to evaluate ACUL for our use cases, but
As a result, I am confused on how to leverage the documentation to start testing with ACUL.
Hello!
I am facing the same issue. Please inform if you get any solution.
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
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.
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.
@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.
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();
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.
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:
main.tsx in the sample app that shows a simple way to do this.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!
Thanks, @michael.swanson . That did the trick. FYI, I don’t recall seeing this in the documentation anywhere.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.