User management and credential handling can be a tricky task, providing authentication measures based on accounts is a primary focus of modern web applications. Amazon Web Services (AWS) provides a simplified user management tool through Amplify Authorization.
Performing “sign up, sign in & sign out” activities for users, while providing a secure framework with HTTP headers — Amplify authentication operates through a powerfully simple SDK framework.
Amazon Web Services (AWS) has various methods for implementing this SDK, which I will illuminate to provide further explanation of downstream choices.
https://aws.amazon.com/amplify/
Installing the Amplify CLI
To begin setting up Amplify Authentication, there are a few configuration steps to start with on your local machine. First is installing the Command Line Interface (CLI) for accessing Amplify from your terminal.
In your terminal, paste and enter the below snippet to install the CLI.
npm install -g @aws-amplify/cliIf there are issues installing the CLI or any of the following packages, you can run these commands with the sudo prefix; to enable root permissions for the command line in the terminal. NPM has a guide for EACCES permissions as well.
Setting up Amplify & Authentication packages in React
Create an Amplify Authentication application with the create-react-app template, which will be used for accessing Authentication within the JavaScript SDK. Navigate to a folder where you often store local applications, such as documents, you can do this in the terminal with cd documents .
In your terminal, paste and enter the below snippet to create a React application from the create-react-app template.
npx create-react-app my-appAfter the NPX tool runs and implements the package binaries, you will need to add Amplify within the application. Change directories to the recently created React application directory, with cd my-app.
In your terminal, paste and enter the below snippet to implement Amplify within your React application.
npx amplify-app@latestOnce the amplify packages have been added into the newly created application, begin the process of implementing Amplify services, along with installing the respective packages.
In your terminal, paste and enter the below snippet to install the required packages for implementing Amplify & Authentication.
npm install aws-amplify @aws-amplify/authGenerating IAM users, groups, and access keys
Identity and Access Management (IAM) Users allow for authorization-based control over resources through IAM access policies, these can be changed in the AWS console.
IAM access can also be organized into IAM Groups, where larger Groups of Users can access resources through a shared policy, applied for a group of users.
Access keys are a universal method of authorization for accessing AWS services. Keys can be used for short term, long term, and rotational purposes in connecting cloud resources and applications. IAM keys are attached to a specific user, providing authorization to the IAM User and the groups resource their policies affiliate them with.
Start by creating an IAM User via the IAM service within AWS. In the left navigation bar, under “Access management”, choose users, on the users page in the top navigation, click the button “Add users”.
On the “Specify user details” page, enter a “User name” such as AmplifyUserand then select next.
For the user’s permissions on the “Set permissions” page, select the “Add user to group” option and in the secondary “User groups” navigation bar, click the button, “Create group”.
For the field “User group name”, enter a group name, for example AmplifyGroup , then click the button “Create user group”.
Applying the separate users, groups, and access policies with the ‘least privilege policy’ is recommended to mitigate permissions.
As this use-case represents the Amplify user connected to your Amplify enabled application, these permissions can be managed with the newly created group for Amplify.
Select your recently created Amplify group name on the “Set permissions” step, then click “Next”, to proceed in creating the user. On the next page “Review and create”, click “Create user”, to create the AmplifyUser within the AmplifyGroup. Now that there is an Amplify Group and Amplify User in that group, go to the “Users group” page and select the tab titled “Permissions”.
In the drop-down menu labeled “Add permissions” click “Attach policies”, then in the search bar, search for AdministratorAccess-Amplify , select this policy, then click the button “Add permissions”.
Your user now has Amplify Admin access through the Amplify group, the last step is generating access for the CLI to access Amplify through the users access policies.
Again, click on “Users” in the left sidebar under “Access management”, click on the user’s name, once on the user’s IAM profile, select the “Security credentials” tab and scroll down to “Access keys”. Click the button “Create access key” to begin the access key generation process.
When the access key form appears, select “Command Line Interface (CLI)”, read and check the box, “I understand the above recommendation and want to proceed to create an access key.” and click “Next”. On the following page, click “Create access key”, then click, “Download .csv file” and then “Done”.
Save the recently generated access key .csv file for the next step in the Amplify integration process.
Configuring Amplify for Authentication
Amplify’s Authentication create a related set of Cognito user pools for facilitating authentication. To initialize the application you can start the Amplify setup process to connect your application from your local computer to AWS and the cloud.
In your terminal, paste and enter the below snippet to initialize Amplify within your application.
amplify initThe command line will proceed with a series of questions, to finish this process answer the following questions:
Enter a name for the environment: <Project Name>
Choose your default editor: <Default Editor>
Select the authentication method you want to use: <AWS Access Keys>
accessKeyId: <accessKeyId>
secretAccessKey: <secretAccessKey>
region: <Your Cloud Region>The process should take a minute or slightly more to complete, while it loads the binary files and completes the setup of Amplify within your application files.
Enabling Amplify Studio and Authentication
A simple approach to enabling authentication within your local application is accessing your recently initialized application within Amplify Studio via AWS console.
Access your existing instance of Amplify through the AWS console, on the “All apps” page click the card with the application name that you chose during initialization.
Once the application specific page loads, click “Set up Amplify Studio”, on the next page, click the toggle saying “Enable Amplify Studio” to toggle on the studio service. After the Amplify Studio service is fully initialized, click the link to the environment to begin accessing the studio.
Once you open the Amplify Studio, which you can log into using your AWS account, click the button to “Enable authentication”.
In the Authentication flow, you can stick with the default choice for “1. Configure login” and “2. Configure sign up”, to keep the setup process simplified.
The default settings will create new accounts with “email”, require a password of eight (8) characters that “Include lowercase characters”, “Include uppercase characters”, “Include numerals”, and “Include symbols”. The verification method will also send a code via email to the newly registered user.After choosing new settings or keeping the default settings, click the button “Deploy”, when the confirmation modal appears, click the button “Confirm deployment”.
When the version of the Amplify backend has been deployed to the backend, pull down the latest configuration in your local application, with the provided AWS command.
Implementing Authentication with Amplify
Now that your Amplify Authentication is enabled, you can begin writing the code to create, update, delete and query the data. In the index.js file within the src/ folder of your React application. Adding these imports, will setup the SDK configuration for Amplify — this will access the exported configuration downloaded when you initialized the application.
import { Amplify } from 'aws-amplify'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)https://github.com/heyitsjoealongi/react-amplify-authentication/blob/main/src/index.js
For the next step, you will need to add the function/s to access the SDK, using async/await within a try/catch block, to call the Authentication SDK. You can find starter code for AWS Authentication, in documentation on implementing Sign up, Sign in & Sign out SDK functions.
Coding a Sign up Form in React for Amplify Authentication
Coding a sign up form with Amplify Authentication is as simple as implementing a React JavaScript form that calls the the SDK on submit; passing the collected values as the payload.
You can start with a React JavaScript form framework, called Formik, which will simplify implementing these forms. This will provide the HTML form features and submission handling.
In your terminal, paste and enter the below snippet to install Formik within your React application.
npm install formikIn this use-case you can use, the useFormik() hook that will extract the Formik package and allow your React form to utalize its features, leaving room for customization.
import React from "react";
import { useFormik } from "formik";
import { Auth } from "aws-amplify";
async function signUp(values) {
try {
const { username, password } = values;
const { user } = await Auth.signUp({
username: username,
password: password,
autoSignIn: {
// optional - enables auto sign in after user is confirmed
enabled: true,
},
});
console.log(user);
alert(JSON.stringify(user, null, 2));
} catch (error) {
console.log("error signing up:", error);
}
}
function App() {
const formik = useFormik({
initialValues: {
username: "",
password: "",
},
onSubmit: async (values) => {
console.log("values", values);
// alert(JSON.stringify(values, null, 2));
return await signUp(values);
},
});
return (
<form onSubmit={formik.handleSubmit}>
<label htmlFor="username">Username (Email Address)</label>
<input
id="username"
name="username"
type="email"
onChange={formik.handleChange}
value={formik.values.username}
/>
<label htmlFor="password">Password</label>
<input
id="password"
name="password"
type="password"
onChange={formik.handleChange}
value={formik.values.password}
/>
<button type="submit">Submit</button>
</form>
);
}
export default App;https://github.com/heyitsjoealongi/react-amplify-authentication/blob/main/src/App.js
Based on the instructed payload from the AWS Amplify Authentication documentation, and choices in the “Enabling Amplify Studio and Authentication” section of this blog, configure the form and SDK payload for providing the JavaScript Object Notation (JSON) payload.
Once this form is established, and the onSubmit() function is in place to pass the values forward to the SDK, you can utilize this form to begin signing up users for you application.
If on start, your React application is providing a series of errors around missing Amplify packages, in your terminal, paste and enter the below snippet to install the required packages within your React application.
npm install @aws-amplify/api-graphql @aws-amplify/auth @aws-amplify/cache @aws-amplify/core @aws-crypto/sha256-js @aws-sdk/protocol-http @aws-sdk/querystring-builder @aws-sdk/util-utf8-browser tslib bufferYou can extend and add additional SDK functions with form components written in React JavaScript and Formik. You can find the example code, which was written when writing this tutorial, and is a combination of the Amazon Web Services (AWS) example code, Create React App, and React JavaScript code written for this blog.
https://github.com/heyitsjoealongi/react-amplify-datastore/tree/main