Cognito - Js Auth Sdk

> AWS (Amazon Web Services) > Aws - Cognito

1 - About

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)

Advertising

3 - Steps to set up the sample app

3.1 - Clone the sample app

git clone https://github.com/aws/amazon-cognito-auth-js.git

3.2 - Add the library to the home page

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

3.3 - Start the website and make it public

cd sample
browser-sync start --server --files "*.html, stylesheets/*.css"
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://172.23.220.49: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                 http://127.0.0.1:4040
Forwarding                    http://6ab83b76.ngrok.io -> localhost:3000
Forwarding                    https://6ab83b76.ngrok.io -> localhost:3000
Advertising

3.4 - 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.

3.5 - 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 : 'appname.auth.eu-central-1.amazoncognito.com', // Exclude the "https://" part.
		TokenScopesArray : ['openid','email'], // like ['openid','email','phone']...
		RedirectUriSignIn : 'https://6ab83b76.ngrok.io',
		RedirectUriSignOut : 'https://6ab83b76.ngrok.io',
		//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");
			showSignedIn(result);
		},
		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;
}
Advertising

3.6 - Test the sign up flow

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

3.6.1 - Sign-in

Cognito - Sign-in with the auth library.

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

3.6.2 - Sign-up

Cognito - Sign-Up

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

3.6.3 - 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

3.6.4 - Sign-in 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
idToken.json
{
  "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": "https://cognito-idp.eu-central-1.amazonaws.com/eu-central-1_5hqUgIUFV",
  "cognito:username": "gerardnico",
  "exp": 1555442697,
  "iat": 1555439097,
  "email": "[email protected]"
}
accToken.json
{
  "sub": "f92bbe67-8268-4340-9b6e-560ef0b41360",
  "event_id": "efecb19c-6074-11e9-8441-fd78254b71e5",
  "token_use": "access",
  "scope": "openid email",
  "auth_time": 1555439097,
  "iss": "https://cognito-idp.eu-central-1.amazonaws.com/eu-central-1_5hqUgIUFV",
  "exp": 1555442697,
  "iat": 1555439097,
  "version": 2,
  "jti": "8570b1f8-d542-4695-983f-5be0810947bd",
  "client_id": "30maerkn4hp0qiabalprvn6r84",
  "username": "gerardnico"
}

3.6.5 - Sign-out

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();
auth.signOut();

3.6.6 - 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
YourVerificationCode
Your password reset code is 824061
aws/cognito/js_auth.txt · Last modified: 2019/06/05 14:22 by gerardnico