Extra validation username field in sign up form Login by Auth0 wordpress plugin

Hi! I’m using Login by Auth0 wordpress plugin. I need to add a extra validation in username field. I need users use only personal ID as username. How could I get it? Any clue, please?

Hi there @melmenlu

I’ll handle the reply for your WP forum post here as well.

Do you need to validate that the “personal ID” exists somewhere or just that it’s an integer or something else? You can interact with the form using JavaScript on the login page, just load your own JS file with login_enqueue_scripts and go from there.

Hope that helps!

Thanks for your response! Sorry, I didn’t explain correctly.

I need extra validation for username field in sign up form. When a user signups, the username field must containt a “personal ID” (spanish ID, 8 digits and 1 letter, which has it own validation).

I’m using an Auth0 Database to store username / password credentials. I must force that username always be a valid personal ID.

As I can read “login_enqueue_scripts is the proper hook to use when enqueuing items that are meant to appear on the login page”. Is this hook proper to use in signup form? I show the login / signup form in my website frontend with attribute show_as_modal=“false”.

Happy to help!

The login_enqueue_scripts hook is for the wp-login.php page so, in your case, you’ll want to use wp_enqueue_scripts. If it’s only on certain pages, you can use the callback there to add logic that only loads in certain places. If you also allow signups on wp-login.php, just attach the same callback to both hooks. The login form loads both tabs at once so you can use that hook for the signup tab.

That said … this will only affect the form on the site that the script is being loaded on so if there are more sites you want to connect, you’ll have to keep that JS in sync across them. Also, in order to stop processing the signup if the username is invalid, you’ll need to modify how Lock is loaded, which means dequeuing and re-enqueuing your own assets/js/lock-init.js file and using events.

Probably a better solution here is to write a rule for your tenant that will stop the processing the signup if a certain condition is not met. Information on Rules is here and a sample rule is here (it’s for disabling signups but that should be enough to go on).

Another option would be to keep the email address for signup but add the personal ID as an additional signup field, explained here.

I have been reading about hooks. Do you think creating Pre User Registration hook could be an option?

If you use that hook in WordPress, it will only stop the WP registration, not the Auth0 one. So they will have an Auth0 account but not a WordPress one, which makes things out of sync.

I mean Auth0 Hooks, not wordpress hooks…

Where can I find that js file? I’m using wordpress plugin. Can you give me more details, please?

As I can see here:

Rules execute after the initial authentication step is completed; for a database connection user that would mean that the user provided correct credentials (username/email and password); they do not execute at user signup.
If your use case is around database connections you should check the pre-registration hook

Sorry, @melmenlu, you’re right. You definitely need that to happen before registration. I think that’s a better way of accomplishing this but the issue is that the signup will be stopped but your error message will not show on the Lock widget (just registers as a general failure). This is being worked on here in the next week or two so will be a better option soon if you can wait.

If not, you’ll need to handle this on the front-end with JS. Enqueue a new JS file with login_enqueue_scripts and hide the submit button until someone enters a username. Run the validation you need and show either an error or the submit button, depending on the outcome.

I have a similar workflow too. My app is pure JS calling auth0 signup. I am trying to find an auth0 api that can be called from browser to validate uniqueness of user-field before going through the registration. any pointers?

We do have a Management API that provides a user search endpoint:

… but that does require an API token or a client credentials grant, neither of which is secure through the browser (would expose an API token or your client secret, something you definitely don’t want to do). Is there a back-end on your app you could authenticate with and use?

Any news about this?

Please, could you give me more info? Where is the code in “Login by Auth0” plugin? I need to resolve this issue urgently and I’m totally lost about where I have to insert the code.

@melmenlu - In other words, you’ll need to enqueue a JS file on the login page to do the custom UI you’re trying to do. This is not a change to the plugin code, this is your own JS file that will do the validation you need. Custom functionality like that is outside the realm of what we’re able to support but if you have any specific questions about what to hook into in Lock or the WP plugin, I’m happy to help guide you.

I’m checking in with the engineering team that’s handling the change to the pre-registration hook now. I expected that to be merged previously but it looks like it’s still in progress. The change there, as far as I can see, is to expose the error message generated in the hook in a way that a user can see it. So you’ll write a pre-registration hook in the Auth0 dashboard and, if a specific condition is not met (i.e. the username does not match the format of the personal ID you mentioned), you can throw back a specific error message.

I’ll update here when I get an update on when that’s slated to go live.