My Journey with AWS Amplify — Authentication
What’s up everyone! If you found this page then it’s probably because you are just getting started with AWS Amplify and guess what — me too. So join me in on this learning experience as we navigate the waters.
Setting the stage
I want to provide context first on why I want to use AWS Amplify. I’m looking to build web components that can be pluggable with ANY framework — React, Angular, Vue, Next.js, etc. This means no sort of packaging required, like npm or yarn AND no node server. This may be challenging but I think it will be cool to see how far I can take this. The first component I want to build will be an authentication component.
AWS Amplify Setup
Ok, let us begin by setting up our local environment by first opening up your favorite terminal — I personally use iTerm. Side note — I am on a Mac.
- Sign up for AWS Free Tier. As of the time of this blog entry, you get 1 free year of various AWS services.
- brew install node
Assuming you have homebrew, you’ll need to install node. - npm install -g @aws-amplify/cli
Let’s now download AWS Amplify CLI. This is the most important we will be using for creating our simple authentication component. - amplify configure
This will walk you through a series of steps to setting up AWS Amplify with your AWS account. The set up is easy to follow and less than a few minutes to setup.
here is a snapshot of what it looked like for me:
amplify configureInitializing new Amplify CLI version…Done initializing new version.Scanning for plugins…Plugin scan successfulFollow these steps to set up access to your AWS account:Sign in to your AWS administrator account:https://console.aws.amazon.com/Press Enter to continueSpecify the AWS Regionregion: us-east-1Specify the username of the new IAM user:user name: xxxxxxComplete the user creation using the AWS consolePress Enter to continueEnter the access key of the newly created user:accessKeyId: xxxxxxsecretAccessKey: xxxxxxxxxxxxThis would update/create the AWS Profile in your local machineProfile Name: xxxxxxxxSuccessfully set up the new user.
5. mkdir <folder name> && cd <folder name>
make a directory to start using AWS Amplify.
This will store the cloudformation locally and will be stored in s3.
6. amplify init
This will initialize a project with AWS resource references
? Enter a name for the project xxxx? Enter a name for the environment dev? Choose your default editor: Visual Studio Code? Choose the type of app that you’re building javascriptPlease tell us about your project? What javascript framework are you using none? Source Directory Path: src? Distribution Directory Path: dist? Build Command: npm run-script build? Start Command: npm run-script startUsing default provider awscloudformation? Select the authentication method you want to use: AWS profileFor more information on AWS Profiles, see:https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html? Please choose the profile you want to use thirteenDeltaDevAdding backend environment dev to AWS Amplify Console app: xxxxxx⠸ Initializing project in the cloud…
7. amplify add auth
This will add the authentication feature, which uses a some of the AWS resources: Cognito, lambda, IAM Role
Using service: Cognito, provided by: awscloudformationThe current configured provider is Amazon Cognito.Do you want to use the default authentication and security configuration? Default configurationWarning: you will not be able to edit these selections.How do you want users to be able to sign in? UsernameDo you want to configure advanced settings? No, I am done.Successfully added auth resource xxxxx locally
Notice the last message. “successfully added resource xxxx locally”. This means that the AWS resources have not been pushed to the AWS cloud. You can think of it as being “commit” like in git and not yet been pushed.
8. amplify push
This will execute the cloud-formation and create the resources in AWS.
✔ Successfully pulled backend environment dev from the cloud.Current Environment: dev? Are you sure you want to continue? Yes⠋ Updating resources in the cloud. This may take a few minutes…✔ All resources are updated in the cloud
AWS Amplify notable steps:
“amplify status” will show you what you’ve added already and if it’s locally configured or deployed
“amplify add <category>” will allow you to add features like user login or a backend API
“amplify push” will build all your local backend resources and provision it in the cloud
“amplify console” to open the Amplify Console and view your project status
“amplify publish” will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
Building the Authentication Web Component
Alright — now that we got AWS resources ready to be used for authentication we can now build a very simple web component.
- Create a new directory outside of the AWS Amplify application.
- Go into directory and create an empty auth.html file
- Copy/paste the below content into auth.html
<html>
<head>
<script src="./aws-amplify.min.js"></script>
<script>
aws_amplify.Amplify.configure({
//grab the values from aws-exports
"aws_project_region": "",
"aws_cognito_identity_pool_id": "",
"aws_cognito_region": "",
"aws_user_pools_id": "",
"aws_user_pools_web_client_id": " ",
"oauth": {} });
function signIn() {
var email = document.getElementById("email").value;
var pass = document.getElementById("pwd").value;
try {
aws_amplify.Amplify.Auth.signIn(
email, pass
).then(data => {
console.log("successfully logged in")
console.log(data)
}
);
alert("Signed In. Check Console")
} catch (error) {
console.log('error signing in', error);
alert("Error signing in. Check Console")
}
}
function signUp() {
var email = document.getElementById("remail").value;
var pass = document.getElementById("repass").value;
var uname = document.getElementById("reuser").value;
try {
console.log("try to login");
const { user } = aws_amplify.Amplify.Auth.signUp({
username: uname,
password: pass,
attributes: {
email: email // optional
}
});
console.log(user);
alert("Signed Up!! Check Console")
} catch (error) {
console.log('error signing up:', error);
alert("Error signing up. Check Console")
}
}</script>
</head>
<body>
<h4>Sign In</h4>
<input type="email" id="email">
<input type="password" name="pass" id="pwd">
<button id="signin" onclick="signIn()">Sign In</button>
<h4>Sign Up</h4>
email:
<input type="email" name="remail" id="remail">
<br />
password:
<input type="password" name="repass" id="repass">
<br />
username:
<input type="text" id="reuser">
<br />
<button id="signup" onclick="signUp()">Sign Up</button>
</body>
</html>
4. Go to the amplify app you made in AWS Amplify Setup and navigate to src directory and you should find a aws-exports.js file. Should like something like this:
/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.const awsmobile = {
“aws_project_region”: "xxxxxxx",
“aws_cognito_identity_pool_id”: "xxxxxxxx",
“aws_cognito_region”: "xxxxx",
“aws_user_pools_id”: "xxxxxxxx",
“aws_user_pools_web_client_id”: "xxxxxxxx",
“oauth”: {}
};export default awsmobile;
5. Copy the content inside of awsmobile start with “aws_project_region” and paste into the html file where I have stubbed out the empty area.
6. open auth.html in a browser
7. fill out the sign up first
You may need to check console to see the password requirements
8. log in to AWS console and go to the user pool in Cognito
9. Click manage user pools and click the user pool created
10. Click users/groups on the left side
11. Click the new user created and confirm user
12. Go back to auth.html and sign in with newly created user
13. View browser console to view the signed in user object.
14. That’s it!
In Summary
You have successfully created a web component using purely JS and HTML without any packaging tool and without a node server. Pretty nifty and powerful for such a simple component.
I hope you find this article helpful. Happy coding!
Feel free to leave me comments :)