There seem to be a few different ways (currently) to customize the Universal Login/Signup process.
Editing Partials/Themes/Prompts/Templates through the Management API
Allows you to overwrite these different elements of the login screens/pages.
Using ACUL SDK
Gives full control over process.
Using Forms
Kind of a WYSIWG/ControlFlow GUI
4)Using Actions with redirects
Where you redirect user to page hosted elsewhere (to fill out additional data, eg), then return them to the Auth0 flow
5)AuthJS SDK for full embedded solution in SPA apps
Can someone confirm if I’m summarizing this correctly?
Can anyone speak generally about the use cases that are appropriate for each solution?
Do these solutions have a hierarchy of difficulty?
In particular, can someone recommend the right solution for my use case:
–Using a Custom DB I need to add a few text fields to the signup prompt and allow users to select their employer from a preset list of companies (ajax-driven). These values need to be save to the Auth0 user profile and our custom db connection.
Here’s a general overview of appropriate use cases for each:
Editing Partials/Themes/Prompts/Templates:
When you must align the Universal Login page’s appearance with your brand guidelines or make simple text changes.
ACUL SDK:
When you need to modify the behavior or add dynamic elements to the Universal Login page, but still want to leverage Auth0’s hosted solution.
Forms (New Universal Login Builder):
When you have straightforward data collection needs during signup and prefer a visual, low-code approach. This is often the first place to look for custom fields unless your requirements are complex.
Actions with Redirects:
When you must break out of the standard Auth0 flow to perform an external process and then return. This is ideal for adding robust, application-specific steps.
AuthJS SDK for complete embedded solution:
When you require ultimate control over the front-end login/signup experience and are willing to invest in building and maintaining that part of your application.
The difficulty hierarchy generally stands as follows, though it can vary:
Forms
Editing Partials
ACUL SDK
Actions with Redirects
AuthJS SDK
Given the requirements of your request, here’s my recommendation:
ACUL SDK on the signup page for the client-side interaction.
A Post User Registration Action to save data to the Auth0 user profile and your custom DB.
A Custom Database Connection script to handle the actual saving to your database.
If you have any other questions, feel free to reach out.
It’s going well so far. One question, when you submit the signup form, how does Auth0 handle the custom data fields? EG, in my hosted frontend form, I’ve got Username, Password and FavortiveColor. Username and Password are part of the Auth0 flow. Auth0 servers validate them, save them to the user profile etc.
What’s the expected practice for handling FavoriteColor? Ultimately, I’d like it store in the user_metadata. Is this handled in an Action? How should this data be submitted? As part of the form? In a separate API call?
The custom data fields will appear in the request’s body section. You can use an Action to receive the FavoriteColor property and process it however you need. Here is an example that stores the property in the user_metadata, as per your request.
If you have any other questions, feel free to reach out.
The event.request.body object is empty in the onExecutePreUserRegistration actions. Seems like the same issue this user was having: ACUL Sending custom data on signup
Can you comment on the recommendations in that post? Or perhaps recommend another approach? Seems like this should work, given the documentation:
