feat(@aws-amplify/ui-components): User agent tracking for UI componen…

…t packages (#4804)

* Update Cognito user agent inside of amplify-authenticator

* Move user agent set to configure, change append logic check

* UserAgent unit tests for cognito sdk

packages/amazon-cognito-identity-js/__tests__/UserAgent-test.js

@@ -0,0 +1,42 @@
+import UserAgent, { appendToCognitoUserAgent } from '../src/UserAgent';
+
+const DEFAULT_USER_AGENT = 'amazon-cognito-identity-js';
+
+describe('UserAgent test', () => {
+	beforeEach(() => {
+		UserAgent.prototype.userAgent = DEFAULT_USER_AGENT;
+	});
+	test('userAgent is set by default', () => {
+		expect(UserAgent.prototype.userAgent).toBe(DEFAULT_USER_AGENT);
+	});
+
+	test('appendToCognitoUserAgent does nothing to the userAgent if nothing is passed into it', () => {
+		appendToCognitoUserAgent();
+		expect(UserAgent.prototype.userAgent).toBe(DEFAULT_USER_AGENT);
+	});
+
+	test('appendToCognitoUserAgent appends content to userAgent', () => {
+		appendToCognitoUserAgent('test');
+		expect(UserAgent.prototype.userAgent).toBe(`${DEFAULT_USER_AGENT} test`);
+	});
+
+	test('appendToCognitoUserAgent does not append duplicate content', () => {
+		appendToCognitoUserAgent('test');
+		appendToCognitoUserAgent('test');
+		expect(UserAgent.prototype.userAgent).not.toBe(
+			`${DEFAULT_USER_AGENT} test test`
+		);
+
+		expect(UserAgent.prototype.userAgent).toBe(`${DEFAULT_USER_AGENT} test`);
+	});
+
+	test('appendToCognitoUserAgent sets userAgent if userAgent has no content', () => {
+		UserAgent.prototype.userAgent = '';
+		appendToCognitoUserAgent('test');
+		expect(UserAgent.prototype.userAgent).toBe('test');
+
+		UserAgent.prototype.userAgent = undefined;
+		appendToCognitoUserAgent('test');
+		expect(UserAgent.prototype.userAgent).toBe('test');
+	});
+});

packages/amazon-cognito-identity-js/package.json

@@ -88,5 +88,47 @@
     "react-native": "^0.44.0",
     "rimraf": "^2.5.4",
     "webpack": "^3.5.5"
+  },
+  "jest": {
+    "globals": {
+      "ts-jest": {
+        "diagnostics": false,
+        "tsConfig": {
+          "lib": [
+            "es5",
+            "es2015",
+            "dom",
+            "esnext.asynciterable",
+            "es2017.object"
+          ],
+          "allowJs": true
+        }
+      }
+    },
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "ts-jest"
+    },
+    "preset": "ts-jest",
+    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "json",
+      "jsx"
+    ],
+    "testEnvironment": "jsdom",
+    "testURL": "http://localhost/",
+    "coverageThreshold": {
+      "global": {
+        "branches": 0,
+        "functions": 0,
+        "lines": 0,
+        "statements": 0
+      }
+    },
+    "coveragePathIgnorePatterns": [
+      "/node_modules/"
+    ]
   }
 }

packages/amazon-cognito-identity-js/src/Client.js

@@ -8,7 +8,6 @@ export default class Client {
 	 */
 	constructor(region, endpoint) {
 		this.endpoint = endpoint || `https://cognito-idp.${region}.amazonaws.com/`;
-		this.userAgent = UserAgent.prototype.userAgent || 'aws-amplify/0.1.x js';
 	}
 
 	/**
@@ -23,7 +22,7 @@ export default class Client {
 		const headers = {
 			'Content-Type': 'application/x-amz-json-1.1',
 			'X-Amz-Target': `AWSCognitoIdentityProviderService.${operation}`,
-			'X-Amz-User-Agent': this.userAgent,
+			'X-Amz-User-Agent': UserAgent.prototype.userAgent,
 		};
 
 		const options = {

packages/amazon-cognito-identity-js/src/UserAgent.js

@@ -1,6 +1,26 @@
-// class for defining the amzn user-agent
-export default UserAgent;
+const DEFAULT_USER_AGENT = 'amazon-cognito-identity-js';
 // constructor
 function UserAgent() {}
 // public
-UserAgent.prototype.userAgent = 'aws-amplify/0.1.x js';
+UserAgent.prototype.userAgent = DEFAULT_USER_AGENT;
+
+export const appendToCognitoUserAgent = content => {
+	if (!content) {
+		return;
+	}
+	if (
+		UserAgent.prototype.userAgent &&
+		!UserAgent.prototype.userAgent.includes(content)
+	) {
+		UserAgent.prototype.userAgent = UserAgent.prototype.userAgent.concat(
+			' ',
+			content
+		);
+	}
+	if (!UserAgent.prototype.userAgent || UserAgent.prototype.userAgent === '') {
+		UserAgent.prototype.userAgent = content;
+	}
+};
+
+// class for defining the amzn user-agent
+export default UserAgent;

packages/amazon-cognito-identity-js/src/index.js

@@ -26,3 +26,4 @@ export { default as CognitoUserPool } from './CognitoUserPool';
 export { default as CognitoUserSession } from './CognitoUserSession';
 export { default as CookieStorage } from './CookieStorage';
 export { default as DateHelper } from './DateHelper';
+export { appendToCognitoUserAgent } from './UserAgent';

packages/amplify-ui-components/__tests__/__snapshots__/bundle-size.spec.js.snap

@@ -25,12 +25,12 @@ Object {
   "amplify-ui-components/p-c0fae6c3.js": "2 KB",
   "amplify-ui-components/p-d1csj4vs.entry.js": "1 KB",
   "amplify-ui-components/p-d447982c.js": "12 KB",
+  "amplify-ui-components/p-ddpnluaq.entry.js": "115 KB",
   "amplify-ui-components/p-ea249ef6.system.js": "21 KB",
-  "amplify-ui-components/p-emwljr8n.entry.js": "115 KB",
   "amplify-ui-components/p-f28d0f9c.js": "15 KB",
   "amplify-ui-components/p-qa19ycsj.system.entry.js": "2 KB",
-  "amplify-ui-components/p-uxv5ujph.system.entry.js": "143 KB",
   "amplify-ui-components/p-xpmjxplw.system.entry.js": "3 KB",
+  "amplify-ui-components/p-zpx5ky0w.system.entry.js": "143 KB",
   "cjs/amplify-amazon-button_45.cjs.entry.js": "248 KB",
   "cjs/amplify-checkbox.cjs.entry.js": "1 KB",
   "cjs/amplify-federated-sign-in.cjs.entry.js": "2 KB",
@@ -75,7 +75,7 @@ Object {
   "collection/components/amplify-examples/rock-paper-scissor/rock-paper-scissor.css": "69 Bytes",
   "collection/components/amplify-examples/rock-paper-scissor/rock-paper-scissor.js": "2 KB",
   "collection/components/amplify-examples/scene-example.js": "191 Bytes",
-  "collection/components/amplify-examples/src/aws-exports.js": "19 Bytes",
+  "collection/components/amplify-examples/src/aws-exports.js": "1 KB",
   "collection/components/amplify-facebook-button/amplify-facebook-button.js": "5 KB",
   "collection/components/amplify-federated-buttons/amplify-federated-buttons.js": "6 KB",
   "collection/components/amplify-federated-sign-in/amplify-federated-sign-in.js": "4 KB",

packages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx

@@ -1,7 +1,7 @@
 import { Component, State, Prop, h, Host } from '@stencil/core';
 import { AuthState, CognitoUserInterface, FederatedConfig } from '../../common/types/auth-types';
 import { NO_AUTH_MODULE_FOUND, SIGNING_IN_WITH_HOSTEDUI_KEY, AUTHENTICATOR_AUTHSTATE } from '../../common/constants';
-import { Auth } from '@aws-amplify/auth';
+import { Auth, appendToCognitoUserAgent } from '@aws-amplify/auth';
 import { Logger } from '@aws-amplify/core';
 
 const logger = new Logger('Authenticator');
@@ -21,6 +21,7 @@ export class AmplifyAuthenticator {
   @Prop() federated: FederatedConfig;
 
   async componentWillLoad() {
+    appendToCognitoUserAgent('amplify-ui');
     const byHostedUI = localStorage.getItem(SIGNING_IN_WITH_HOSTEDUI_KEY);
     localStorage.removeItem(SIGNING_IN_WITH_HOSTEDUI_KEY);
     if (byHostedUI !== 'true') await this.checkUser();

packages/amplify-ui-react/src/index.ts

@@ -1 +1 @@
-export * from './components';
+export * from './components';

packages/auth/src/Auth.ts

@@ -41,6 +41,7 @@ import {
 	ICredentials,
 	Parser,
 	JS,
+	Platform,
 } from '@aws-amplify/core';
 import {
 	CookieStorage,
@@ -58,6 +59,7 @@ import {
 	CognitoIdToken,
 	CognitoRefreshToken,
 	CognitoAccessToken,
+	appendToCognitoUserAgent,
 } from 'amazon-cognito-identity-js';
 
 import { parse } from 'url';
@@ -70,7 +72,7 @@ const logger = new Logger('AuthClass');
 const USER_ADMIN_SCOPE = 'aws.cognito.signin.user.admin';
 
 const AMPLIFY_SYMBOL = (typeof Symbol !== 'undefined' &&
-typeof Symbol.for === 'function'
+	typeof Symbol.for === 'function'
 	? Symbol.for('amplify_default')
 	: '@@amplify_default') as Symbol;
 
@@ -223,6 +225,8 @@ export class AuthClass {
 			});
 		}
 
+		appendToCognitoUserAgent(Platform.userAgent);
+
 		dispatchAuthEvent(
 			'configured',
 			null,
@@ -416,6 +420,7 @@ export class AuthClass {
 		if (!this.userPool) {
 			return this.rejectNoUserPool();
 		}
+
 		let username = null;
 		let password = null;
 		let validationData = {};
@@ -1159,7 +1164,7 @@ export class AuthClass {
 						} else {
 							logger.debug(
 								`Unable to get the user data because the ${USER_ADMIN_SCOPE} ` +
-									`is not in the scopes of the access token`
+								`is not in the scopes of the access token`
 							);
 							return res(user);
 						}
@@ -1210,7 +1215,7 @@ export class AuthClass {
 				if (e === 'No userPool') {
 					logger.error(
 						'Cannot get the current user because the user pool is missing. ' +
-							'Please make sure the Auth module is configured with a valid Cognito User Pool ID'
+						'Please make sure the Auth module is configured with a valid Cognito User Pool ID'
 					);
 				}
 				logger.debug('The user is not authenticated by the error', e);
@@ -1759,7 +1764,7 @@ export class AuthClass {
 					logger.warn(`There is already a signed in user: ${loggedInUser} in your app.
 																	You should not call Auth.federatedSignIn method again as it may cause unexpected behavior.`);
 				}
-			} catch (e) {}
+			} catch (e) { }
 
 			const { token, identity_id, expires_at } = response;
 			// Because Credentials.set would update the user info with identity id

packages/auth/src/index.ts

@@ -12,8 +12,8 @@
  */
 
 import { AuthClass, CognitoHostedUIIdentityProvider } from './Auth';
-import { CognitoUser, CookieStorage } from 'amazon-cognito-identity-js';
-import { Amplify, ConsoleLogger as Logger } from '@aws-amplify/core';
+import { CognitoUser, CookieStorage, appendToCognitoUserAgent } from 'amazon-cognito-identity-js';
+import { ConsoleLogger as Logger } from '@aws-amplify/core';
 
 const logger = new Logger('Auth');
 
@@ -36,4 +36,5 @@ export {
 	CognitoUser,
 	CookieStorage,
 	CognitoHostedUIIdentityProvider,
+	appendToCognitoUserAgent
 };

packages/core/src/Platform/index.ts

@@ -12,8 +12,11 @@
  */
 import { version } from './version';
 import { appendToUserAgent } from '@aws-sdk/util-user-agent-browser';
+
+const BASE_USER_AGENT = `aws-amplify/${version}`;
+
 export const Platform = {
-	userAgent: `aws-amplify/${version} js`,
+	userAgent: `${BASE_USER_AGENT} js`,
 	product: '',
 	navigator: null,
 	isReactNative: false,
@@ -23,11 +26,11 @@ if (typeof navigator !== 'undefined' && navigator.product) {
 	Platform.navigator = navigator || null;
 	switch (navigator.product) {
 		case 'ReactNative':
-			Platform.userAgent = `aws-amplify/${version} react-native`;
+			Platform.userAgent = `${BASE_USER_AGENT} react-native`;
 			Platform.isReactNative = true;
 			break;
 		default:
-			Platform.userAgent = `aws-amplify/${version} js`;
+			Platform.userAgent = `${BASE_USER_AGENT} js`;
 			Platform.isReactNative = false;
 			break;
 	}