React Signup/Login/Account Settings application With Amplify
Tags: javascript, authentication, react, amplify
Published: 2023-01-16 17:59:18

---
title: React Signup/Login/Account Settings application With Amplify 
published: true
description: Create a React.js application with Authentication using AWS Amplify. We'll also look at Account Settings a new connected component. 
tags: JavaScript, Authentication, React, Amplify
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gm4380tqlsu7d1dddhqg.png
# Use a ratio of 100:42 for best results.
#published_at: 2023-01-3160 19:47 +0000
---

Hi, I’m Erik, I’m a front-end engineer on the [Amplify UI](https://ui.docs.amplify.aws/) 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. 

{% youtube CIUx6_gQyyE %}

##What Is Amplify?

[Amplify](https://docs.amplify.aws/) 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](https://aws.amazon.com/cognito/) identity and access management service, or our managed GraphQL service [AppSync](https://aws.amazon.com/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](https://ui.docs.amplify.aws/), with the [Authenticator](https://ui.docs.amplify.aws/react/connected-components/authenticator) and [Account Settings](https://ui.docs.amplify.aws/react/connected-components/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](https://create-react-app.dev/)! 



```bash
npx create-react-app my-auth-app
```

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

```bash
npm create vite@latest
```

*If you are using Vite, make sure to follow these additional [steps](https://ui.docs.amplify.aws/react/getting-started/troubleshooting#vite) to get setup!* 

```bash
cd my-auth-app
```

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

```bash
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](https://github.com/aws-amplify/amplify-cli), you can skip this part and jump over to the init command below. You can alternately use [Amplify Studio](https://console.aws.amazon.com/amplify) to setup your backend.*

```bash
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](https://aws.amazon.com/free/). This should only take a few minutes. You can click next through all the prompts to continue.

```bash
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](https://docs.amplify.aws/start/getting-started/setup/q/integration/react/#create-a-new-react-app).*

```bash
amplify init
```

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

```bash
amplify add auth
```

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

```bash
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.

```javascript
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](https://ui.docs.amplify.aws/react/components/button)!*

```javascript
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.

```bash
npm start
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c20c4lykfe2oc3iz7ewu.png)

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](https://ui.docs.amplify.aws/react/connected-components/authenticator/customization).

##Account Settings

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

The [Account Settings](https://ui.docs.amplify.aws/react/connected-components/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.

```javascript

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. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nu4y7fnm7vbv799dudj.png)

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.

```javascript

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn6x9xyyh9a9h6g8nzgo.png)

###Customization

A powerful feature of the Account Settings component are its levels of customization. Beyond CSS and [design tokens](https://ui.docs.amplify.aws/react/theming), 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.

```javascript
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!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eed042a6xvmsq7nop0ke.png)

##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](https://ui.docs.amplify.aws/react/guides/auth-protected) and our [AppSync tutorial](https://docs.amplify.aws/lib/graphqlapi/getting-started/q/platform/js/) 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!