fix: add module loader for web browser native module (#12519)

Co-authored-by: Ashwin Kumar <[email protected]>

packages/auth/__tests__/utils/openAuthSession.native.test.ts

@@ -2,20 +2,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { openAuthSession } from '../../src/utils/openAuthSession.native';
-import { AmplifyRTNWebBrowser } from '@aws-amplify/rtn-web-browser';
 
-jest.mock('@aws-amplify/rtn-web-browser', () => ({
-	AmplifyRTNWebBrowser: {
-		openAuthSessionAsync: jest.fn(),
-	},
+jest.mock('@aws-amplify/react-native', () => ({
+	loadAmplifyWebBrowser: jest.fn(() => ({
+		openAuthSessionAsync: mockOpenAuthSessionAsync,
+	})),
 }));
 
+// module level mocks
+const mockOpenAuthSessionAsync = jest.fn();
+
 describe('openAuthSession (native)', () => {
 	const url = 'https://example.com';
 	const redirectUrl = 'scheme://oauth/';
-	// create mocks
-	const mockOpenAuthSessionAsync =
-		AmplifyRTNWebBrowser.openAuthSessionAsync as jest.Mock;
 
 	afterEach(() => {
 		mockOpenAuthSessionAsync.mockReset();

packages/auth/src/utils/openAuthSession.native.ts

@@ -1,32 +1,16 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import {
-	AmplifyWebBrowser,
-	OpenAuthSession,
-	OpenAuthSessionResult,
-} from './types';
-
-const RTN_MODULE = '@aws-amplify/rtn-web-browser';
-
-let webBrowser: AmplifyWebBrowser;
-
-try {
-	webBrowser = require(RTN_MODULE)?.AmplifyRTNWebBrowser;
-	if (!webBrowser) {
-		throw new Error();
-	}
-} catch (err) {
-	throw new Error(`Unable to find ${RTN_MODULE}. Did you install it?`);
-}
+import { loadAmplifyWebBrowser } from '@aws-amplify/react-native';
+import { OpenAuthSession, OpenAuthSessionResult } from './types';
 
 export const openAuthSession: OpenAuthSession = async (
 	url: string,
 	redirectUrls: string[],
 	prefersEphemeralSession?: boolean
 ): Promise<OpenAuthSessionResult> => {
 	try {
-		const redirectUrl = await webBrowser.openAuthSessionAsync(
+		const redirectUrl = await loadAmplifyWebBrowser().openAuthSessionAsync(
 			url,
 			redirectUrls,
 			prefersEphemeralSession

packages/react-native/src/index.ts

@@ -4,6 +4,7 @@
 export { computeModPow, computeS, getOperatingSystem } from './apis';
 export {
 	loadAmplifyPushNotification,
+	loadAmplifyWebBrowser,
 	loadAsyncStorage,
 	loadNetInfo,
 	loadBuffer,

packages/react-native/src/moduleLoaders/index.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export { loadAmplifyPushNotification } from './loadAmplifyPushNotification';
+export { loadAmplifyWebBrowser } from './loadAmplifyWebBrowser';
 export { loadAsyncStorage } from './loadAsyncStorage';
 export { loadNetInfo } from './loadNetInfo';
 export { loadBuffer } from './loadBuffer';

packages/react-native/src/moduleLoaders/loadAmplifyWebBrowser.ts

@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WebBrowserModule } from '@aws-amplify/rtn-web-browser';
+
+export const loadAmplifyWebBrowser = () => {
+	try {
+		// metro bundler requires static string for loading module.
+		// See: https://facebook.github.io/metro/docs/configuration/#dynamicdepsinpackages
+		const module = require('@aws-amplify/rtn-web-browser')
+			?.module as WebBrowserModule;
+		if (module) {
+			return module;
+		}
+
+		throw new Error(
+			'Ensure `@aws-amplify/rtn-web-browser` is installed and linked.'
+		);
+	} catch (e) {
+		// The error parsing logic cannot be extracted with metro as the `require`
+		// would be confused when there is a `import` in the same file importing
+		// another module and that causes an error
+		const message = (e as Error).message.replace(
+			/undefined/g,
+			'@aws-amplify/rtn-web-browser'
+		);
+		throw new Error(message);
+	}
+};

packages/rtn-web-browser/src/apis/index.ts

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+export { openAuthSessionAsync } from './openAuthSessionAsync';

packages/rtn-web-browser/src/constants.ts

@@ -0,0 +1,11 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { Platform } from 'react-native';
+
+// General
+export const PACKAGE_NAME = '@aws-amplify/rtn-web-browser';
+export const LINKING_ERROR =
+	`The ${PACKAGE_NAME} package doesn't seem to be linked. Make sure: \n\n` +
+	Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+	'- You rebuilt the app after installing the package\n' +
+	'- You are not using Expo Go\n';

packages/rtn-web-browser/src/index.ts

@@ -1,12 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { openAuthSessionAsync } from './apis/openAuthSessionAsync';
-import { nativeModule } from './nativeModule';
+import { openAuthSessionAsync } from './apis';
 
-const mergedModule = {
-	...nativeModule,
-	openAuthSessionAsync,
-};
+const module = { openAuthSessionAsync };
 
-export { mergedModule as AmplifyRTNWebBrowser };
+export type WebBrowserModule = typeof module;
+export { module };

packages/rtn-web-browser/src/nativeModule.ts

@@ -1,15 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { NativeModules, Platform } from 'react-native';
+import { NativeModules, NativeEventEmitter } from 'react-native';
+import { LINKING_ERROR } from './constants';
 import { WebBrowserNativeModule } from './types';
 
-const LINKING_ERROR =
-	`The package '@aws-amplify/rtn-web-browser' doesn't seem to be linked. Make sure: \n\n` +
-	Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
-	'- You rebuilt the app after installing the package\n' +
-	'- You are not using Expo Go\n';
-
 export const nativeModule: WebBrowserNativeModule =
 	NativeModules.AmplifyRTNWebBrowser
 		? NativeModules.AmplifyRTNWebBrowser
@@ -21,3 +16,5 @@ export const nativeModule: WebBrowserNativeModule =
 					},
 				}
 		  );
+
+export const nativeEventEmitter = new NativeEventEmitter(nativeModule);

packages/rtn-web-browser/src/types/index.ts

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './native';

packages/rtn-web-browser/src/types.ts → packages/rtn-web-browser/src/types/native.ts

@@ -1,10 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-export type WebBrowserNativeModule = {
+import { NativeModule } from 'react-native';
+
+export interface WebBrowserNativeModule extends NativeModule {
 	openAuthSessionAsync: (
 		url: string,
 		redirectUrl?: string,
 		prefersEphemeralSession?: boolean
 	) => Promise<string | null>;
-};
+}