Creating a Username & Password Verification UI in Unity 2021 URP
In this article we’ll be creating a user interface with some dummy logic for creating and verifying a user account.
This example project is focused on the UI aspects, not the substantial undertaking that is account protection and verification.
Do not use this for a production project!
We will not be storing this data persistently.
If that interests you, please see my previous article linked above.
Initial Scene Setup
There’s a bit to unpack here, so hang on before you jump in.
As usual we start with a Canvas and a background Image.
After that, create an Empty element and name it “Login”.
This will be a container for most of the elements in our login window.
It will also be duplicated and slightly modified to serve the needs for account creation.
Add two Input Field child elements and name them Username and Password.
Set the Password element’s “Content Type” field as “Password”.
Add two Text elements whose labels read “Username” and “Password”.
Add a Button for submitting login information and name it appropriately.
Now, position the elements in the scene to look similar to the above.
When you are happy with everything, duplicate the “Login” empty parent element and rename it as “CreateAccount”.
Rename the Button as “btnCreateAccount”.
Disable the “CreateAccount” parent element.
We’ll only show these elements when the user is creating their account.
And lastly, add a Text element as a child of Background for responding to the user’s input.
The UserLogin Class/Script
There are a few things going on here, but it all boils down to showing the right elements at the right time and then verifying any input.
We’ll need to assign many UI elements to our script component to make it functional.
Last, we need to set the Unity Event to the correct method of our script for each Button element.
Running the game should give you an experience as shown above.
One last thing I’ve missed would be to hide the Create Account button when in the creation screen.
See you in the next article!
