Fullstack with React-Native, AWS Serverless and Google Sign-In
A step-by-step guide to build a full-stack application using AWS Serverless and React-native.
Introduction
I have been working with AWS for quite some time now and have pretty fair idea about the various AWS services. However, being primarily focused on the front end side in the team, I never really had chance to explore in detail how those various services are set-up, configured or developed. My knowledge in regards to AWS services was limited to using or consuming of the services, using the SDKs, CLI or making requests to those services from front-end.
Another area of confusion I always had was with regards to AWS Cognito’s User Pools vs Identity pools. In a couple of freelancing projects, I initially planned to use AWS Cognito authentication but had to drop the idea just because I couldn’t get its concepts clear. I must have read the AWS docs multiple times (btw, AWS documentation sucks and it seems it is not just me who thinks so) and went through many blogs/posts but never got a clear understanding of whats the difference between the two kinds of pools and what exactly is the purpose of each.
Although web is full of blogs/tutorials that explain the various AWS services pretty well, in-detail, however I feel there is certainly lack of a step-by-step guide that would give precise, clear instructions of setting up the whole ball of wax with all elements integrated together from front-end, to backend, to API layer and authentication. (The most sensible, comprehensive and thorough guide I ever found that explains and clarifies all the confusing parts is this one from Serverless-stack.)
So, this last holiday season, I took an early new-year resolution to tame the beast and worked on a simple app using the stack of AWS cognito, serverless API, react-native and Google Sign-in.
In this series I would be sharing what I have learned in the process.
Overview
To understand all the parts, services and concepts involved, we would build a full-stack serverless application using AWS Serverless Lambda services for API layer with DynamoDB as database, React-Native for UI, Google Sign-in for user authentication and AWS Cognito Identity pool for user authorization.
We would be using javascript across the stack. We would use typescript for API and ES6 for react-native just to get a taste of both the flavors.
The series would provide a step-by-step guide for developing the frontend, the backend, user authentication and authorization.
🛠 Tools and Technologies
Below is a summary of tools, technologies and packages we would be using across the stack.
⛅️ Backend:
- AWS Serverless provider services ‒ provider of our serverless app
- Amazon DynamoDB ‒ as database to store application data.
- Serverless Toolkit Framework ‒ to help us easily configure, define, test and deploy the serverless app to AWS.
- Node JS and Typescript for coding the serverless lambda functions. You can very well choose to use just plain JS or ES6 instead of Typescript.
📱Frontend:
- React-Native ‒ to build mobile UI of our app using javascript for both iOS and Android platforms with a single code-base.
- Nativebase ‒ UI component library for react-native
- Redux and Redux-Thunk ‒ for maintaining and managing app state
- React-Navigation ‒ for routing and navigation between screens of our app.
- react-native-google-signin ‒ a npm package to implement Google Sign-in for our react-native application.
- AWS Amplify SDK ‒ AWS provides
AmplifySDK to allow developers to work with AWS resources like Cognito, APIs, S3 etc with support for react-native.
🔐 User Authentication and Authorization
- Google Sign-in service for iOS and Android Google Sign-In authentication (login) system enables our app users to sign in with their Google Account.
- AWS Cognito Identity Pool ‒ AWS Cognito Identity Pools can be configured to authorize our app users that have been authenticated with some federated authentication providers like Google to allow access to AWS resources like the Serverless lambda API that we would build for this app.
⚠️ Disclaimer
The series has been written assuming that the reader has basic knowledge of some of the tools and technologies we are using. The purpose is provide a detailed, step-by-step instructions on how to develop and integrate all the involved tools and technologies together, how to put the pieces together to build an app across the stack from backend to frontend. A full, in-depth explanation of how these tools/packages and technologies work under the hood is beyond the scope of this series.
Also, to keep the things simple and focused around the core development and coding of features we intend to learn as part of this series, we won’t get into things like unit testing, environment configurations and deployment of the app.
I would assume that you have the basic idea of AWS services clear, if you are new to AWS services or need help understanding those, I recommend the serverless-stack guide to get the concepts clear.
so without further due, let’s kickstart our project 🏂
