Adding Authentication


In this section, you are going to add Authentication and allow users the “star” events they like.


In the admin UI console, click on Authentication in the left hand side menu. Click on Remove Email login. click on Add login mechanism, and select Username. In 2. Configure sign up, click on Add attribute, select Email. Expand Password protection settings, take a look at the defaults, and make changes if needed. Click save and deploy.

Admin UI deploys an Amazon Cognito User Pools resource that your app will use to authenticate users.

admin ui auth

Once the deployment is complete, head to your Cloud9 terminal and run amplify pull to pull in the least could changes.

amplify pull

You should see

Post-pull status:

Current Environment: staging

| Category | Resource name       | Operation | Provider plugin   |
| -------- | ------------------- | --------- | ----------------- |
| Api      | graphqlrealtimerace | No Change | awscloudformation |
| Auth     | graphqlrealtimerace | No Change | awscloudformation |

Your src/aws-exports.js file is now updated with your cognito user pool configuration. Now, update src/App.tsx to use the new configuration file and require users to sign up. You will use a Amplify UI component, specifically the withAuthenticator component that lets you quickly get started with a default authentication screen.

Change src/App.tsx

[ 🌟 ] src/App.tsx

Refresh your app and you will be greeted with the screen below.

sign in

To create a new user, visit the User management page in the Admin UI.

admin ui create new user

Then, log into the app using your new user!

Starring Events

Now that you’ve created a user and can log in the app, you can make personalizations for individual users. You’ll create a new model that allows users to star events they like and want to track.

In the Data panel of the Admin UI, create a new model called StarredEvent.

starred event

The model has a 1:1 relationship with Events. This means that one StarredEvent points to one Event.


Each starred event is owned by a user, reflected in the owner field. Change the Authorization mode of your app and set an authorization rule for the StarredEvent as shown below:

star rules

Then set a new rule for the Event:

star rules

Finally, click Save and deploy

Back in cloud9, pull your latest updates.

amplify pull

Change your src/page/Events.tsx page to introduce stars!

[ 🌟 ] src/pages/Events.tsx

Each user can now   ⭐️   the events they like!