Task 2: Manage Users - Build a Serverless Web Application using Generative AI
OverviewWhat you will accomplishImplementationConclusion

Task 2: Manage Users

Time to complete

15 minutes

Requires

A text editor. Here are a few free ones:

Get help

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

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. 

    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()}`,
    },
  },
});
    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.

  2. View the customized email

    The following image is an example of the customized verification email.

    A customized verification email

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.

    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.

    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.

    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.

    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.

    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.

    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.