Serverless — User Management
For our AppSync GraphQL service, we used Serverless Stack (SST) to provision an AWS Cognito user pool and secure the endpoint. Instead of using an API key, now a user must be registered and authenticated before using the services.
In this article, we are going to develop the user sign-up and sign-in components, and change the GraphQL client to use AWS Cognito for authentication.
This article is part of the Serverless for Beginners series.
The source code can be found in this repository.
User Interface Design
We use MUI and tailwindcss to develop the user interface. MUI has existing templates that we can reuse to produce the interface like the screenshot below.
App.tsx
In the frontend/src/App.tsx file add the code for the main layout.
The main layout has an application bar on the top and a side menu.
Side Menu
For the side menu, create the frontend/src/components/SideMenu.tsx component.
The side menu should look like the screenshot below.
When the side menu drawer is closed, only the icons are shown.
Login Screen
Create the frontend/src/containers/Login.tsx screen.
