Cognito - Js Auth Sdk


This page is about the Cognito Javascript Auth SDK (Amazon Cognito Auth SDK)

It leverages the built-in hosted UI webpages:

For the Js identity Sdk (the core user pools library) to interact with the user management and authentication functions in the Amazon Cognito User Pools API, see Cognito - Javascript Identity Sdk (amazon-cognito-identity-js)

Steps to set up the sample app

Clone the sample app

git clone

Add the library to the home page

  • Copy the Javascript into the sample web site
cd amazon-cognito-auth-js
cp dist sample/dist
  • Add in the index.html page the auth library via the script tag
  <script src="dist/amazon-cognito-auth.min.js"></script>

Start the website and make it public

cd sample
browser-sync start --server --files "*.html, stylesheets/*.css"
[Browsersync] Access URLs:
       Local: http://localhost:3000
          UI: http://localhost:3001
 UI External: http://localhost:3001
ngrok http 3000
ngrok by @inconshreveable                                                                               (Ctrl+C to quit)

Session Status                online
Session Expires               5 hours, 15 minutes
Update                        update available (version 2.3.25, Ctrl-U to update)
Version                       2.2.8
Region                        United States (us)
Web Interface       
Forwarding           -> localhost:3000
Forwarding           -> localhost:3000

Create and configure a user pool and an app

  • Create a user pool and retrieve:
    • the UserPoolId
    • the ClientId
  • Set the app client settings and set:
    • the callbackURL to the ngrok domain name. It will be the RedirectUriSignIn property in the configuration
    • the scope to email and openid. They will be given in the TokenScopesArray property in the configuration
    • the flow to implicit. See OAuth - Implicit Grant and flow

  • Create a domain name. This will be the AppWebDomain property in the configuration. The auth forms will be served from this address.

Modify the javascript configuration in the app

  • Modify the function initCognitoSDK inside the html page.
function initCognitoSDK() {
	var authData = {
		UserPoolId : 'eu-central-1_5hqUgIUFV',
		ClientId : '30maerkn4hp0qiabalprvn6r84', // Your client id here
		AppWebDomain : '', // Exclude the "https://" part.
		TokenScopesArray : ['openid','email'], // like ['openid','email','phone']...
		RedirectUriSignIn : '',
		RedirectUriSignOut : '',
		//IdentityProvider : '<TODO: your identity provider you want to specify here>',
		AdvancedSecurityDataCollectionFlag : false
	var auth = new AmazonCognitoIdentity.CognitoAuth(authData);
	// You can also set state parameter 
	// auth.setState(<state parameter>);  
	auth.userhandler = {
		// onSuccess: <TODO: your onSuccess callback here>,
		// onFailure: <TODO: your onFailure callback here>
		onSuccess: function(result) {
			alert("Sign in success");
		onFailure: function(err) {
			alert("Error!" + err);
	// The default response_type is "token", uncomment the next line will make it be "code".
	// auth.useCodeGrantFlow();
	return auth;

Test the sign up flow

  • Go to the Web Page and click on the sign in button


Cognito - Sign-in with the auth library.

The sign in form appears and uses the cognito sign-in javascript


Cognito - Sign-Up

  • By clicking on the sign up link, the sign up forms appears

Verification code

  • After submitting, the sign up form, you get the verification code form

  • In the mail, you have got an email with the verification code

succesful

  • After filling the verification code, the call back page is called and you get a success login

  • You get also session tokens:
    • an id token
    • an access token
    • a refresh token
  "at_hash": "LCOYoIXwinXqU1SkkhNCCw",
  "sub": "f92bbe67-8268-4340-9b6e-560ef0b41360",
  "aud": "30maerkn4hp0qiabalprvn6r84",
  "email_verified": true,
  "event_id": "efecb19c-6074-11e9-8441-fd78254b71e5",
  "token_use": "id",
  "auth_time": 1555439097,
  "iss": "",
  "cognito:username": "gerardnico",
  "exp": 1555442697,
  "iat": 1555439097,
  "email": "[email protected]"
  "sub": "f92bbe67-8268-4340-9b6e-560ef0b41360",
  "event_id": "efecb19c-6074-11e9-8441-fd78254b71e5",
  "token_use": "access",
  "scope": "openid email",
  "auth_time": 1555439097,
  "iss": "",
  "exp": 1555442697,
  "iat": 1555439097,
  "version": 2,
  "jti": "8570b1f8-d542-4695-983f-5be0810947bd",
  "client_id": "30maerkn4hp0qiabalprvn6r84",
  "username": "gerardnico"


The sign-in button becomes a sign-out button after sucessfull sign-in. It will just execute a sign-out on the CognitoAuth object

var auth = initCognitoSDK();

Password Reset

From the sign-in, you get a Password reset link.

  • You must give your username

  • You get reset password form

  • You get the code by mail
Your password reset code is 824061

Powered by ComboStrap