Hey guys!
First post on a new blog let's gooo!
Table of Contents:
Introduction
We’ve recently ventured out and started working with AWS. It is spectacular how it has made Authentication (Cognito), Generating GraphQL queries (AppSync) very easy with AWS Amplify. DynamoDB is also provided as an out of the box database solution, which pretty much makes it an all-round solution for modern development.
I’ve been working with Web Apps and decided to give AWS Amplify a go with React Native and wanted to share how well they go together.
So, to demonstrate that, we’ll be building a simple blog app in which you can browse published blogs, read them and create your own as well. We’ll be integrating authentication features, CRUD applications and fixing navigation in the app.
Prerequisites
Before we get started, it is very important for you to get your AWS Amplify configured following the steps listed in its official documentation here .
The GitHub link to this project is here . You can check out the complete project on this link or follow this guide to code along and reach the endgame the fun way.
Once the configuration is complete, you can choose whether to use Expo or React Native CLI to officially start your project. I’m going to use Expo because it will be easier for you to get started with and understand.
Initializing AWS Amplify
The first step would be to create an app to work with. Since I’ve already created an app, I’ll skip to the part where we initialize AWS Amplify.
amplify init
Next, all we need to do is select all the default settings that are thrown at us. Pick a name for your project, a name for the environment , the default editor and the type of app that we’re building. Then it will ask you the JavaScript Framework we’re using, whether you want to create a source directory path, a distribution directory path, the build command and the start command.
Here are my settings:
Next, it will ask you to answer a few more questions that are pretty straightforward but if you get confused, just select the default options they provide and you’ll be able to proceed without any hiccups.
Once complete, you should see the following message:
Adding API
Now we will run the following command to add the API:
amplify add api
This will present you with another set of questions that are pretty easy to answer. When selecting the authorization type, you can either select API Key or Amazon Cognito User Pool. I prefer the latter because it makes protected requests, which means that you can only make calls to POST if you’re logged in with your cognito username.
Here are my settings for this step:
Once you save the schema, run amplify push to Host the GraphQL API so that we can make requests to and from it. Once that is complete, select y when the console asks you to generate code for your GraphQL API, select the language target as javascript and keep following the default settings for the rest.
One thing to note here is that when you update your GraphQL schema, keep in mind that all your queries and mutations will be overwritten, so make sure you keep a backup or just fetch them from a custom source and not from the default source.
Now, AWS Amplify will set up all the necessary settings required for us to start integrating, which will take a few minutes to complete.
You might note a warning that says:
Authentication Setup
Since we’re using Cognito as our authentication, we will have to add @auth with @model so that when we make a request, the system knows that the request is coming from an authorized user. You can understand it better in this documentation.
For this particular app, we’re looking at a permission matrix that looks like this:
...and the @auth rules for the same are as follows:
@auth(rule: [{allow: owner, operations: [create, delete] }]}
So, we will copy the above code in the @model. We also need to explicitly specify the ownership of the current user so as to show the Edit button on a post when the owner of that post is logged in and hide it when a different user accesses it.
We’ll do that here:
type Post
@model
@auth(
rules: [
{
allow: owner
ownerField: "owner"
operations: [create, update, delete]
}
]
) {
id: ID!
title: String!
description: String
createdBy: String!
}
Use amplify push once again to push the changes.
You should look at the All resources are updated in the cloud message, which means the operation has completed successfully.
Now let’s navigate to src/graphql and see if all our queries and mutations are in place.
Great! Since we don’t have a Frontend yet, let’s fall back on AppSync and open the AppSync console.
You’ll notice that AppSync has already created an API named blogappdemo-dev which has the same schema as we wrote earlier.
You can test if this API does exactly what you intended it to do by going to Queries and creating some posts by sending requests. As an example, I’ll query a list of all posts and their titles, descriptions and id.
It is expected to return nothing because there are no posts but it throws an error that points to the fact that we are not the owner of the post that we’re trying to fetch, which makes sense since there are no owners registered. So, let’s register one.
Creating a demo user with AWS Cognito
The good thing is that we don’t need a frontend to do that. We just have to direct ourselves to the AWS Cognito console and click on Manage User Pool. We can create a temporary one here for the time being and then remove it when the authentication and user management feature is live in the app.
Just click on Users and Groups and then click on Create User.
This will present us with a new window where we will just add the necessary details and proceed. Remember to check the password rules under Policies and adhere to those before proceeding.
Now that the user is created, we can log back in AppSync using Cognito user pools and make the query, which will return all items, which in this case, is nothing. :)
Preface To Part 2
For now, we have created our GraphQL API and also had a taste of authentication, albeit from the admin console. We will be adding the complete authentication flow to the Frontend too, which will be the center of the second part.
See you then!
This experiment has been carried out by Sankhadeep Roy , Engineering Manager and AWS enthusiast GeekyAnts and documented by Digvijay Wanchoo , A. Manager, Marketing & Communications GeekyAnts
