Cognito - Js Auth Sdk

Card Puncher Data Processing


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

Cognito Js Auth App Client Settings

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

Cognito Js Auth App Cognito Domain

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 Js Auth Home Page


Cognito - Sign-in with the auth library.

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

Cognito Js Auth Sign In


Cognito - Sign-Up

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

Cognito Js Auth Sign Up

Verification code

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

Cognito Js Auth Verification Code

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

Cognito Js Auth Verification Code Email

succesful

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

Cognito Js Auth Sign In Success

  • 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

Cognito Js Auth Reset Password Username

  • You get reset password form

Cognito Js Auth Reset Password Code

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

Discover More
Card Puncher Data Processing
Cognito - Javascript Identity Sdk (amazon-cognito-identity-js)

The Cognito Javascript Sdk is one of the Cognito Sdk amplify SDK the auth amplify library Before: aws/amazon-cognito-identity-js. After: aws-amplify/amplify-js/tree/master/packages/amazon-cognito-identity-js...
Card Puncher Data Processing
Cognito - Sdk

AWS javascript SDK in the context of Cognito When reading Amazon Cognito documentation, a reminder that Cognito API offers two type of functions: The core library (that enable to interact with the...
Cognito Js Auth Sign Up
Cognito - Sign-Up

aws amplify sign-up The Auth.signUp promise returns a data object of type ISignUpResult with a CognitoUser. The hosted sign up forms of...
Cognito Js Auth Sign In
Cognito - Sign-in

The sign-in state After users have a confirmed account, they will be able to sign in: They gives their username (or email) and password. On internet,: a JavaScript function then communicates with...
Card Puncher Data Processing
Cognito - UI

UI forms in Cognito To reduce the operational overhead of creating and maintaining forms and custom logic for authentication, Cognito has a hosted-UI that leverages pages for: sign-up, sign-in,...

Share this page:
Follow us:
Task Runner