Build a Basic Web Application

TUTORIAL

Introduction
Create Web App
Build Serverless Function
Create Data Table
Link Serverless Function to Web App
Click here
Add interactivity to Web App
Click here
Clean up Resources

Task 5: Add Interactivity to Your Web App

In this task, you will create an app frontend and connect it to the cloud backend you have already built.

Overview

In this task, you will update the website you created in task one to use the Amplify UI component library to scaffold out an entire user authentication flow, allowing users to sign up, sign in, and reset their password and invoke the GraphQL API we created in module three. This will add the ability to display the user’s email that was captured using a serverless function. 

Key concepts

Amplify libraries: The Amplify libraries allow you to interact with AWS services from a web or mobile application.

Implementation

 Minimum time to complete

5 minutes

 Services used

AWS Amplify

 Get help

Troubleshooting Amplify

Troubleshooting common issues using Amplify UI

  • You will need two Amplify libraries for your project. The main aws-amplify library contains all of the client-side APIs for connecting your app's frontend to your backend, and the @aws-amplify/ui-react library contains framework-specific UI components.

    1. In a new terminal window, in your projects root folder (profilesapp), run the following command to install the libraries.

    npm install aws-amplify @aws-amplify/ui-react

  • 1. On your local machine, navigate to the profilesapp/src/index.css file and update it with the following code. Then, save the file.

    :root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.87);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;

}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

.box:nth-child(3n + 1) {
  grid-column: 1;
}
.box:nth-child(3n + 2) {
  grid-column: 2;
}
.box:nth-child(3n + 3) {
  grid-column: 3;
}

  • 1. On your local machine, navigate to the profilesapp/src/main.jsx file and update it with the following code. Then, save the file.

    • The code will use the Amplify Authenticator component to scaffold out an entire user authentication flow allowing users to sign up, sign in, reset their password, and confirm sign-in for multifactor authentication (MFA).
    import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { Authenticator } from "@aws-amplify/ui-react";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Authenticator>
      <App />
    </Authenticator>
  </React.StrictMode>
);

    2. Open the profilesapp/src/App.jsx file, and update it with the following code. Then, save the file.

    • The code starts by configuring the Amplify library with the client configuration file (amplify_outputs.json). It then generates a data client using the generateClient() function. The app will use the data client to get the user’s profile data. 
    import { useState, useEffect } from "react";
import {
  Button,
  Heading,
  Flex,
  View,
  Grid,
  Divider,
} from "@aws-amplify/ui-react";
import { useAuthenticator } from "@aws-amplify/ui-react";
import { Amplify } from "aws-amplify";
import "@aws-amplify/ui-react/styles.css";
import { generateClient } from "aws-amplify/data";
import outputs from "../amplify_outputs.json";
/**
 * @type {import('aws-amplify/data').Client<import('../amplify/data/resource').Schema>}
 */

Amplify.configure(outputs);
const client = generateClient({
  authMode: "userPool",
});

export default function App() {
  const [userprofiles, setUserProfiles] = useState([]);
  const { signOut } = useAuthenticator((context) => [context.user]);

  useEffect(() => {
    fetchUserProfile();
  }, []);

  async function fetchUserProfile() {
    const { data: profiles } = await client.models.UserProfile.list();
    setUserProfiles(profiles);
  }

  return (
    <Flex
      className="App"
      justifyContent="center"
      alignItems="center"
      direction="column"
      width="70%"
      margin="0 auto"
    >
      <Heading level={1}>My Profile</Heading>

      <Divider />

      <Grid
        margin="3rem 0"
        autoFlow="column"
        justifyContent="center"
        gap="2rem"
        alignContent="center"
      >
        {userprofiles.map((userprofile) => (
          <Flex
            key={userprofile.id || userprofile.email}
            direction="column"
            justifyContent="center"
            alignItems="center"
            gap="2rem"
            border="1px solid #ccc"
            padding="2rem"
            borderRadius="5%"
            className="box"
          >
            <View>
              <Heading level="3">{userprofile.email}</Heading>
            </View>
          </Flex>
        ))}
      </Grid>
      <Button onClick={signOut}>Sign Out</Button>
    </Flex>
  );
}

    3. Open a new terminal window, navigate to your projects root directory (profilesapp), and run the following command to launch the app:  

    npm run dev

    4. Select the Local host link to open the Vite + React application.

    5. Choose the Create Account tab, and use the authentication flow to create a new user by entering your email address and a password. Then, choose Create Account.

    6. You will get a verification code sent to your email. Enter the verification code to log in to the app. When signed in, the app will display your email address.

    7.  In the open terminal window, run the following command to push the changes to GitHub: 

    git add .
git commit -m 'displaying user profile'
git push origin main

    8. Sign in to the AWS Management console in a new browser window, and open the AWS Amplify console at https://console.thinkwithwp.com/amplify/apps.

    9. AWS Amplify automatically builds your source code and deployed your app at https://...amplifyapp.com, and on every git push your deployment instance will update. Select the Visit deployed URL button to see your web app up and running live.

Was this page helpful?

 Feedback
Start Task Six

Clean Up Resources