React App Setup with AWS Amplify – Signup and Login

In this video, we’ll be setting up a new React App with AWS Amplify to add Sign up, Login and Logout in the easiest way possible.

We need to start by creating a new react app using create-react-app. Open a terminal and run these commands:

npx create-react-app amplify-react-app
    
cd amplify-react-app

With that set up we can now install Amplify and then configure it.

npm install -g @aws-amplify/cli
    
amplify configure

This will open up an AWS console tab in your browser. Make sure that you’re logged into the correct account with a user that has admin permissions.

Go back to the terminal and follow the steps, adding a region and name for the user. This will then take you back to the browser where you can follow the steps to create the new user. Amplify pre-configures everything so we can just click next until the “Create User” page. Click that button once and in. a few seconds you’ll see a screen like this.

STAY ON THIS PAGE

Back in the terminal again you can follow the steps, copying the access key and secret into the terminal when asked. When you are asked if you want to add this to a profile say Yes. Create a profile that is something like serverless-amplify.

Now we can initialize the amplify setup   by running amplify init. You can give the project a name and answer all the questions. Most of them should be correct already. This then takes a while to make the changes to your account.

Once done we need to add authentication to the app. We do this with amplify add auth. Select the method as default the sign in to email and then no, I am done. We can now deploy this by running amplify push. This takes a while but in the end, our src/aws-exports.js file has been created.

The React App

Now we can get onto creating the react app. Start by installing the Amplify npm packages we need.

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

Now we can start editing the code of our app. In our src/App.js the file we can remove everything in the headers and replace it with this:

<header className="App-header">
    <AmplifySignOut />
    <h2>My App Content</h2>
</header>

This is a very basic set up but you could put the main content of your site here and put the AmplifySignOut button where ever you want it to be.

We also need to add some extra imports to the top of the file:

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { AmplifySignOut, withAuthenticator } from '@aws-amplify/ui-react';
    
Amplify.configure(awsconfig);
    

Now the last thing that we need to do is to change the way that we export the app. Change the last line to be export default withAuthenticator(App); to add Amplify to this app.

Now when we run npm start we should get a login screen. We’ve not created this so it has come from Amplify itself.

If we try and log in then it will fail as we need to sign up first. We can click create account and then enter our email and a password to sign up. Once we’ve confirmed our email by submitting the code we were sent we get onto the home page of our app. If we log out we can now log back in as expected.