feat(SSR): withSSRContext (aws-amplify#6146)

Co-authored-by: Sam Martinez <samlmar@amazon.com>
Co-authored-by: Ivan Artemiev <29709626+iartemiev@users.noreply.github.com>

package.json

@@ -12,6 +12,7 @@
 		"coverage": "codecov || exit 0",
 		"docs": "typedoc packages/**/src --name amplify-js --hideGenerator --excludePrivate --ignoreCompilerErrors --mode file --out docs/api --theme docs/amplify-theme/typedoc/ --readme README.md",
 		"build": "lerna run build --stream",
+		"build:watch": "concurrently 'lerna run build:cjs:watch --parallel' 'lerna run build:esm:watch --parallel' --raw",
 		"build:esm:watch": "lerna run build:esm:watch --parallel",
 		"build:cjs:watch": "lerna run build:cjs:watch --parallel",
 		"clean": "lerna run clean --parallel",

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

@@ -43,10 +43,12 @@
   ],
   "scripts": {
     "clean": "rimraf lib es",
-    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
-    "build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
+    "build:cjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
+    "build:cjs:watch": "cross-env BABEL_ENV=commonjs babel src --out-dir lib --watch",
+    "build:esm": "cross-env BABEL_ENV=es babel src --out-dir es",
+    "build:esm:watch": "cross-env BABEL_ENV=es babel src --out-dir es --watch",
     "build:umd": "webpack",
-    "build": "npm run clean && npm run build:commonjs && npm run build:es && npm run build:umd",
+    "build": "npm run clean && npm run build:cjs && npm run build:esm && npm run build:umd",
     "doc": "jsdoc src -d docs",
     "lint": "eslint src",
     "lint2": "eslint enhance-rn.js",
@@ -64,6 +66,7 @@
   "dependencies": {
     "buffer": "4.9.1",
     "crypto-js": "^3.3.0",
+    "isomorphic-unfetch": "^3.0.0",
     "js-cookie": "^2.2.1"
   },
   "devDependencies": {

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

@@ -1,3 +1,5 @@
+import 'isomorphic-unfetch';
+
 import UserAgent from './UserAgent';
 
 class CognitoError extends Error {

packages/amplify-ui-angular/tsconfig.json

@@ -8,6 +8,7 @@
 		"fullTemplateTypeCheck": false
 	},
 	"compilerOptions": {
+		"skipLibCheck": true,
 		"alwaysStrict": true,
 		"strict": true,
 		"allowSyntheticDefaultImports": true,

packages/amplify-ui-components/package.json

@@ -30,6 +30,7 @@
     "storybook": "concurrently 'start-storybook -p 3000 -s ./www' 'yarn:stencil:watch' --raw",
     "build-with-test": "npm run clean && npm test && npm run stencil",
     "build": "npm run clean && npm run stencil --ci",
+    "build:esm:watch": "npm run clean && npm run stencil:watch",
     "build:watch": "npm run clean && npm run stencil:watch",
     "clean": "rimraf dist .stencil"
   },
@@ -38,6 +39,8 @@
     "uuid": "^8.2.0"
   },
   "devDependencies": {
+    "@aws-amplify/auth": "^3.3.6",
+    "@aws-amplify/core": "^3.4.7",
     "@stencil/angular-output-target": "^0.0.2",
     "@stencil/core": "1.15.0",
     "@stencil/eslint-plugin": "0.2.1",

packages/analytics/src/Analytics.ts

@@ -75,7 +75,6 @@ export class AnalyticsClass {
 		Hub.listen('auth', listener);
 		Hub.listen('storage', listener);
 		Hub.listen('analytics', listener);
-		Amplify.register(this);
 	}
 
 	public getModuleName() {
@@ -402,3 +401,4 @@ const sendEvents = () => {
 };
 
 export const Analytics = new AnalyticsClass();
+Amplify.register(Analytics);

packages/api-graphql/src/GraphQLAPI.ts

@@ -16,10 +16,11 @@ import { OperationDefinitionNode } from 'graphql/language';
 import { print } from 'graphql/language/printer';
 import { parse } from 'graphql/language/parser';
 import Observable from 'zen-observable-ts';
-import Amplify, {
+import {
+	Amplify,
 	ConsoleLogger as Logger,
-	Credentials,
 	Constants,
+	Credentials,
 	INTERNAL_AWS_APPSYNC_REALTIME_PUBSUB_PROVIDER,
 } from '@aws-amplify/core';
 import PubSub from '@aws-amplify/pubsub';
@@ -46,13 +47,16 @@ export class GraphQLAPIClass {
 	private _options;
 	private _api = null;
 
+	Auth = Auth;
+	Cache = Cache;
+	Credentials = Credentials;
+
 	/**
 	 * Initialize GraphQL API with AWS configuration
 	 * @param {Object} options - Configuration object for API
 	 */
 	constructor(options) {
 		this._options = options;
-		Amplify.register(this);
 		logger.debug('API Options', this._options);
 	}
 
@@ -100,6 +104,9 @@ export class GraphQLAPIClass {
 		logger.debug('create Rest instance');
 		if (this._options) {
 			this._api = new RestClient(this._options);
+			// Share instance Credentials with client for SSR
+			this._api.Credentials = this.Credentials;
+
 			return true;
 		} else {
 			return Promise.reject('API not configured');
@@ -132,7 +139,7 @@ export class GraphQLAPIClass {
 				}
 				break;
 			case 'OPENID_CONNECT':
-				const federatedInfo = await Cache.getItem('federatedInfo');
+				const federatedInfo = await this.Cache.getItem('federatedInfo');
 
 				if (!federatedInfo || !federatedInfo.token) {
 					throw new Error('No federated jwt');
@@ -142,7 +149,7 @@ export class GraphQLAPIClass {
 				};
 				break;
 			case 'AMAZON_COGNITO_USER_POOLS':
-				const session = await Auth.currentSession();
+				const session = await this.Auth.currentSession();
 				headers = {
 					Authorization: session.getAccessToken().getJwtToken(),
 				};
@@ -355,10 +362,10 @@ export class GraphQLAPIClass {
 	 * @private
 	 */
 	_ensureCredentials() {
-		return Credentials.get()
+		return this.Credentials.get()
 			.then(credentials => {
 				if (!credentials) return false;
-				const cred = Credentials.shear(credentials);
+				const cred = this.Credentials.shear(credentials);
 				logger.debug('set credentials for api', cred);
 
 				return true;
@@ -371,3 +378,4 @@ export class GraphQLAPIClass {
 }
 
 export const GraphQLAPI = new GraphQLAPIClass(null);
+Amplify.register(GraphQLAPI);

packages/api-rest/src/RestAPI.ts

@@ -11,7 +11,11 @@
  * and limitations under the License.
  */
 import { RestClient } from './RestClient';
-import Amplify, { ConsoleLogger as Logger } from '@aws-amplify/core';
+import {
+	Amplify,
+	ConsoleLogger as Logger,
+	Credentials,
+} from '@aws-amplify/core';
 import { ApiInfo } from './types';
 
 const logger = new Logger('RestAPI');
@@ -26,13 +30,14 @@ export class RestAPIClass {
 	private _options;
 	private _api: RestClient = null;
 
+	Credentials = Credentials;
+
 	/**
 	 * Initialize Rest API with AWS configuration
 	 * @param {Object} options - Configuration object for API
 	 */
 	constructor(options) {
 		this._options = options;
-		Amplify.register(this);
 		logger.debug('API Options', this._options);
 	}
 
@@ -96,6 +101,9 @@ export class RestAPIClass {
 	createInstance() {
 		logger.debug('create Rest API instance');
 		this._api = new RestClient(this._options);
+
+		// Share Amplify instance with client for SSR
+		this._api.Credentials = this.Credentials;
 		return true;
 	}
 
@@ -328,3 +336,4 @@ export class RestAPIClass {
 }
 
 export const RestAPI = new RestAPIClass(null);
+Amplify.register(RestAPI);

packages/api-rest/src/RestClient.ts

@@ -13,10 +13,10 @@
 
 import {
 	ConsoleLogger as Logger,
+	Credentials,
 	DateUtils,
 	Signer,
 	Platform,
-	Credentials,
 } from '@aws-amplify/core';
 
 import { apiOptions, ApiInfo } from './types';
@@ -60,6 +60,8 @@ export class RestClient {
 	 */
 	private _cancelTokenMap: WeakMap<any, CancelTokenSource> = null;
 
+	Credentials = Credentials;
+
 	/**
 	 * @param {RestClientOptions} [options] - Instance options
 	 */
@@ -181,7 +183,7 @@ export class RestClient {
 		}
 
 		// Signing the request in case there credentials are available
-		return Credentials.get().then(
+		return this.Credentials.get().then(
 			credentials => {
 				return this._signed({ ...params }, credentials, isAllResponse, {
 					region,

packages/api/src/API.ts

@@ -10,13 +10,19 @@
  * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
  * and limitations under the License.
  */
+import { Auth } from '@aws-amplify/auth';
+import Cache from '@aws-amplify/cache';
 import { RestAPIClass } from '@aws-amplify/api-rest';
 import {
 	GraphQLAPIClass,
 	GraphQLOptions,
 	GraphQLResult,
 } from '@aws-amplify/api-graphql';
-import { Amplify, ConsoleLogger as Logger } from '@aws-amplify/core';
+import {
+	Amplify,
+	ConsoleLogger as Logger,
+	Credentials,
+} from '@aws-amplify/core';
 import Observable from 'zen-observable-ts';
 
 const logger = new Logger('API');
@@ -34,6 +40,10 @@ export class APIClass {
 	private _restApi: RestAPIClass;
 	private _graphqlApi;
 
+	Auth = Auth;
+	Cache = Cache;
+	Credentials = Credentials;
+
 	/**
 	 * Initialize API with AWS configuration
 	 * @param {Object} options - Configuration object for API
@@ -42,7 +52,6 @@ export class APIClass {
 		this._options = options;
 		this._restApi = new RestAPIClass(options);
 		this._graphqlApi = new GraphQLAPIClass(options);
-		Amplify.register(this);
 		logger.debug('API Options', this._options);
 	}
 
@@ -57,6 +66,14 @@ export class APIClass {
 	 */
 	configure(options) {
 		this._options = Object.assign({}, this._options, options);
+
+		// Share Amplify instance with client for SSR
+		this._restApi.Credentials = this.Credentials;
+
+		this._graphqlApi.Auth = this.Auth;
+		this._graphqlApi.Cache = this.Cache;
+		this._graphqlApi.Credentials = this.Credentials;
+
 		const restAPIConfig = this._restApi.configure(this._options);
 		const graphQLAPIConfig = this._graphqlApi.configure(this._options);
 
@@ -179,3 +196,4 @@ export class APIClass {
 }
 
 export const API = new APIClass(null);
+Amplify.register(API);