Deploy a GraphQL API with Authentication and Authorization with AWS Amplify & AWS AppSync

Instructor: [0:01] We'll start by creating a new React application by using the create-react-app CLI. Next, we'll change into the new directory and install aws-amplify and aws-amplify-react.

[0:20] Now we'll initialize a new Amplify project by running amplify init. We'll give a project name and environment name, choose our default editor, and then choose the defaults for the rest of the questions.

[0:38] Next, we'll choose our AWS profile. If you've yet to set up an AWS profile, you can run amplify configure to set up your profile. Our React application should now have a new folder called amplify and a new file called aws-exports located in the src directory.

[0:59] Next, we'll add authentication by running amplify add auth. When prompted, we'll choose the default security configuration, the username as the sign in type, and the email as the attribute that we're going to capture when the user signs up.

[1:17] Next, we'll add the GraphQL API by running amplify add api. For the type of API, choose GraphQL. Next, give the API a name. For the authorization type, we'll choose Amazon Cognito user pool to use the Cognito service that we set up in the last step. Since we do not yet have an annotated GraphQL schema, we'll choose no.

[1:41] Next, we'll choose yes to guided schema creation and choose the single object with fields as the type of project that we'd like to work with. When prompted if we'd like to edit the schema, we'll choose yes. We'll first create a type of post in our schema and give it an ID, a name, and a content property.

[2:09] Next, we'll add the authentication to the type by adding the @auth directive, passing in a rules property. In the rules array, we'll pass in a single object with an allow property set to owner and a queries property set to null. This will allow only the owner to update and delete a post, but for anyone to query for posts.

[2:32] Next, we'll create another type of note. For the auth rules, we'll set allow owner as the only rule. This will allow only the owner to not only update and delete, but also query for notes. For the note type, we'll give an ID field, a title field, and a content field.

[3:00] Next, we'll go back to the CLI and run amplify push. Here, we'll be prompted if we'd like to generate the GraphQL operation definitions locally. If you would like to, choose yes and follow the steps.

[3:20] Next, we'll open the project in our text editor. To configure the project to work with Amplify, we'll open source/index.js. In this file, we'll import amplify from AWS Amplify, the config file that was generated for us by the CLI, and then call amplify.configure, passing in the config.

[3:47] Next, we'll open app.js and we'll first import the withAuthenticator high order component from aws-amplify-react.

[3:58] Next, we'll change the default export to be the withAuthenticator high order component, passing in the app as the first argument and an object with includeGreetings set to true as the second argument.

[4:10] The withAuthenticator will add authentication to the app, and includeGreetings will add a sign-out button.

[4:16] Next, we'll run the app by running npm start. When the app loads, we should see an authentication flow protecting the app. Next, we'll go ahead and create a new account and then sign in.

[4:41] Now that we've created a user, we can go to the AppSync console to test everything out. To do so, open the terminal and run amplify console api. Next, choose login with user pools and use the username and password that you just used when you created the user. For the client ID, open aws-exports.js and copy the AWS user pools web client ID.

[5:26] Once we're logged in, we'll create a couple of posts. We'll then also create a couple of notes. Now we'll create a query to list the notes. Finally, we'll create a query to list the posts.

[6:26] Logged in as ourselves, you'll notice that we're able to currently query for all posts and all notes that have been created thus far. Now let's sign out and created another new user. From the AppSync console, we'll now log out as the first user and log in as the second user.

[7:14] You'll notice that we're currently able to list all posts, but if we try to list all notes, nothing comes back, because these items are only available to the user who created them. Finally, we'll create a note and then query for the notes and see that the query only works for the notes that we created.