Fix CJS builds and rename 'WebViewController' to 'ReactNativeWebViewC…

…ontroller'

.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+react-native.js
+react-native.d.ts

config/tsconfig.base.json

@@ -18,8 +18,6 @@
  "declaration": true,
  },
  "include": [
- "../react-native.js",
- "../react-native.d.ts",
  "../src/**/*.ts",
  "../src/**/*.tsx",
  "../test/**/*.ts",

package.json

@@ -9,7 +9,7 @@
  "url": "https://github.com/fortmatic/magic-js"
  },
  "homepage": "https://www.fortmatic.com",
- "main": "dist/cjs/magic.js",
+ "main": "dist/cjs/index.js",
  "types": "dist/cjs/index.cjs.d.ts",
  "scripts": {
  "start": "yarn run clean:build && ./scripts/start.sh",

src/constants/config.ts

@@ -1,4 +1,4 @@
-export const MAGIC_URL = process.env.MAGIC_URL || 'https://auth.magic.link/';
 export const IS_REACT_NATIVE = Boolean(process.env.IS_REACT_NATIVE);
+export const MAGIC_URL = IS_REACT_NATIVE ? 'https://mgbox.io/' : process.env.MAGIC_URL || 'https://auth.magic.link/';
 export const SDK_NAME = process.env.SDK_NAME!;
 export const SDK_VERSION = process.env.SDK_VERSION!;

src/core/payload-transport.ts

@@ -1,4 +1,4 @@
-import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { WebViewMessageEvent } from 'react-native-webview';
 import {
  MagicIncomingWindowMessage,
  MagicOutgoingWindowMessage,
@@ -9,7 +9,7 @@ import { IframeController } from './views/iframe-controller';
 import { JsonRpcResponse } from './json-rpc';
 import { createModalNotReadyError } from './sdk-exceptions';
 import { ViewController } from '../types/core/view-types';
-import { WebViewController } from './views/webview-controller';
+import { ReactNativeWebViewController } from './views/react-native-webview-controller';
 import { IS_REACT_NATIVE } from '../constants/config';
 
 interface RemoveEventListenerFunction {
@@ -98,7 +98,7 @@ export class PayloadTransport {
  ): Promise<JsonRpcResponse<ResultType> | JsonRpcResponse<ResultType>[]> {
  await overlay.ready;
  const iframe = overlay instanceof IframeController ? await overlay.iframe : null;
- const webView = overlay instanceof WebViewController ? overlay.webView : null;
+ const webView = overlay instanceof ReactNativeWebViewController ? overlay.webView : null;
 
  return new Promise((resolve, reject) => {
  const isViewReady = IS_REACT_NATIVE ? !!webView : iframe && iframe.contentWindow;
@@ -171,7 +171,10 @@ export class PayloadTransport {
  return () => this.messageHandlers.delete(listener);
  }
 
- public handleWebViewMessage(event: WebViewMessageEvent) {
+ /**
+ * Route incoming messages from a React Native `<WebView>`.
+ */
+ public handleReactNativeWebViewMessage(event: WebViewMessageEvent) {
  if (
  event.nativeEvent &&
  event.nativeEvent.url === `${this.endpoint}/send/?params=${this.encodedQueryParams}` &&

src/core/sdk.ts

@@ -10,7 +10,7 @@ import { MAGIC_URL, SDK_NAME, SDK_VERSION, IS_REACT_NATIVE } from '../constants/
 import { MagicSDKAdditionalConfiguration } from '../types';
 import { RPCProviderModule } from '../modules/rpc-provider';
 import { ViewController } from '../types/core/view-types';
-import { WebViewController } from './views/webview-controller';
+import { ReactNativeWebViewController } from './views/react-native-webview-controller';
 
 export class MagicSDK {
  private static readonly __transports__: Map<string, PayloadTransport> = new Map();
@@ -42,7 +42,7 @@ export class MagicSDK {
  constructor(public readonly apiKey: string, options?: MagicSDKAdditionalConfiguration) {
  if (!apiKey) throw createMissingApiKeyError();
 
- this.endpoint = new URL(options?.endpoint ?? MAGIC_URL).origin;
+ this.endpoint = IS_REACT_NATIVE ? 'https://mgbox.io/' : new URL(options?.endpoint ?? MAGIC_URL).origin;
  this.encodedQueryParams = encodeQueryParameters({
  API_KEY: this.apiKey,
  DOMAIN_ORIGIN: window.location ? window.location.origin : '',
@@ -107,7 +107,7 @@ export class MagicSDK {
 }
 
 export class MagicSDKReactNative extends MagicSDK {
- public get Render() {
- return (this.overlay as WebViewController).init;
+ public get Modal() {
+ return (this.overlay as ReactNativeWebViewController).Modal;
  }
 }

src/core/views/iframe-controller.ts

@@ -61,7 +61,7 @@ export class IframeController {
  }
 
  /**
- * Initialize the Magic `<iframe>` and pre-load overlay content when DOM
+ * Initialize the Magic `<iframe>` and pre-load overlay content when the DOM
  * is ready.
  */
  private init(): Promise<HTMLIFrameElement> {
@@ -80,7 +80,7 @@ export class IframeController {
  }
  };
 
- // Check Dom state and load...
+ // Check DOM state and load...
  if (['loaded', 'interactive', 'complete'].includes(document.readyState)) {
  onload();
  } else {

src/core/views/react-native-webview-controller.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { MagicIncomingWindowMessage } from '../../types';
+import { PayloadTransport } from '../payload-transport';
+
+/*
+
+ IMPORTANT NOTE:
+ ~~~~~~~~~~~~~~
+
+ Do not reference any React dependencies at the top-level of this file! Only
+ use these dependencies within a closure (such as the body of a class method or
+ function). We completely remove React dependencies from CJS and CDN bundles,
+ so referencing these imports will raise a `TypeError`.
+
+ */
+
+/**
+ * Builds the Magic `<WebView>` overlay styles. These base styles enable
+ * `<WebView>` UI to render above all other DOM content.
+ */
+function createWebViewStyles() {
+ return StyleSheet.create({
+ 'magic-webview': {
+ flex: 1,
+ backgroundColor: 'transparent',
+ },
+
+ 'webview-container': {
+ flex: 1,
+ width: '100%',
+ backgroundColor: 'transparent',
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ },
+
+ show: {
+ zIndex: 10000,
+ },
+
+ hide: {
+ zIndex: -10000,
+ },
+ });
+}
+
+/**
+ * Overloads React Native's `<View>` with helper methods we require to hide/show
+ * the rendered `<WebView>`.
+ */
+interface ViewWrapper extends Partial<View> {
+ showOverlay: () => void;
+ hideOverlay: () => void;
+}
+
+/**
+ * View controller for the Magic `<WebView>` overlay.
+ */
+export class ReactNativeWebViewController {
+ public webView: WebView | null;
+ private container: ViewWrapper | null;
+ public ready: Promise<void>;
+ private styles: ReturnType<typeof StyleSheet.create>;
+
+ constructor(
+ private readonly transport: PayloadTransport,
+ private readonly endpoint: string,
+ private readonly encodedQueryParams: string,
+ ) {
+ this.webView = null;
+ this.container = null;
+ this.ready = this.waitForReady();
+ this.styles = createWebViewStyles();
+ this.listen();
+ }
+
+ /**
+ * Renders a React Native `<WebView>` with built-in message handling to and
+ * from the Magic `<iframe>` context.
+ */
+ public Modal: React.FC = () => {
+ const [show, setShow] = useState(false);
+
+ /**
+ * Saves a reference to the underlying `<WebView>` node so we can interact
+ * with incoming messages.
+ */
+ const webViewRef = useCallback((webView: WebView): void => {
+ this.webView = webView;
+ }, []);
+
+ /**
+ * Saves a reference to the underlying `<View>` node so we can interact with
+ * display styles.
+ */
+ const containerRef = useCallback((view: View): void => {
+ this.container = {
+ ...view,
+ showOverlay,
+ hideOverlay,
+ };
+ }, []);
+
+ /**
+ * Show the Magic `<WebView>` overlay.
+ */
+ const showOverlay = useCallback(() => {
+ setShow(true);
+ }, []);
+
+ /**
+ * Hide the Magic `<WebView>` overlay.
+ */
+ const hideOverlay = useCallback(() => {
+ setShow(false);
+ }, []);
+
+ const containerStyles = useMemo(() => {
+ return [this.styles['webview-container'], show ? this.styles.show : this.styles.hide];
+ }, [show]);
+
+ const handleWebViewMessage = useCallback((event: WebViewMessageEvent) => {
+ this.transport.handleReactNativeWebViewMessage(event);
+ }, []);
+
+ return (
+ <View ref={containerRef} style={containerStyles}>
+ <WebView
+ ref={webViewRef}
+ source={{ uri: `${this.endpoint}/send/?params=${this.encodedQueryParams}` }}
+ onMessage={handleWebViewMessage}
+ style={this.styles['magic-webview']}
+ />
+ </View>
+ );
+ };
+
+ /**
+ * Set the controller as "ready" for JSON RPC events.
+ */
+ private waitForReady() {
+ return new Promise<void>(resolve => {
+ this.transport.on(MagicIncomingWindowMessage.MAGIC_OVERLAY_READY, () => resolve());
+ });
+ }
+
+ /**
+ * Listen for messages sent from the underlying Magic `<WebView>`.
+ */
+ private listen() {
+ this.transport.on(MagicIncomingWindowMessage.MAGIC_HIDE_OVERLAY, () => {
+ return this.container?.hideOverlay();
+ });
+
+ this.transport.on(MagicIncomingWindowMessage.MAGIC_SHOW_OVERLAY, () => {
+ return this.container?.showOverlay();
+ });
+ }
+}