Creating the Login Widget

Creating a simple user interface

By: King

Hello, in this series, I’ll show you how to set up a login system using Amazon Cognito, Amazon Lambda Functions, Amazon API Gateway and a plugin called HTTP Requests for Blueprints.

First, we’ll create a simple user interface in Unreal Engine to sign up for an account and to sign in. Then we’ll create a Cognito User pool to house all our user’s accounts and create lambda functions to handle the logic of adding new users, signing in, and confirming the account. Lastly, we’ll create our own API using the API Gateway to execute our functions through HTTP requests in Unreal Engine using the HTTP Requests for Blueprints.

The goal is to show you how to create a simple login UI with some AWS services for a login system then you should be able to figure out on your own to add the Reset and Forgot password features.

Installing the HTTP Request for Blueprints Plugin

To begin, go to the Unreal Engine Marketplace. Search for HTTP Requests for Blueprints and install it.

If you used the Unreal Engine source code from Github to create your project, a link is posted in the video description on how to install this plugin for your project.

Creating the Login UI

Once you installed the plugin, we’ll need a UI that can allow people to create an account and sign in with it.

Open your Unreal Engine project. Then on your browser, go to codeible.com/coursefiles/awscognitowithunreal and download the assets for the login section.

Locate the downloaded files and unzip the folder. Bring all the assets into the project.

Create a Widget Blueprint and call it LoginMenu.

Double click on it to open it. Then make sure you are on the “Designer” tab.

Search for “Widget Switcher” in the palette and drag it into the design area.

We’ll use the Widget Switcher to toggle between our Sign In and Sign Up screens.

Call it MenuSwitcher.

For the Sign In screen, search for “Canvas” in the palette and place it inside the switcher. Call it SignInWidget.

Then search for Image in the palette and drag it inside the canvas.

Change the Anchors of the image to the one with the 4 corners and make sure that the left and top offsets are 0s and the right and bottom offsets are 1s.

This will expand our image to match the canvas.

Now change the Anchor again to the one in the center.

Now set the image to SignInTemplate.

Drag in 2 buttons and set both of their anchors to the center.

Then reposition them to match the placeholders in the image.

Call the button on the top “SignInButton.”

Call the bottom one,” SwitchToSignUpWidgetButton.”

When we click on the Sign In button, we want to sign in and go to the next screen. When we click on the Switch to Sign Up widget button, we want to change the display and display the sign up page.

Add a text inside the buttons and label them Sign In and Sign Up.

Change the styles of the button on the top. Use the button_1_idle image in the normal state and button_1_active in the hovered and pressed states.

For the button on the bottom, use button_2_idle for the normal state. And button_2_active for the hovered and pressed states.

To complete the Sign In page, search for Editable Text and add 2 of them to the canvas.

Reposition them to match the placeholders for the inputs. Make sure to anchor them to the center, change the font size to 38, and text color to black.

Name the Input on the top SignInEmail and the bottom one SignInPassword.

For the Sign Up widget, we’ll do the same by adding another canvas to the Widget Switcher and naming it SignUpWidget.

Then repeat the steps from earlier to add the components.

Once all the components are added, call the input in the top, SignUpEmail and the one at the bottom SignUpPassword.

For the button on the top, call it SignUpButton and the bottom button “SwitchToSignInWidgetButton.”

Adding logic to toggle between widgets

Now switch to the Graph mode and grab a reference to the SwitchToSignUpWidgetButton and the SwitchToSignInWidgetButton.

If you do not see them on the left, make sure all buttons and input fields have the Is Variable field checked.

Attach a click event to both.

When we click on the SwitchToSignUpWidgetButton, we want to switch to the SignUp widget. To do that, first get the reference to the MenuSwitcher.

If it is not in the list, go back to the designer tab and make sure that the Is Variable field is checked for the MenuSwitcher.

Call Set Active Widget Index. For the index, we’ll use 1.

If we take a look at the MenuSwitcher, the SignInWidget is index 0 and the SignUpWidget is index 1

Now for the SwitchToSignInWidgetButton, call Set Active Widget Index and set the index to 0.

Testing to UI

To test this, compile and save the progress.

Create a new level call LoginLevel. Then open the level blueprint.

After the Event Begin Play node, call Create Widget and select the LoginMenu. Then use the Add to Viewport node to add it to the screen.

Next, call Get Player Controller and then use Set Show Mouse Cursor to display the mouse cursor when we start the level.

If we run the app, we should see the menu. When we click on the Sign Up button, it should switch to the Sign Up page. And if we click on the Sign In button, it’ll go back to the Sign In page.

Adding the Confirmation Widget

If you got this far, you are almost done.

We need to add one more page to the MenuSwitcher. Whenever an account is created with Cognito, the account needs to be verified with a confirmation code so we’ll need to add the page to display the confirmation code screen.

Add another canvas to the MenuSwitcher with an image inside it by repeating what we did for the other 2 pages. Use the ConfirmationTemplate for the image source. Then add the components to the placeholders.

Call the input, ConfirmCode. For the button on the top, name it ConfirmButton, for the button in the middle, name it ResendButton, and for the button at the bottom, name it CancelButton.

Lastly, name the widget ConfirmWidget and make sure the input and buttons have the Is Variable field checked.

That’s all for this video. In the next video, we’ll start creating the Cognito User pool and lambda function to create user accounts.

Policy

Follow @codeible

Video Tutorials

Policy

Video Tutorials

Policy