In this section we are going to allow our users to login and sign up for our app. To do this we are going to start connecting the AWS resources that we created in the backend section.

To do this we’ll be using a library called AWS Amplify. AWS Amplify provides a few simple modules (Auth, API, and Storage) to help us easily connect to our backend.

Install AWS Amplify

Change indicator Run the following command in the packages/frontend/ directory.

$ pnpm add --save aws-amplify

This installs the NPM package and adds the dependency to the package.json of your React app..

Create a Config

Now, let’s create a configuration file in frontend for our app that’ll reference all the resources we have created.

Change indicator Create a file at frontend/src/config.ts and add the following.

const config = {
  // Backend config
  s3: {
    REGION: import.meta.env.VITE_REGION,
    BUCKET: import.meta.env.VITE_BUCKET,
  },
  apiGateway: {
    REGION: import.meta.env.VITE_REGION,
    URL: import.meta.env.VITE_API_URL,
  },
  cognito: {
    REGION: import.meta.env.VITE_REGION,
    USER_POOL_ID: import.meta.env.VITE_USER_POOL_ID,
    APP_CLIENT_ID: import.meta.env.VITE_USER_POOL_CLIENT_ID,
    IDENTITY_POOL_ID: import.meta.env.VITE_IDENTITY_POOL_ID,
  },
};

export default config;

Here we are loading the environment that are set from our serverless backend. We did this back when we were first setting up our React app.

Add AWS Amplify

Next we’ll set up AWS Amplify.

Change indicator To initialize AWS Amplify; add the following above the ReactDOM.createRoot line in src/main.tsx.

Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: config.cognito.REGION,
    userPoolId: config.cognito.USER_POOL_ID,
    identityPoolId: config.cognito.IDENTITY_POOL_ID,
    userPoolWebClientId: config.cognito.APP_CLIENT_ID,
  },
  Storage: {
    region: config.s3.REGION,
    bucket: config.s3.BUCKET,
    identityPoolId: config.cognito.IDENTITY_POOL_ID,
  },
  API: {
    endpoints: [
      {
        name: "notes",
        endpoint: config.apiGateway.URL,
        region: config.apiGateway.REGION,
      },
    ],
  },
});

Change indicator Import it by adding the following to the header of your src/main.tsx.

import { Amplify } from "aws-amplify";

Change indicator And import the config we created above in the header of your src/main.tsx.

import config from "./config.ts";

Amplify has a 2 year old bug that needs a workaround to use it with your frontend.

Change indicator Add the following at the end of your <head> tags in frontend/index.html.

<script>
  window.global = window;
  var exports = {};
</script>

A couple of notes here.

  • Amplify refers to Cognito as Auth, S3 as Storage, and API Gateway as API.

  • The mandatorySignIn flag for Auth is set to true because we want our users to be signed in before they can interact with our app.

  • The name: "notes" is basically telling Amplify that we want to name our API. Amplify allows you to add multiple APIs that your app is going to work with. In our case our entire backend is just one single API.

  • The Amplify.configure() is just setting the various AWS resources that we want to interact with. It isn’t doing anything else special here beside configuration. So while this might look intimidating, just remember this is only setting things up.

Commit the Changes

Change indicator Let’s commit our code so far and push it to GitHub.

$ git add .
$ git commit -m "Setting up our React app"
$ git push

Next up, we are going to work on creating our login and sign up forms.