Sign Up UI Implementation

Implementing the Sign Up logic using the HTTP Requests for Blueprints plugin, API Gateway, and Lambda.

By: King

Hello, in this video, we’ll continue building the Login System using Amazon Cognito, API Gateway, Lambda Function, and the HTTP Requests for Blueprints plugin.

In the last video, we created the API using API Gateway. Now we’ll use the API for the login menu.

Adding to the UI

1. Open the unreal engine project.

2. Go into login menu widget and switch to the Designer mode.

3. Make sure that all the components in the ConfirmWidget are anchored to the center since it was missing from earlier.

4. Now change the style of the Confirm button to use button_1_idle in the normal state. Then use button1_active for the hovered and pressed states.

5. Do the same for the Resend button.

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

7. In the SignUpWidget, for the SignUp button, use button_1_idle the in the normal state. For the hovered and pressed states, use button_1_active.

8. For the Sign In button use button_2_idle for the normal state and use button_2_active for the hovered and pressed state.

Create Account Logic

Grab a reference to the SignUp Button and place it under the Sign Up Widget section.

Then attach a click event to it.

Step 2:

When we click on the SignUp button, we want to create an account.

Call the Make a HTTP Request node.

Then select POST in the method dropdown since that’s the method type we defined in API Gateway for creating accounts.

Step 3:

Get the invoke URL from API Gateway and paste it in the URL pin.

If we take a look at all the resources we defined. We want to use the signup one since that’s the one we created to execute the CreateAccount lambda.

So at the end of the URL, we want to put forward slash, signup.

Step 4:

Use an empty map for the Params and set the Content-Type to application/json for the Headers. This will tell the request that we’re sending a json object.

Step 5:

Create a JSON object with the username and password via the inputs.

Step 6:

Add the callback.

1. Click and hold on it.

2. Then drag on an empty spot.

3. Select Add Event

4. Select Add Custom Event.

Policy

Follow @codeible

Video Tutorials

Policy

Video Tutorials

Policy