AWS Amplify for React/React Native Development — Pt 2 App Creation and Authentication.

So you have your amplify console configured for use! Good for you!

If you’ve made it this far — you are gonna be just finnnnee — So lets get to the juicy stuff. If you are confused — did you skip part 1? Go check it out here —

https://valnuccio.medium.com/aws-amplify-for-react-react-native-development-pt-1-setting-up-your-amplify-environment-b226dfd3ba0

Assuming you are starting from scratch you will want to run

npx create-react-app my-app

*npx vs npm — Npx allows us to run that command without storing the command on your device. It saves you space

Now go get a coffee — it’s gonna be a minute.

https://valnuccio.medium.com/aws-amplify-for-react-react-native-development-pt-1-setting-up-your-amplify-environment-b226dfd3ba0

Alright! It’s done.

https://media.giphy.com/media/l2YWr3bI5U1bHOzuM/giphy.gif

First things first — CD into your new app and take a look around at the folders. You are ideally familiar with a few of the basic things create-react-app builds for you but if not take a moment here and make sure you understand the file structure.

After you have done that you want to get going connecting this specific app to AWS. Similar to using GitHub, it all starts with

amplify init

For our purposes all pretty much all the following prompts we are going to use the default option. So as follows we have :

Enter a name for the project myapp
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start

Things to consider for your personalized use:

• choose whatever editor is your preferred!
• you can customize type of app for flutter, ios, or android
• Note all the options for frameworks you can use. Here we are sticking with react.
• we are using awscloud formation as the default provider but you can also use terraform. Honestly, I haven’t ventured there yet but if you are interested in learning more about Terraform I’m going to link some articles down below.

Next is the actual linking with what we did in Part 1!

Do you want to use an AWS profile? Yes

Please choose the profile you want to use amplify

We want to use the amplify profile we created in Part 1 rather than the default profile. It’s just a little nicer for organizational purposes to keep things in different places. You will thank me later when you are an AWS genius and have all the projects.

Once you hit enter you will see AWS getting to work crafting those connections for authentication. Takes just a few seconds- Sip that coffee.

https://media.giphy.com/media/l2YWr3bI5U1bHOzuM/giphy.gif

SUCCESS!

Now just for reference I want you to go to your terminal and spin up that react app so you can see that its just a regular old landing page.

npm start

Great. Nothing special here. So let’s get in there and finish this.

Shut down the server to install a few things.

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

As of my writing — the latest version of react is not configured to properly run with amplify (as of a few days ago only so hopefully this gets figured out quickly. Can follow a thread about it here: https://github.com/aws-amplify/amplify-js/issues/7105).

So if you see the following error —

Then just go ahead and install with the given option to ignore it

sudo npm i @aws-amplify/ui-react --legacy-peer-deps

*I haven’t had any issues yet by forcing it but I will update here if need be!

In your Editor you are going to navigate to the index.js and add the following imports :

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

and also the following line

Amplify.configure(awsconfig)

What you are importing here are all the configurations that you have set up for your aws account on this application.

All in all your file should say:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig)
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>
,
document.getElementById('root')
);
reportWebVitals();

Now just npm start it up again to make sure nothing is broken. Still seeing that main landing page? You are free to continue.

Adding Auth

So to actually get Amazon Cognito up and running with your application you are going to use one of those commands that you saw as an option previously —

amplify add auth

What this is doing is adding whatever the default authentication service is for Amplify at the moment to your app. Currently that is Amazon Cognito. Now at almost every turn you are going to use default again. So we have :

default configuration

And you are going to select how you want users to sign in. Lets go with

username

Then:

Do you want to configure advanced settings? No, I am done.

Now basically what it is saying is that it has configured those settings but it has to actually build those settings. So go ahead and for now lets run

amplify push

And

Are you sure you want to continue? Y

Go get a snack.

When its done take a look at all the stuff that you got built in to your authentication!!! Phew. Aren’t you glad you didn’t have to do that alone?

If you head over to your AWS Web Console and navigate to Amazon Cognito, click on user pools, and you will see a folder for the project you just created. If you don’t see it you probably just have to fiddle with the development zones on the top right. *(Second from the right drop down menu).

So — let’s head back into our Code Editor!

Navigate to your App.js file and add the following imports:

import { withAuthenticator} from '@aws-amplify/ui-react';

for the withAuthenticator you are going to scroll to the bottom of the page and wrap the export with it like

export default withAuthenticator(App);

All this does is hide your App behind the authentication.

Before we checkout that our Authentication is working, in your src folder look for a file called aws-exports. This is what we imported earlier in index.js and you can see that it has all the configured settings both for regular amplify set up and for specifically Cognito.

Ok — Spin up that server!

OH SNAP!

Now you can create a user and authenticate a user all from here! There is a lot of built in functionality so just play with it and see all it has to offer. Once you’ve created a user you can then view that user’s info in your Web console.

You can see I navigated to Users and groups here on the left.

You can also make a user right from the web console.

Okay — Finally we have to make sure we can Sign Out

In your Editor, in App.js, update your ‘@aws-amplify/ui-react’ import to:

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';

This gives us the use of the preconfigured button (AmplifySignOut) to log out. You can pop it into your return statement and it will show up on the screen. See it in action below:

Look ma! Easy authentication! Stay tuned for the next in the series — GraphQL setup.