Serverless React Web App with AWS Amplify — Part Three

Following on from my previous post, Serverless React Web App with AWS Amplify — Part Two, today we’ll be in the final part of this mini series.

At the moment our app should look somewhat similar to the below, with the ability to add/edit/delete items.

Current App

User Authentication

Let’s start by enabling the feature using the .

#bash$ awsmobile user-signin enable --prompt
? Sign-in is currently disabled, what do you want to do next
Enable sign-in with default settings
#Choose default settings $ awsmobile push #push your changes to the cloud

To keep things simple, we’ll use Amplify’s component to handle our auth flow. This component wraps our entire app up and renders a complete sign up/sign in UI, which is customisable through the AWS Mobile Hub. If you wish, you can also handle the Sign In/Sign Up process using the component, which gives you greater flexibility of the entire auth flow.

# App.js [...]import { withAuthenticator } from 'aws-amplify-react'[...]export default withAuthenticator(App, true);

After adding the above code to your file, reload your app and it should look something like this. The added ensures a sign out button is rendered.

Sign In/Sign Up Page

Try going through the Sign Up flow, you’ll notice MFA (multi-factor auth) is enabled by default, so when putting your mobile number in you’ll get a confirmation code to use each time to sign in/sign up. It’s probably overkill for an app like this, but it does improve security. Once going through the flow and signing in with your newly created user account, you should be directed to your app’s home page.

That’s user authentication done! Pretty simple isn’t it? You can also view all users signed up to your app by heading over to the User Pool on Cognito and clicking on The easiest way to get to your Cognito Pool is to open up the Mobile Hub, head to the User Sign In card and click “Edit in Cognito.”

AWS Mobile Hub, Cognito Pool Settings

I’ve caused myself so many stupid issues by not doing this and your project gets real messy, real fast and can get out of sync, so make sure your local copy is always in sync with the cloud.

Federated Identity Login

Now we’ve added user auth, but most modern web apps incorporate some form of social login, so let’s add to ours.

You’ll need to get a . It’s fairly straight forward and Google provide easy to follow instructions here. When asked what you’re developing for, choose and thenadd the as Be sure to keep this tab open for the time being, as we’ll be going back and fourth retrieving the Client ID as well as changing some settings later on.

Next, we’ll need to add our Client ID to our Cognito Pool, this can be done by configuring the feature, using the tool.

#bash → awsmobile user-signin configure? Sign-in is currently enabled, what do you want to do next Go to advance settings
? Which sign-in method you want to configure Google sign-in (currently disabled)
? Google Web App Client ID
? Google Android Client ID
? Google iOS Client ID
$ awsmobile push //don't forget to push your changes, otherwise it won't work.

Finally, we’ll need to tweak our code to include our so that the component can use it. As long as you restrict the origins from the Google Dev Console, as we did earlier, there isn’t a specific need to hide this ID, so we don’t need to worry about loading environment variables just yet.

The first thing we need to change is in our file. We revert back to exporting the App as it is, not wrapping it in the component.

#App.js [...]export default App;

Next, in our file, we import and create a new named which is essentially what we had previously in our file. We then create another constant called and set this equal to a JSON config containing our Lastly, we use our constant within the render function and include our from the constant we just created

#index.jsimport App from './App';import { withAuthenticator } from 'aws-amplify-react'const AppWithAuth = withAuthenticator(App, true);const federated = {
google_client_id: '',
ReactDOM.render(<AppWithAuth federated={federated}/>, document.getElementById('root'));

After reloading your app, you should be able to successfully login using Google!

Our new sign in/sign up up form with Google Sign in Button
After successful Google Login, the user’s name is displayed on the header with a Sign Out button.

The process for adding Facebook/Amazon Logins is pretty much the same, you’d just need to acquire a client ID from their developer dashboard.

That’s it for Authentication! We successfully added a sign in/sign up form and incorporated Google Login. It’s still quite rough around the edges and could do with some styling, but functionality wise it’s pretty much there.

Deployment and Distribution

Let’s make sure people can actually access and use our app by deploying it and distributing it. AWS Amplify includes one simple command that sets everything up for deployment and distribution.

#bash$ awsmobile publishFile sizes after gzip:379.32 KB  build/static/js/main.c1215b8f.js
99.09 KB build/static/css/main.340cfbbb.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "",The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:!
your application is published and hosted at:
your application is also distributed through aws CloudFront

This command will build your app and upload the files to a s3 bucket, configured to host static websites. It’ll also go one step further and distribute this through their Global CDN, CloudFront, making your site quicker and easier to access for users all over the world!

Once uploading has finished, you’ll notice two URLS, one is the bucket URL and one is the cloudfront distribution. If you try logging in on either you’ll get this error.

Redirect_URI_Mismatch error — Update the Authorised Origins within the Google Cloud API Settings

This occurs because the request is coming from a domain that hasn’t been approved, so let’s quickly add our new CloudFront URL to the in the Google Cloud API Settings.

After adding this and saving, you should be able to login successfully using Google.

As it’s quite simple to do, I thought it’d be useful to finish by showing you how to point your new app to your personal domain, if you have one. In order to do this, you’ll need your domain name in AWS Route 53.

Firstly, we need to configure our Cloudfront Distribution to include our alternate domain name. Open up the CloudFront Dashboard, locate your distribution and update the I’ll be using the domain

You’ll also need to choose and select the correct certificate for your domain. Setting up a Certificate in AWS Certificate Manager is incredibly easy and straightforward, you can follow the docs here. One thing to note, make sure the certificates you create in order to access them from CloudFront. You can always check what region you’re in by checking the top right of the app bar, next to your name. When you’re all done, hit . Now we wait, updates to CloudFront distributions can take some time, so take a little break.

Once your changes are deployed, head over to the Route 53 Dashboard and click on your registered domain. Next, click and fill in your URL in the field. You’ll then need to change to and copy your CloudFront URL into the field.

Hit and wait for your changes to go live! The time taken can vary so don’t worry if it’s not instant, go grab a coffee or beer and come back later to check.

Congrats! You’ve now got a fully functioning, albeit a bit rough looking, Serverless React Web App! Now you have a great foundation to move forward with, allowing you to build, test and deploy your app in nice, quick iterations.

Further Development

There’s quite a few different things you can do to further enhance your app. Here’s a few to help get the ideas bubbling:

  • Adding a CI/CD Pipeline with CircleCI, check one of my previous posts on this topic.
  • Cleaning up the Views, ensuring the Sign out button is rendered on the correct App bar.
  • Adding pictures using Amplify’s storage feature.
  • Porting to Mobile using React Native — this is probably quite complex for now and would require rewriting some sections of the code, but if you’re up for a challenge give it a go!
  • Adding reviews/comments for users to leave on an item
  • Refine UI
  • Incorporate Amplify’s Chatbot feature, making your app a little more interactive

These are just a few ideas, but there’s lots more you can do to further develop and build new features.

As always, thanks for reading, hit 👏 if you like what you read and be sure to follow to keep up to date with future posts.



A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store