AWS Amplify in Vanilla Javascript

Working in browsers with AWS Amplify SDK for Authentication

AWS Amplify with Vanilla Javascript

AWS Amplify SDK has been a gateway to access AWS services like Cognito, Lambda, Hosting which is trying to ease the access & configuration of these services through its CLI tool.

According to AWS Amplify docs for Javascript documented here you can do it for web through imports. But when you try with the example code for vanilla browser Javascript, it won’t work and you will end up getting errors like

or

They have working examples for frameworks like React, Vue & Angular which are more ES6/Typescript oriented langauges that can work work with NPM modules easily.

Here is how you can access the APIs of AWS Amplify through vanilla Javascript from browsers.

Before starting the tutorial. Follow the steps in prerequisites for Amplify in Javascript

Step 1. Install AWS Amplify through NPM in your current project

Step 2. Find the library

Navigate to node_modules/aws-amplify/dist/ . Here you may find a file named “aws-amplify.min.js”. This file is the complete library with AWS JS SDK in it as well as AWS Amplify SDK.

Step 3. Import the library as a script

Add this in head section.

Make sure you have a file named in your working directory. If not then refer to the prerequisites section to set it up.

Since we need to check if it works, lets try an example of authentication.

Example 1 : Authentication

Lets try to create an authentication example in plain Javascript. Here we follow all the steps mentioned before. Now you need to initialize the project as per the documentation where you need to have a file named aws-exports.js. This file holds the configuration to AWS services which we are going to use for this example.

Save this code as index.html and open it in your browser.

You can try this method in any framework like Polymer, Framework7 or even jQuery.

Hope it helps everyone. Cheers !!

All rights reserved with the respected owners of trademarked products.

Specialized in developing Intelligent Smartphone Applications

Get the Medium app

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