Auth0 Home Blog Docs

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

wordpress
plugin

#1

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?


#2

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!


#3

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”.


#4

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.


#5

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


#6

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.


#9

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


#10

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.


#12

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?