Our account system is taking shape now that we have login, logout, and password reset implemented. Next we need to handle user registrations!
Lucky for us, WPGraphQL provides us with a user registration mutation we can use out of the box.
All we need to is build some client code to consume this. In this post I’ll be demonstrating this using ReactJS and the Apollo Client package (which I covered in a previous post) to make our requests to the server where WordPress and WPGraphQL are running.
When we create a registration form it will need a way to send the form data to the server. For this we can create some custom React hooks.
This hook provides us with a function named
registerMutation that accepts a username, email, and password and then uses Apollo Client
This hook can be used like this:
I created another custom hook that consumes
useRegisterMutation and does a little more handling for things such as error states and status that our registration form will later use.
One thing we do need to handle is error codes coming back from the WPGraphQL API—the codes are descriptive but need to be converted into a more human readable format if they are being displayed to the user:
The hook itself uses the mutation hook we made earlier, tracks the status of requests (idle, resolving, resolved), and stores any error messages we get back from the server.
Creating the user registration form
The registration form needs fields for username, email address, and password. It also needs to use the
error state from the
useRegistration hook we created earlier.
A basic version of the form in React would be as follows (I am using
useState here to store field values).
With this in place, our form looks like this:
Adding some basic form validation
To avoid making erroneous requests we can add some client side validation to our fields. We can add these validation rules in our form submit handler.
With this change in place, registration will only be attempted if the username, email, and password fields are populated. This could be improved further by adding email format validation and so on.
Improving the password field
Our password field could be improved by giving some indication of password strength. For this I chose to use the React Password Strength Bar package. You can customise the scoreWords and shortScoreWord however you please to reflect password strength. For fun, I’m using a D&D theme 🙂
In the above snippet we provide the current password, and it will access the strength and display it to the user:
You can see the final form on GitHub here.
Our registration system is complete. The only other change I made (on the server side) was to disable new user emails:
remove_action( 'register_new_user', 'wp_send_new_user_notifications' );Code language: PHP (php)
You can see a working example of the registration form in my D&D app here, and the source code is also public on GitHub.
As I’ve said before, it’s very useful that WPGraphQL includes some of the account mutations out of the box. Whilst this is not unique to GraphQL (we could use the WP REST API if we wanted), I have found it very easy to work with from the client side.
- Headless WordPress: Cookie Based Login using GraphQL
- Headless WordPress: Log-out using GraphQL & ReactJS
- Headless WordPress: Password Reset with ReactJS & WPGraphQL
- Headless WordPress: User Registration with ReactJS & WPGraphQL