AppSync with User Authorization

A small demo of how to get up and running with AWS AppSync and real world authorization

User Authentication Setup

This step will set up some basic 2 factor user authentication with the current project structure.

If you would like to set up your own user authentation mechanism this would also work, you would just need to update some logic in SignUp.js & SignIn.js.

1. Install Amplify CLI

npm i -g @aws-amplify/cli

2. Configure Amplify CLI

amplify configure

3. Create new AWS Amplify Project

amplify init

4. Add user signin to project

amplify add auth

5. Push updated configuration to the API

amplify push

AppSync Configuration

1. Create new AppSync App

Visit the AppSync console, click "Create API"

2. Change Authorization Type to "Amazon Cognito User Pool". Choose User Pool created in first series of steps. Set "Default action" as "Allow"

3. Create the following Schema:

type City {
  id: ID
  name: String!
  country: String
}

type Query {
  fetchCity(id: ID): City
}

4. Click "Create Resources"

5. Click "Data Sources" in the left menu, click on the table name under "Resource"

6. Create an index of "author"

7. Update "CreateCity" request mapping template to the following:

#set($attribs = $util.dynamodb.toMapValues($ctx.args.input))
#set($attribs.author = $util.dynamodb.toDynamoDB($ctx.identity.username))
{
  "version": "2017-02-28",
  "operation": "PutItem",
  "key": {
    "id": $util.dynamodb.toDynamoDBJson($ctx.args.input.id),
  },
  "attributeValues": $util.toJson($attribs),
  "condition": {
    "expression": "attribute_not_exists(#id)",
    "expressionNames": {
      "#id": "id",
    },
  },
}

8. Update the "ListCities" request mapping template to the following:

{
  "version": "2017-02-28",
  "operation": "Query",
  "query": {
  	"expression": "author = :author",
    "expressionValues": {
      ":author": { "S": "${ctx.identity.username}" }
    }
  },
  "index": "author-index",
  "limit": $util.defaultIfNull($ctx.args.first, 20),
  "nextToken": $util.toJson($util.defaultIfNullOrEmpty($ctx.args.after, null)),
}

9. Run project