Skip to main content

Getting Started Resource Center

Build a Basic Web Application

Link a Serverless Function to a Web App

Introduction

Overview

In this task, you will update the Amplify Auth resources to use the Lambda function you created in the previous module as an Amazon Cognito post confirmation invocation. When the user completes the sign up, the function will use the GraphQL API and capture the user’s email into the DynamoDB table. 

Key concepts

Lambda invocation: The type of event that will make a Lambda (serverless) function run. This can be another AWS service or an external input.

Implementation

10 minutes

AWS Amplify

Troubleshooting Amplify

Learn about Auth

Set up Amplify Auth

By default, your auth resource is configured allowing the user to sign up using email, but you need to update the resource to invoke the previously created postConfirmation function.

1. Update the resource file

On your local machine, navigate to the amplify/auth/resource.ts file and update it with the following code. Then, save the file.

import { defineAuth } from '@aws-amplify/backend';
import { postConfirmation } from './post-confirmation/resource';
export const auth = defineAuth({
  loginWith: {
    email: true,
  },
  triggers: {
    postConfirmation
  }
});
Missing alt text value

2. Start the sandbox, if necessary

The sandbox will automatically get updated and redeployed once the file is updated. If the sandbox is not running, you can run the following command in a new terminal window to start it.

npx ampx sandbox

3. View the confirmation message

Once the cloud sandbox has been fully deployed, your terminal will display a confirmation message.

Screenshot of a Mac terminal showing AWS Amplify profiles app configuration, CloudFormation stack ARN output, and sandbox deployment status. The console displays environment variables and completion messages for deploying an Amplify app using Node.js and AWS services.

4. View the file

The amplify_outputs.json file will be generated/updated and added to your profilesapp project.

Screenshot of a file explorer showing the folder structure of a React project named 'profilesapp' with the file 'amplify_outputs.json' highlighted. This file is located in the root directory and is used for AWS Amplify configuration outputs.

Conclusion

You used Amplify to configure auth and configured the Lambda function to be invoked when the user signs in to the app.

Add Interactivity to Web App

Start Task Five