Amazon Cognito Auth SDK for JavaScript

You can now use Amazon Cognito Auth to easily add sign-in and sign-out to your mobile and web apps. Your user pool in Amazon Cognito is a fully managed user directory that can scale to hundreds of millions of users, so you don't have to worry about building, securing, and scaling a solution to handle user management and authentication.

For more information about this new feature, see Amazon Cognito User Pools App Integration and Federation GA Release.

We welcome developer feedback on this project. You can reach us by creating an issue on the GitHub repository or posting to the Amazon Cognito Identity forums:

• https://github.com/aws/amazon-cognito-auth-js
• https://forums.aws.amazon.com/forum.jspa?forumID=173

Introduction

The Amazon Cognito Auth SDK for JavaScript simplifies adding sign-up, sign-in with user profile functionality to web apps.

Instead of implementing a UI for sign-up and sign-in, this SDK provides the UI via a hosted page. It supports sign-up, sign-in, confirmation, multifactor authentication, and sign-out.

Setup

The Amazon Cognito Auth SDK for JavaScript depends on: The CognitoIdentityServiceProvider service from the AWS SDK for JavaScript

There are two ways to install the Amazon Cognito Auth SDK for JavaScript and its dependencies, depending on your project setup and experience with modern JavaScript build tools:

• Download the JavaScript libraries and include them in your HTML, or

• Install the dependencies with npm and use a bundler like webpack.

Install using separate JavaScript files

This method is simpler and does not require additional tools, but may have worse performance due to the browser having to download multiple files.

Download each of the following JavaScript files for the required libraries and place them in your project:

1. The Amazon Cognito AWS SDK for JavaScript, from /dist/aws-cognito-sdk.min.js

   Note that the Amazon Cognito AWS SDK for JavaScript is just a slimmed down version of the AWS Javascript SDK namespaced as AWSCognito instead of AWS. It references only the Amazon Cognito Identity service.

2. The Amazon Cognito Auth SDK for JavaScript, from /dist/amazon-cognito-auth.min.js

Optionally, to use other AWS services, include a build of the AWS SDK for JavaScript.

Include all of the files in your HTML page before calling any Amazon Cognito Auth SDK APIs:

<script src="/path/to/aws-cognito-sdk.min.js"></script>
<script src="/path/to/amazon-cognito-auth.min.js"></script>
<!-- optional: only if you use other AWS services -->
<script src="/path/to/aws-sdk-2.6.10.js"></script>

Using NPM and Webpack

The following is a quick setup guide with specific notes for using the Amazon Cognito Auth SDK for JavaScript with Webpack, but there are many more ways it can be used. See the Webpack site, and in particular the configuration documentation

Note that webpack expects your source files to be structured as CommonJS (Node.js-style) modules (or ECMAScript 2015 modules if you are using a transpiler such as Babel.) If your project is not already using modules you may wish to use Webpack's module shimming features to ease migration.

• Install Node.js on your development machine (this will not be needed on your server.)
• In your project add a package.json, either use npm init or the minimal, which means your repository is private:

{
"private" : true
}

• Install the Amazon Cognito Auth SDK for JavaScript and the Webpack tool into your project with npm (the Node Package Manager, which is installed with Node.js):

> npm install --save-dev webpack json-loader
> npm install --save amazon-cognito-auth-js

• Create the configuration file for webpack, named webpack.config.js:

module.exports = {
  // Example setup for your project:
  // The entry module that requires or imports the rest of your project.
  // Must start with `./`!
  entry: './src/entry',
  // Place output files in `./dist/my-app.js`
  output: {
    path: 'dist',
    filename: 'my-app.js'
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json'
      }
    ]
  }
};

• Add the following into your package.json

{
  "scripts": {
    "build": "webpack"
  }
}

• Build your application bundle with npm run build

Configuration

The Amazon Cognito Auth SDK for JavaScript requires three configuration values from your AWS Account in order to access your Cognito User Pool:

• An User Pool App Client Id, e.g. <TODO: add ClientId>
  • When creating the App, the generate client secret box must be unchecked because the JavaScript SDK doesn't support apps that have a client secret.
• An App Web Domain, e.g. <TODO: add App Web Domain>
  • When you click the Domain name tab, you can create a domain name there and save it for record.
• Scope Array, e.g. <TODO: add scope array>
  • When you click the App settings tab, you can select the identity provider which you want to use on your App.
  • In the sign in and sign out URLs tab, you can set the Callback URLs and Sign out URLs.
  • Under the OAuth2.0 tab, you can select the OAuth flows and scopes enabled for this app.

The AWS Console for Cognito User Pools can be used to get or create these values.

Note that the various errors returned by the service are valid JSON so one can access the different exception types (err.code) and status codes (err.statusCode).

Usage

The usage examples below use the unqualified names for types in the Amazon Cognito Auth SDK for JavaScript. Remember to import or qualify access to any of these types:

// When using loose Javascript files:
var CognitoAuth = AmazonCognitoIdentity.CognitoAuth;

// Under the original name:
var CognitoAuth = AWSCognito.CognitoIdentityServiceProvider.CognitoAuth;

// Modules, e.g. Webpack:
var AmazonCognitoIdentity = require('amazon-cognito-auth-js');
var CognitoAuth = AmazonCognitoIdentity.CognitoAuth;

// ES Modules, e.g. transpiling with Babel
import {CognitoAuth} from 'amazon-cognito-auth-js';

Use case 1. Registering an auth with the application. You need to create a CognitoAuth object by providing a App client ID, a App web domain, a scope array, a sign-in redirect URL, and a sign-out redirect URL:

var authData = {
	ClientId : '<TODO: add ClientId>', // Your client id here
	AppWebDomain : '<TODO: add App Web Domain>',
	TokenScopesArray : '<TODO: add scope array>',
	RedirectUriSignIn : '<TODO: add redirect url when signed in>',
	RedirectUriSignOut : '<TODO: add redirect url when signed out>'
};
var auth = new AWSCognito.CognitoIdentityServiceProvider.CognitoAuth(authData);

Also you can provide onSuccess callback and onFailure callback:

auth.userhandler = {
	onSuccess: function(result) {
		alert("Sign in success");
		showSignedIn(result);
	},
	onFailure: function(err) {
		alert("Error!");
	}
};

Use case 2. Sign-in using getSession() API:

auth.getSession();

For the cache tokens and scopes, use the parseCognitoWebResponse(Response) API, e.g. the response is the current window url:

var curUrl = window.location.href;
auth.parseCognitoWebResponse(curUrl);

Typically, you can put this part of logic in the onLoad(), e.g.:

function onLoad() {
	var auth = initCognitoSDK();
	var curUrl = window.location.href;
	auth.parseCognitoWebResponse(curUrl);
}

Use case 3. Sign-out using signOut():

auth.signOut();

Change Log

v1.0.0

• GA release. In this GA service launch, we made this feature generally available.

v0.9.0:

• Public beta release. Developer preview.