Create a “My Account” page on your React website with AWS Amplify and Cognito
Ever wanted to create a My Account page on a React website using AWS Cognito as your user pool? Today I wanted to do this for a website I am building and found that it was surprisingly easy to do.
I used Amplify to set up both my AWS backend and my authentication front end. The magic of Amplify is mind boggling after spending so much time provisioning resources in AWS by hand or even by editing CloudFormation templates. Amplify abstracts all the JSON/YAML editing and gives you a simple wizard to create the configuration for you.
Once you have a React website app set up and the Amplify Auth Cognito authentication configured we will allow the logged-in user to change their account details. The authentication data is in AWS Cognito as that is your user pool.
To get started with Amplify and React take a look at the Getting Started section on the Amplify website: https://aws-amplify.github.io/docs/js/react
We will assume that you have already set up the following dependencies: npm, nodejs and aws-cli. Now go ahead and set up a vanilla React app with react-create-app. The outline below will help make sure you have the basics set up.
Create a My Account page
To keep things simple we will use withAuthenticator on the App.js to magically add authentication capability to your app. The following App.js file shows you how.
To present and work with the My Account data we are going to create a page specifically for this purpose. Using the React single page app approach the best way to do this is to use React Router. Check the Router elements in the file above. One element will render the MyAccount component when the URL is /myaccount and the other will render a link to the My Account page from the front page.
One small thing to add. In order for the Semantic UI to have the CSS it needs on the public site open public/index.html and add a reference to the cloud distribution of the CSS file between the Head tags:
<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css”></link>
Now for the fun part, the My Account page. Create a new file called “MyAccount.js” in the src directory right next to the App.js file. Then use the contents of the gist below to get started.
This will be all you need to create a My Account section on your website but lets take a look at what is happening in the React code above.
As Amplify handles all the heavy lifting between the app and AWS all we have to do is capture the information and pass it to Amplify. React prefers to consider the state of the component that renders the input fields as the “single source of truth” so what we need to do it capture the input and put it into the React state. On form submission we then call Amplify Auth and pass the values to it to persist in Cognito for us.
In React, mutable state is typically kept in the state property of components, and only updated with setState(). We can combine the two by making the React state be the “single source of truth”.
You may notice the attribute “bypassCache: true” where we fetch the user information. This is important on a page where we intend to make updates but would otherwise cause an unnecessary performance hit. The purpose of this is to force a call to Cognito when we fetch the user data. By default the currentAuthenticatedUser method will cache the user details and fetch for cache rather than from Cognito. That would mean that the user would not see the updated information after saving even if the save was successful. By bypassing the cache and forcing a network request we refresh the cache and make sure the information displayed is fresh.
Beyond Cognito: AppSync & DynamoDB
Cognito is really just the starting point for the My Account page. It is where you keep the authentication details for your app. It is tempting to also think of it as the best place to keep all the account information including your application authorization. However, this is not a good idea.
Cognito is best kept simple. To extend the personal information, account details and application permissions use a different data store. Any data store will do but AWS DynamoDB is particularly well suited to this role.
The good news is that Amplify abstracts all this configuration and infrastructure provisioning into a wizard as well. We will provide a tutorial on this in the future but in the meantime take a look at the Amplify documentation at:
We hope you enjoyed this quick tutorial.
