Using AWS as a Back End: Authentication & API

Amazon Web Services (AWS) is a cloud computing platform. To support cloud computing, Amazon owns and operates data centers around the globe. It offers various infrastructure and software products “as a service”. For example, you can use Amazon EC2 to reserve virtual servers within Amazon’s data centers. Or you can use Amazon SageMaker to build and deploy machine learning models quickly and easily. AWS offers nearly 200 separate services, so whatever you need for your next project, you’re likely to find it!

As you work through the tutorial, you’ll learn how to use AWS Amplify to add authentication and database storage to a chat app called Isolation Nation.

This is an advanced-level tutorial. Before starting it, you should have a good understanding of Swift and SwiftUI. You should also have some understanding of both GraphQL and CocoaPods. If you need to brush up on any of these first, try the following tutorials:

• Swift & SwiftUI
• GraphQL
• CocoaPods

Now it’s time to get cracking!

Getting Started

Isolation Nation is an app for people who are self-isolating due to COVID-19. It lets them request help from others in their local community. Isolation Nation works by asking the user for their postcode (the UK equivalent of a zip code) and adding it to a thread for their postcode area. For example, the full postcode for Buckingham Palace is SW1A 1AA. The postcode area is SW1A, and it represents the area shown here.

Users whose postcode is within the same area are added to a single thread. They can then send messages and replies to others in the same area.

Download the starter project by clicking the Download Materials button at the top or bottom of the tutorial. Open the workspace (not the project) for the IsolationNation starter project in Xcode.

Introduction to the App

Build and run the project. The app displays a list with a single-thread item, SW1A. Tap the item. The app will navigate to the message list for that location.

Tap any of the messages to see the list of replies for each message.

The app contains four main screens: Home, Threads, Messages and Replies. In Xcode, you can see a group for each screen in the Project navigator. You can also see a view model for each screen. These are outside their groups, so they’re easier to find.

Take a look around the project:

• AppDelegate sets a logged-in user.
• SceneDelegate sets RootView as the root view of the SwiftUI view hierarchy.
• RootView checks for the existence of a signed-in user and, if one exists, loads HomeScreen.
• HomeScreen loads ThreadsScreen.

The Threads, Messages and Replies screens all have a similar structure. Each one uses its view model as an ObservedObject to populate its view.

Open ThreadsScreenViewModel.swift. The view model contains a property, threadListState, which publishes an array of ThreadModel objects wrapped in a Loading enum. After the initializers, perform(action:) defines an API. This API allows a view to send a request to the view model to perform an action. The handlers for those actions follow.

On first inspection, the app may look like it’s already working. But notice how fetchThreads() simply returns a hard-coded list. The aim of this tutorial is to build a fully functional back end and remove all the hard-coded data. :]

First, you need to sign up for an AWS account and install some software onto your computer.

Setting Up Your Environment

Open a browser and head over to the AWS Homepage.

If you already have an AWS account, sign in. Otherwise, click Create an AWS account in the top right corner, and sign up for the free tier. Once AWS creates your account, sign in as the Root user with the credentials you just created.

Now it’s time to install the software prerequisites. Open Terminal.

First, make sure you have Git installed. It’s pre-installed on every modern macOS, so it should be. In your terminal, type the following:

git --version 

Make sure your version of Git is 2.14.1 or later. If not, you can install it here.

Next, check if you have Node v10 or later installed by running the following command in your terminal:

node --version

If you don’t have it installed, you can install it here.

And, finally, if you don’t have it already, install CocoaPods by running this command in your terminal:

sudo gem install cocoapods

Next, you’ll install and configure Amplify.

AWS Amplify

Amplify consists of three separate, but related, products:

• First, there’s a Command Line Interface (CLI) for programmatically creating and reserving AWS resources on behalf of your project. AWS is powerful, but also complex. Amplify makes it easy!
• Second, Amplify provides libraries for several popular programming environments, including iOS. These libraries provide simplified APIs for common app development use cases.
• Finally, Amplify provides a limited set of UI components for quickly building out common user flows such as authentication. These components are currently not available for iOS.

Installing and Configuring Amplify

To get started with Amplify, install the CLI by typing the following into your terminal:

npm install -g @aws-amplify/cli amplify-app

The -g flag means the CLI will install globally on your computer, rather than just for a single project.

Once you’ve installed the CLI, you must configure it so that it links to your AWS Account. Run the following in your terminal:

amplify configure

The terminal screen will ask you to log in to your AWS account, and a new browser tab will open. As requested by the CLI, press Enter to continue. Press Enter to select the default AWS region and type a username for your Amplify IAM user:

Another browser tab will open automatically. Click Next: Permissions ▸ Next: Tags ▸ Next: Review ▸ Create user.

Click Close.

Back in the terminal, follow the instructions to add your access key ID and secret access key.

Finally, create a profile name:

Congratulations! Amplify is now set up on your computer. Next, you’ll add it to your app.