React Signup/Login/Account Settings application With Amplify

Hi, I’m Erik, I’m a front-end engineer on the Amplify UI team and I wanted to share with you how to create a React application with authentication. Then we’ll look at how we can add in some nice features, like deleting users and updating passwords with our new Account Settings components.

If you want to jump in right away, check out my YouTube video to get started below.

What Is Amplify?

Amplify is a set of tools that allows full-stack web and mobile developers to create and build apps. It makes using AWS services, like our Cognito identity and access management service, or our managed GraphQL service AppSync, much simpler and straightforward to use.

What Are We Building?

Imagine you need to create a dashboard application, that only logged in users are able to access. Let's say you want to add a way for users to change their password after logging in, or completely delete their account. Let's take a look at that scenario!

In this tutorial we’ll use our Amplify UI component library, with the Authenticator and Account Settings connected components to create a full stack authenticated application.

Setup

To begin we’ll create a new application. We'll use Create React App!

npx create-react-app my-auth-app

If you'd like to use Vite instead you can run the following command.

npm create vite@latest

If you are using Vite, make sure to follow these additional steps to get setup!

cd my-auth-app

Next up, let’s install a few libraries to get up and running!

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

If you don’t already have it installed, we’ll be using Amplify CLI to create our app.

If you’re familiar with Amplify CLI, you can skip this part and jump over to the init command below. You can alternately use Amplify Studio to setup your backend.

npm i -g @aws-amplify/cli

Let’s setup Amplify CLI! Run the configure command, and follow the prompts. It will make you log into your AWS console and create a user. If you need to, you can sign up for a free AWS account. This should only take a few minutes. You can click next through all the prompts to continue.

amplify configure

Let’s configure Amplify for our app. Run the init command and hit enter through the prompts.

Having a problem? Check out the official getting started guide.

amplify init

Let’s add auth, run this command next. Choose email as your login type.

amplify add auth

Let’s push the changes! Run the push command.

amplify push 

Adding Authentication To Your React Application

Now that everything is setup, we can dive into code and add React!

Fire up VSCode, or your editor of choice and open the index file and add an import for aws_exports Amplify, and the styles! Then make sure to add a configure command.

The aws-exports file is generated after adding auth to your app and pushing your changes to AWS. You may also notice a amplify folder. This will have all your configuration files in it.

import { Amplify } from "aws-amplify";
import aws_exports from "./aws-exports";
import '@aws-amplify/ui-react/styles.css'

Amplify.configure(aws_exports);

Inside your App file import the Authenticator. You’ll be surrounding your application with it. We’ll render a signOut and user so the user information can be displayed and a logout button can be added.

The Button is a component from our UI component library!

import { Authenticator, Button } from '@aws-amplify/ui-react';

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <Button onClick={signOut}>Sign out</Button>
        </main>
      )}
    </Authenticator>
  );
}

Go ahead and start your application and you’ll see a login page.

npm start

From here you can create an account using the Create Account tab and login. It will then prompt you to check your email to enter a code in. Go ahead and try it out, create a few users and after logging in, and try to log out.

Need to customize the look and feel? Check out out our customization docs.

Account Settings

The Account Settings components are currently in Developer Preview! We are working hard on finalizing it soon.

The Account Settings component allows an already logged in user to change passwords as well as deleting a user. Let’s begin to see how to change a user.

Change Password

Inside the App file in between the opening and closing brackets of the Authenticator add the AccountSettings.ChangePassword component.

We’ll also add a handleSuccess callback that will be triggered after a change password action occurs.

import React from 'react';
import { Authenticator, Button, AccountSettings } from '@aws-amplify/ui-react';

function App() {
  const handleSuccess = () => {
    alert('password is successfully changed!')
  }

  return (
  ...
    <AccountSettings.ChangePassword onSuccess={handleSuccess}/>
  ...
  );
}

After logging in you’ll see a page like this. Go ahead and change your password. You can see from the console that the password was changed.

Logout and back in again and test the functionality with your new password.

Delete User

Go back into your App file and remove the change password component. Let’s look at the AccountSettings.DeleteUser component instead. We’ll also add a handleSuccess callback that will be called as soon as the user is deleted.

import React from 'react';
import { Authenticator, Button, AccountSettings } from '@aws-amplify/ui-react';

function App() {
  const handleSuccess = () => {
    alert('user has been successfully deleted')
  }

  return (
  ...
    <AccountSettings.DeleteUser onSuccess={handleSuccess} />
  ...
  );
}

Log into one of your existing accounts and you should see this page. Go ahead and delete a user, it will log you out. Check the console and you’ll see the success message.

Customization

A powerful feature of the Account Settings component are its levels of customization. Beyond CSS and design tokens, you can override nearly every component with your own look and feel.

Let’s override the delete button. In the AccountSettings.DeleteUser component add a components prop. Inside that props you’ll create a DeleteButton object. This will override the delete button on the DeleteUser component.

function App() {
  const components = {
    DeleteButton: (props) => (
      <AccountSettings.DeleteUser.DeleteButton {...props}>Custom Delete Account Button</AccountSettings.DeleteUser.DeleteButton>
    ),
  }

  return (
  ...
    <AccountSettings.DeleteUser components={components} />
  ...
  );
}

You’ll see a page that looks like this, with the new deleted button component after logging back in!

Conclusion and Next Steps!

In this tutorial we learned how to add authentication to our React app. We’ve learned about the new Account Settings connected component and how to use it to delete, and change password.

This is just the beginning of what you can do with the Amplify. Check out our protected routes and our AppSync tutorial for some more information!

If you’ve read all the way to the bottom, leave a comment and let me know what you’d like to see next in the world of Amplify! Thanks!