Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dabit3/appsync-react-native-with-user-authorization
End to end React Native + AWS AppSync GraphQL application with queries, mutations, subscriptions, & user authentication & authorization
https://github.com/dabit3/appsync-react-native-with-user-authorization
Last synced: about 2 months ago
JSON representation
End to end React Native + AWS AppSync GraphQL application with queries, mutations, subscriptions, & user authentication & authorization
- Host: GitHub
- URL: https://github.com/dabit3/appsync-react-native-with-user-authorization
- Owner: dabit3
- Created: 2018-04-02T20:57:03.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-21T00:13:21.000Z (about 6 years ago)
- Last Synced: 2024-11-02T19:34:17.055Z (2 months ago)
- Language: JavaScript
- Size: 162 KB
- Stars: 48
- Watchers: 3
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-aws-appsync - React Native example with user authentication & authorization
- awesome-aws-amplify - appsync-react-native-with-user-authorization
README
# 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
```bash
npm i -g @aws-amplify/cli
```
2. Configure Amplify CLI
```bash
amplify configure
```
3. Create new AWS Amplify Project
```bash
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](https://console.aws.amazon.com/appsync/home) 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:
```graphql
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:
```js
#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:
```js
{
"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