Skip to main content

Getting Started Resource Center

Build a Serverless Web Application using Generative AI

Task 2: Manage Users

In this task, you will configure Amplify Auth and you will enable Amazon Bedrock foundation model access

Introduction

Overview

Now that you have a React web app, you will configure an authentication resource for the app using AWS Amplify Auth, powered by Amazon Cognito. Cognito is a powerful user directory service that manages user registration, authentication, account recovery, and more.

You will use the AWS Management Console to enable access to Amazon Bedrock and Claude 3 Sonnet foundation model, which the app will use to generate recipes.

What you will accomplish

In this tutorial, you will:

  • Set up Amplify Authentication

  • Set up access to Claude 3 Sonnet from Anthropic

Implementation

15 minutes

A text editor. Here are a few free ones:

Set up Amplify Auth

The app uses email as the default login mechanism. When the users sign up, they receive a verification email. In this step, you will customize the verification email that is sent to users.

1. Modify the resource file

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

Screenshot showing the file structure of the ai-recipe-generator project, highlighting the resource.ts file inside the auth folder. This is part of a tutorial for building a serverless web app with generative AI, specifically demonstrating where to modify the resource file.

Resource.ts code

Update your resource.ts file with this code

typescript 
import { defineAuth } from "@aws-amplify/backend";

export const auth = defineAuth({
  loginWith: {
    email: {
      verificationEmailStyle: "CODE",
      verificationEmailSubject: "Welcome to the AI-Powered Recipe Generator!",
      verificationEmailBody: (createCode) =>
        `Use this code to confirm your account: ${createCode()}`,
    },
  },
});

2. View the customized email

The image on the right is an example of the customized verification email:

Screenshot of a confirmation email with the subject 'Welcome to the AI-Powered Recipe Generator,' showing a verification code for account confirmation in a serverless web app Gen AI tutorial.

Set up Amazon Bedrock Model Access

Amazon Bedrock enables users to request access to a variety of Generative AI models. In this tutorial, you will need access to Claude 3 Sonnet from Anthropic.

1. Open the Bedrock console

Sign in to the AWS Management console in a new browser window, and open the AWS Amazon Bedrock console at  https://console.aws.amazon.com/bedrock/.

Verify that you are in the N. Virginia us-east-1 region, and choose Get started.

Screenshot of the Amazon Bedrock console showing the welcome screen to build and scale generative AI applications with foundation models (FMs), featuring a 'Get started' button as part of a serverless web app tutorial (Module 2).

2. Select the Claude model

In the Foundation models section, choose the Claude model.

Screenshot of the Amazon Bedrock overview interface showing supported foundation models, including AI21 Labs Jamba-Instruct, Amazon Titan, Anthropic Claude, Cohere Command, Meta Llama 3, Mistral AI Mistral, and Stability AI Stable Diffusion.

3. Request access to Claude 3 Sonnet

Scroll down to the Claude models section, and choose the Claude 3 Sonnet tab, and select Request model access.

Note: If you already have access to some models, then the button will display Manage model access.

Screenshot of the Claude models selection interface for Anthropic's Haiku, Sonnet, and Opus models, displaying options such as Claude 3 Opus, Claude 3 Sonnet, Claude 3 Haiku, and Claude 2.1. The image highlights the 'Request model access' button and shows a notification stating that the account does not currently have access to this model.

4. Request model access

In the Base models section, for Claude 3 Sonnet, choose Available to request, and select Request model access.

Screenshot showing the 'Base models' selection panel from the AWS Management Console, displaying options for base model providers (AI21 Labs, Amazon, Anthropic) and access status. The panel highlights model access options such as 'Unavailable' and 'Available to request' with an example for Claude 3 Sonnet, as seen in a tutorial for building serverless web apps with generative AI.

5. Choose Next

On the Edit model access page, choose Next.

Screenshot of the 'Edit model access' screen in an AWS GenAI tutorial, showing options to select and request access to different foundational models such as Claude 3 Sonnet. The Claude 3 Sonnet model is selected and the Next button is highlighted.

6. Submit request

On the Review and Submit page, choose Submit.

Screenshot of the 'Edit model access' screen in an AWS GenAI tutorial, showing options to select and request access to different foundational models such as Claude 3 Sonnet. The Claude 3 Sonnet model is selected and the Next button is highlighted.

Conclusion

You have configured Amplify for authentication and customized the verification email, and enabled access to Amazon Bedrock and Claude 3 Sonnet.

Build a Serverless Backend

Start Task Three