User sign-up and sign-in

A couple of weeks back I visited the AWS Summit in Stockholm. This was my third year visiting, and I always enjoy it. It is great for meeting up with old colleagues and get some fresh perspectives. This year’s visit rekindled my interest in AWS’s serverless offering (Lambda, SQS, Eventbridge…), something I plan to work more with in the future.

In this post, I use AWS Cognito (also serverless) to implement user sign-up, and user sign-in for a simple React app. We will configure Cognito using AWS Cloud Development Kit (CDK). The end result will look as follows:

.

.

.

.

Overview

Before we start, let’s cover the tools we will be using.

Amazon Cognito is service that lets you add user sign-up and sign-in to your web and mobile applications. It scales automatically, and you don’t have to provision any resources explicitly. Perfect for serverless use cases. It is billed by number of active users, with a generous 50.000 free active monthly users.

To configure Cognito, I use AWS Cloud Development Kit (CDK). CDK is an Infrastructure as Code (IaC) tool, with a similar purpose as Terraform or AWS’s own CloudFormation. It was launched in 2019, and AWS seems to be putting a lot of focus on it. One example is last year’s AWS re:Invent where the AWS CTO Werner Vogels talks about it.

To build our web app, we use React + pre-made Amplify UI components for sign-up and sign-in. AWS Amplify is really a whole framework for building full stack apps, but the SDK and UI components can be used separately.

The infrastructure

Let’s start with out infrastructure.

.

How can we use the JWT?

.

.

. .

.

.

.

The frontend

.

.

.

.

Next, we set up our React app. I use Vite to bootstrap my app, but you can write it from scratch or use something like Create React App.

> yarn create vite

output

✔ Project name: > frontend
✔ Select a framework: › react
✔ Select a variant: › react-ts

Install the aws-amplify and its UI components:

yarn add aws-amplify @aws-amplify/ui-react

The source code is kept in ./src, and we can remove everything expect App.tsx and main.tsx.

src/main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

src/App.tsx

import {Authenticator, Button, Card, Heading, Text, View} from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

export default function App() {
    return (
        <>
            <Authenticator>
                {({signOut = (() => {}), user}) => {
                    return (
                        <View width="40rem" textAlign="center">
                            <Card variation="elevated">
                                <Heading level={1}>Welcome!</Heading>
                                <Text margin="2em">
                                    You are logged in as <b>{user?.attributes?.email}</b>
                                </Text>
                                <Button variation="primary" onClick={() => signOut()}>Log out now!</Button>
                            </Card>
                        </View>
                    )
                }}
            </Authenticator>
        </>
    );
}

How to extend this?

Frontend + Cogninto

Could connect something like this

API Gateway Cognito authorization + + Lambda

.

.

.

.

Summary

Created a

Infrastructure overview

.

How can we use the JWT?

.

.

.

.

Resources

• some