Authenticate users with AWS.

» Prerequisites

1. The prerequisites will be that you should have node, and npm, installed.

2. Also, create an AWS account by visiting the AWS site and then complete your sign-up process by providing your credentials.

3. Once that is done, open the terminal and check the node and npm version by running the command

node -v 
npm -v

4. Then let’s now install the amplify CLI by running the command:

npm install -g @aws-amplify/cli

» Create a new React Project

1. Then create a new react app by running the command:

npx create-react-app your-app-name

2. Once, your application is created open it into the VS code

» Set up amplify CLI

1. Now we have to set up the Amplify CLI on our local machine.

2. So for it, open the terminal and run the command:

amplify configure

3. We are just configuring it to connect to our AWS account.

4. After running this command it then takes you to the AWS console, where you’ve to sign in. If you have already signed in, then hit enter in the terminal, then it will ask you to select the AWS region. Select the region you want.

5. Then we have to specify the user name that we want to use. It will again take you to the aws console where we have to Enter a User name and then select Next. You can name the user anything but I’ll call it “amplify-auth”.

6. Select the Attach policies directly and select AdministratorAccess-Amplify as the Permissions policy. Click on the Next.

7. Then we have a Review page, check that everything is ok, and then select Create user.

8. And there we have this user list where you will have the user that you created just now.

9. Scroll down and now our next step is to create an access key, to do that: select Create Access Key, choose CLI, and then click Next. And there you will have your access key and secret access key.

10. Once all is done, go back to the VS code, and then press enter. Then here we have to provide the keys. Copy the keys and paste them in the terminal.

11. This will update/create the AWS Profile on your local machine.

12. Then provide the profile name and the new user is set up successfully.

» Initialize AWS in React Project

1. After this, our next step is to initialize AWS Amplify in the project directory by running the command in the terminal:

amplify init

2. This is going to ask a few configuration questions: like the name of the project. Provide the name and then it’s going to set up the rest of the configuration for you.

3. It then asks if you want to use an AWS profile, select yes, and then select which profile you want to use.

4. It going to now take a few minutes to set up the application.

5. After that is done, you will now have this amplify folder and an aws-export.js file in your project directory.

» Authenticate the React app

1. Now we want to add authentication to our react app, for that run the command:

amplify add auth

2. Select default configuration and then email; because you do want your user to authenticate with email right?

3. And that’s all. Then we enter the option, no it’s done. Now let’s push all of this to amplify, so for it run the command:

amplify push

Select yes so that it can update its resources. It might take a few moments.

» Installing the packages needed

1. After you have successfully pushed the resources on Amplify, we need two packages to be installed in order to work with Amplify.

2. So, in the terminal run the command:

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

» Start writing the code.

1. In the App.js file let’s start by removing all this content and then import react and the CSS file.

2. We also import Amplify from aws-amplify

3. Then we import two components, withAuthenticator and Authenticator from AWS Amplify that will help with user authentication UI.

import './App.css';
import { Amplify } from 'aws-amplify';
import { Authenticator, withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import awsExports from './aws-exports';
Amplify.configure(awsExports);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Authenticator>
          {({ signOut, user }) => (
            <main>
              <div className="App">
                <header className="App-header">
                  <button onClick={signOut}>Sign out</button>
                  <h2>My App Content</h2>
                </header>
              </div>
            </main>
          )}
        </Authenticator>
      </header>
    </div>
  );
}

export default withAuthenticator(App);

4. import ‘@aws-amplify/ui-react/styles.css’;: Then we also imports a CSS file from the @aws-amplify/ui-react package. The styles.css file contains pre-defined styles for the AWS Amplify UI components

5. import awsExports from ‘./aws-exports’; We also want to import a JavaScript object from a local file called aws-exports. The aws-exports file likely contains configuration settings for the AWS Amplify library. This could include information such as AWS region, user pool details, API endpoints, and other authentication-related configurations.

6. Then we create a functional component App and inside the component, we render the Authenticator component provided by AWS Amplify. The Authenticator component is a higher-order component that will help us manage the authentication flow.

7. Inside the Authenticator component, we also have a function that takes two parameters, signOut and user. This function renders the main content of the application. If a user is authenticated, it shows a “Sign out” button and displays “My App Content” and then When the “Sign out” button is clicked, it triggers the signOut function provided by AWS Amplify to sign the user out.

8. Finally, we are going to export, the App component by wrapping it with the withAuthenticator component.

9. withAuthenticator adds authentication logic to the App component, making sure that the user is authenticated before they can even access the content.

» Starting the server.

1. In the terminal, Run the following command to start the server and it will take you to the local host 3000. And there we have a beautiful sign-in page.

npm start 

2. Let’s start by creating an account first. Provide the username and the password and there this then asks for a verification code. This code will be sent to you by email, just put that up, and there you have signed in successfully. And to sign out just click on sign out. And that’s it.

3. Once we have created the account, we can now directly sign in. Let’s do that too, provide the username and password, and there, once again you can access the content of this web app.

4. Let’s now head back to the AWS console and there click on your user pool name; down there you will have one user.

5. So that’s how you can authenticate the user.

And That’s it! You’ve successfully built a react app with authentication.

Thank You and Happy coding!😊