Build a Full-Stack React Application

Implementation

• Install the Amplify libraries

  We will need two Amplify libraries for our project. The main aws-amplify library contains all of the client-side APIs for interacting with the various AWS services we will be working with and the @aws-amplify/ui-react library contains framework-specific UI components. Install these libraries in the root of the project.
  

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

  Code snippet copied

  Copy
• Create the authentication service

  To create the authentication service, use the Amplify CLI:
  

  amplify add auth
  
  ? Do you want to use the default authentication and security configuration? Default configuration
  ? How do you want users to be able to sign in? Username
  ? Do you want to configure advanced settings? No, I am done.

  Code snippet copied

  Copy
• Deploy the authentication service

  Now that the authentication service has been configured locally, we can deploy it by running the Amplify push command:
  

  amplify push --y

  Code snippet copied

  Copy
• Configure the React project with Amplify resources

  The CLI has created and will continue to update a file called aws-exports.js located in the src directory of our project. We will use this file to let the React project know about the different AWS resources that are available in our Amplify project.

  To configure our app with these resources, open src/index.js and add the following code below the last import:

  import { Amplify } from 'aws-amplify';
  import config from './aws-exports';
  Amplify.configure(config);
  

  Code snippet copied

  Copy
• Add the authentication flow in App.js

  Next, open src/App.js and update with the following code:

  import logo from "./logo.svg";
  import "@aws-amplify/ui-react/styles.css";
  import {
    withAuthenticator,
    Button,
    Heading,
    Image,
    View,
    Card,
  } from "@aws-amplify/ui-react";
  
  function App({ signOut }) {
    return (
      <View className="App">
        <Card>
          <Image src={logo} className="App-logo" alt="logo" />
          <Heading level={1}>We now have Auth!</Heading>
        </Card>
        <Button onClick={signOut}>Sign Out</Button>
      </View>
    );
  }
  
  export default withAuthenticator(App);

  Code snippet copied

  Copy

  In this code, we've used the withAuthenticator component. This component will 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). We have also added a Sign Out button to log users out.
  

• Run the app locally

  Wait for the resources to finish deploying and then run the app to see the new Authentication flow protecting the app:
  

  npm start

  Code snippet copied

  Copy

  

  Here, you can try signing up, which will send a verification code to your email. Use the verification code to log in to the app. When signed in, you should see a Sign Out button, which signs you out and restarts the authentication flow.

  

• Set up CI/CD of the frontend and backend

  Next, we need to configure the Amplify build process to add the backend as part of the continuous deployment workflow. From your terminal window run:
  

  amplify console
  ? Which site do you want to open? AWS console

  Code snippet copied

  Copy

  This will open the Amplify console. From the navigation pane, choose App settings > Build settings and modify it to add the backend section (lines 2-7 in the code below) to your amplify.yml. After making the edits, choose Save.
  

  version: 1
  backend:
    phases:
      build:
        commands:
          - '# Execute Amplify CLI with the helper script'
          - amplifyPush --simple
  frontend:
    phases:
      preBuild:
        commands:
          - yarn install
      build:
        commands:
          - yarn run build
    artifacts:
      baseDirectory: build
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*

  Code snippet copied

  Copy

  Scroll down to Build image settings and choose Edit. Select the Add package version override dropdown and select Amplify CLI. It should default to the latest version, as shown in the image.

  

  Next, update your frontend branch to point to the backend environment you just created. Under the branch name, choose Edit, and then point your main branch to the staging backend you just created. Choose Save.
  

  

  

  If you see the message Please set up a service role..., follow the instructions provided before continuing to set up and attach a service role to your app.

• Deploy the changes to the live environment

  Now return to your local terminal window and deploy the changes to GitHub to begin a new build in the Amplify console:

  git add .
  git commit -m "added auth"
  git push origin main
  

  Code snippet copied

  Copy