diff --git a/.circleci/config.yml b/.circleci/config.yml index 20461d1ed..8c00bbbc8 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -7,6 +7,7 @@ aliases: [ # CircleCI workspace. &dependency-paths [ "node_modules", + "packages/commons/node_modules", "packages/provider/node_modules", "packages/react-native/node_modules", "packages/types/node_modules", @@ -16,6 +17,7 @@ aliases: [ # List of build output paths that should be persisted to the # CircleCI workspace. &build-output-paths [ + "packages/commons/dist", "packages/provider/dist", "packages/react-native/dist", "packages/types/dist", diff --git a/README.md b/README.md index e6b7b02b7..ca0db6c6f 100644 --- a/README.md +++ b/README.md @@ -13,16 +13,9 @@ See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes. -## ๐Ÿ“ฆ Package Ecosystem - -| Package directory | Package Name | Changelog | Description | -| ----------------- | ------------ | ------- | ----------- | -| [`/web`](./packages/web) | [`magic-sdk`](https://www.npmjs.com/package/magic-sdk) | [CHANGELOG](./packages/web/CHANGELOG.md) | Web/browser entry-point for Magic SDK. | -| [`/react-native`](./packages/react-native) | [`@magic-sdk/react-native`](https://www.npmjs.com/package/@magic-sdk/react-native) | [CHANGELOG](./packages/react-native/CHANGELOG.md) | React Native entry-point for Magic SDK. | -| [`/types`](./packages/types) | [`@magic-sdk/types`](https://www.npmjs.com/package/@magic-sdk/types) | [CHANGELOG](./packages/types/CHANGELOG.md) | Core typings shared between JavaScript entry-points of Magic SDK. | -| [`/provider`](./packages/provider) | [`@magic-sdk/provider`](https://www.npmjs.com/package/@magic-sdk/provider) | [CHANGELOG](./packages/provider/CHANGELOG.md) | Core business logic shared between JavaScript entry-points of Magic SDK. | +## โšก๏ธ Quick Start -## ๐Ÿ”— Installation +### Installation Integrating your app with Magic will require our client-side NPM package: @@ -42,7 +35,43 @@ Alternatively, you can load via CDN with by adding a script tag to your appโ€™s ``` -## ๐Ÿ”— Testing +### Usage + +Sign up or log in to the [developer dashboard](https://dashboard.magic.link) to receive API keys that will allow your application to interact with Magic's authentication APIs. + +Then, you can start authenticating users with _just one method!_ Magic works across all modern desktop, mobile Chrome, Safari and Firefox browsers. + +```ts +import { Magic } from 'magic-sdk'; + +const magic = new Magic('YOUR_API_KEY'); + +await magic.auth.loginWithMagicLink({ email: 'your.email@example.com' }); +``` + +## ๐Ÿ“ฆ Package Ecosystem + +### Entry points + +These are packages _you_ can install to enable Magic JS SDK functionality for your client-side application. + +| Package directory | Package Name | Changelog | Description | +| ----------------- | ------------ | --------- | ----------- | +| [`/web`](./packages/web) | [`magic-sdk`](https://www.npmjs.com/package/magic-sdk) | [CHANGELOG](./packages/web/CHANGELOG.md) | Web/browser entry-point for Magic SDK. | +| [`/react-native`](./packages/react-native) | [`@magic-sdk/react-native`](https://www.npmjs.com/package/@magic-sdk/react-native) | [CHANGELOG](./packages/react-native/CHANGELOG.md) | React Native entry-point for Magic SDK. | + +### Internals + +These are packages Magic JS SDK uses internally to work seamlessly across platforms. + +| Package directory | Package Name | Changelog | Description | +| ----------------- | ------------ | --------- | ----------- | +| [`/types`](./packages/types) | [`@magic-sdk/types`](https://www.npmjs.com/package/@magic-sdk/types) | [CHANGELOG](./packages/types/CHANGELOG.md) | Core typings shared between JavaScript entry-points of Magic SDK. | +| [`/provider`](./packages/provider) | [`@magic-sdk/provider`](https://www.npmjs.com/package/@magic-sdk/provider) | [CHANGELOG](./packages/provider/CHANGELOG.md) | Core business logic shared between JavaScript entry-points of Magic SDK. | +| [`/commons`](./packages/commons) | [`@magic-sdk/commons`](https://www.npmjs.com/package/@magic-sdk/commons) | [CHANGELOG](./packages/commons/CHANGELOG.md) | Exposes a listing of common public APIs from `@magic-sdk/provider` and `@magic-sdk/typings` to the platform-specific entry points. | + +## ๐Ÿšฆ Testing + Run tests for all packages ```bash yarn test @@ -58,17 +87,3 @@ Test specific files ```bash yarn test /test/**/constructor.spec.ts ``` - -## โšก๏ธ Quick Start - -Sign up or log in to the [developer dashboard](https://dashboard.magic.link) to receive API keys that will allow your application to interact with Magic's authentication APIs. - -Then, you can start authenticating users with _just one method!_ Magic works across all modern desktop, mobile Chrome, Safari and Firefox browsers. - -```ts -import { Magic } from 'magic-sdk'; - -const magic = new Magic('YOUR_API_KEY'); - -await magic.auth.loginWithMagicLink({ email: 'your.email@example.com' }); -``` diff --git a/packages/commons/.eslintignore b/packages/commons/.eslintignore new file mode 100644 index 000000000..8225baa4a --- /dev/null +++ b/packages/commons/.eslintignore @@ -0,0 +1,2 @@ +/node_modules +/dist diff --git a/packages/commons/.eslintrc.js b/packages/commons/.eslintrc.js new file mode 100644 index 000000000..1d625cf44 --- /dev/null +++ b/packages/commons/.eslintrc.js @@ -0,0 +1,7 @@ +module.exports = { + extends: ['../../.eslintrc'], + parserOptions: { + project: ['./tsconfig.json'], + tsconfigRootDir: __dirname, + }, +} diff --git a/packages/commons/.lintstagedrc.yml b/packages/commons/.lintstagedrc.yml new file mode 100644 index 000000000..1c250ad65 --- /dev/null +++ b/packages/commons/.lintstagedrc.yml @@ -0,0 +1,2 @@ +'*.{ts,tsx}': + - eslint --fix diff --git a/packages/commons/.prettierrc.js b/packages/commons/.prettierrc.js new file mode 100644 index 000000000..cd69f478f --- /dev/null +++ b/packages/commons/.prettierrc.js @@ -0,0 +1 @@ +module.exports = require('../../.prettierrc.js'); diff --git a/packages/commons/CHANGELOG.md b/packages/commons/CHANGELOG.md new file mode 100644 index 000000000..e69de29bb diff --git a/packages/commons/LICENSE b/packages/commons/LICENSE new file mode 100644 index 000000000..784e62485 --- /dev/null +++ b/packages/commons/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2018 Magic Labs, Inc. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/commons/README.md b/packages/commons/README.md new file mode 100644 index 000000000..13fc936a0 --- /dev/null +++ b/packages/commons/README.md @@ -0,0 +1,21 @@ +# โœจ Magic JavaScript SDK Commons + +[![](https://circleci.com/gh/magiclabs/magic-js.svg?style=shield)](https://circleci.com/gh/magiclabs/magic-js) + +> Exposes a listing of common public APIs from `@magic-sdk/provider` and `@magic-sdk/typings` to the platform-specific entry points (`magic-sdk` and `@magic-sdk/react-native`) + +

+ License ยท + Contributing Guide +

+ +## ๐Ÿ“– Documentation + +See the [developer documentation](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes. + +## Looking to Get Started With Magic? + +This package is an internal dependency of the Magic JavaScript SDK ecosystem. If you're looking to get started with Magic's passwordless authentication for web or React native, check out one of these: + +- Web: [`magic-sdk`](https://github.com/magiclabs/magic-js/tree/master/packages/web) +- React Native: [`@magic-sdk/react-native`](https://github.com/magiclabs/magic-js/tree/master/packages/react-native) diff --git a/packages/commons/package.json b/packages/commons/package.json new file mode 100644 index 000000000..0e6c5b0af --- /dev/null +++ b/packages/commons/package.json @@ -0,0 +1,24 @@ +{ + "name": "@magic-sdk/commons", + "version": "0.1.0", + "description": "Exposes a listing of common public APIs from the Magic JS SDK ecosystem.", + "author": "Magic Labs (https://magic.link/)", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/magiclabs/magic-js" + }, + "homepage": "https://magic.link", + "files": [ + "dist/*" + ], + "target": "web", + "main": "dist/commonjs/index.js", + "module": "dist/module/index.js", + "types": "dist/commonjs/index.d.ts", + "peerDependencies": { + "@magic-sdk/provider": "^3.0.1", + "@magic-sdk/types": "^2.0.1" + }, + "gitHead": "1ef062ea699d48d5e9a9375a93b7c147632b05ca" +} diff --git a/packages/commons/src/index.ts b/packages/commons/src/index.ts new file mode 100644 index 000000000..b8c993a72 --- /dev/null +++ b/packages/commons/src/index.ts @@ -0,0 +1,16 @@ +// Only re-export modules & types that are intended +// for the public API from this file. + +export { + Extension, + MagicSDKError as SDKError, + MagicExtensionError as ExtensionError, + MagicExtensionWarning as ExtensionWarning, + MagicRPCError as RPCError, + MagicSDKWarning as SDKWarning, + MagicSDKAdditionalConfiguration, + PromiEvent, + isPromiEvent, +} from '@magic-sdk/provider'; + +export * from '@magic-sdk/types'; diff --git a/packages/commons/tsconfig.json b/packages/commons/tsconfig.json new file mode 100644 index 000000000..e9daca8bf --- /dev/null +++ b/packages/commons/tsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tsconfig.settings.json", + + "compilerOptions": { + "rootDir": "./src", + "outDir": "./dist/commonjs" + }, + + "include": [ + "./src/**/*.ts", + ], + + "references": [ + { "path": "../types/tsconfig.json" }, + { "path": "../provider/tsconfig.json" }, + ] +} diff --git a/packages/commons/tsconfig.module.json b/packages/commons/tsconfig.module.json new file mode 100644 index 000000000..a3a11ab81 --- /dev/null +++ b/packages/commons/tsconfig.module.json @@ -0,0 +1,18 @@ +{ + "extends": "../../tsconfig.settings.json", + + "compilerOptions": { + "module": "es6", + "rootDir": "./src", + "outDir": "./dist/module" + }, + + "include": [ + "./src/**/*.ts", + ], + + "references": [ + { "path": "../types/tsconfig.module.json" }, + { "path": "../provider/tsconfig.module.json" }, + ] +} diff --git a/packages/provider/src/core/json-rpc.ts b/packages/provider/src/core/json-rpc.ts index 7eb391f2a..dbc61724d 100644 --- a/packages/provider/src/core/json-rpc.ts +++ b/packages/provider/src/core/json-rpc.ts @@ -46,6 +46,7 @@ export function standardizeJsonRpcRequestPayload(payload: Partial p.id) : []; - await overlay.postMessage({ msgType: `${msgType}-${this.encodedQueryParams}`, payload }); + await overlay.postMessage({ msgType: `${msgType}-${this.parameters}`, payload }); /** Collect successful RPC responses and resolve. */ const acknowledgeResponse = (removeEventListener: RemoveEventListenerFunction) => (event: MagicMessageEvent) => { @@ -146,7 +144,7 @@ export abstract class PayloadTransport { // `initMessageListener`. /* istanbul ignore next */ const listener = (event: MagicMessageEvent) => { - if (event.data.msgType === `${msgType}-${this.encodedQueryParams}`) boundHandler(event); + if (event.data.msgType === `${msgType}-${this.parameters}`) boundHandler(event); }; this.messageHandlers.add(listener); diff --git a/packages/provider/src/core/sdk.ts b/packages/provider/src/core/sdk.ts index 8fb268bc3..b8c534fdb 100644 --- a/packages/provider/src/core/sdk.ts +++ b/packages/provider/src/core/sdk.ts @@ -104,8 +104,8 @@ export class SDKBase { private static readonly __transports__: Map = new Map(); private static readonly __overlays__: Map = new Map(); - public readonly endpoint: string; - public readonly encodedQueryParams: string; + protected readonly endpoint: string; + protected readonly parameters: string; /** * Contains methods for starting a Magic SDK authentication flow. @@ -137,16 +137,16 @@ export class SDKBase { const { defaultEndpoint, version } = SDKEnvironment; this.endpoint = createURL(options?.endpoint ?? defaultEndpoint).origin; - // Assign API Modules + // Prepare built-in modules this.auth = new AuthModule(this); this.user = new UserModule(this); this.rpcProvider = new RPCProviderModule(this); - // Prepare Extensions + // Prepare extensions const extConfig: any = prepareExtensions.call(this, options); - // Build query params for the current `ViewController` - this.encodedQueryParams = encodeJSON({ + // Encode parameters as base64-JSON + this.parameters = encodeJSON({ API_KEY: this.apiKey, DOMAIN_ORIGIN: window.location ? window.location.origin : '', ETH_NETWORK: options?.network, @@ -163,26 +163,23 @@ export class SDKBase { * `MagicSDK` instance. */ protected get transport(): PayloadTransport { - if (!SDKBase.__transports__.has(this.encodedQueryParams)) { - SDKBase.__transports__.set( - this.encodedQueryParams, - new SDKEnvironment.PayloadTransport(this.endpoint, this.encodedQueryParams), - ); + if (!SDKBase.__transports__.has(this.parameters)) { + SDKBase.__transports__.set(this.parameters, new SDKEnvironment.PayloadTransport(this.endpoint, this.parameters)); } - return SDKBase.__transports__.get(this.encodedQueryParams)!; + return SDKBase.__transports__.get(this.parameters)!; } /** * Represents the view controller associated with this `MagicSDK` instance. */ protected get overlay(): ViewController { - if (!SDKBase.__overlays__.has(this.encodedQueryParams)) { - const controller = new SDKEnvironment.ViewController(this.transport, this.endpoint, this.encodedQueryParams); - SDKBase.__overlays__.set(this.encodedQueryParams, controller); + if (!SDKBase.__overlays__.has(this.parameters)) { + const controller = new SDKEnvironment.ViewController(this.transport); + SDKBase.__overlays__.set(this.parameters, controller); } - return SDKBase.__overlays__.get(this.encodedQueryParams)!; + return SDKBase.__overlays__.get(this.parameters)!; } /** diff --git a/packages/provider/src/core/view-controller.ts b/packages/provider/src/core/view-controller.ts index c944082dc..b43038871 100644 --- a/packages/provider/src/core/view-controller.ts +++ b/packages/provider/src/core/view-controller.ts @@ -3,14 +3,21 @@ import { PayloadTransport } from './payload-transport'; export abstract class ViewController { public ready: Promise; + protected readonly endpoint: string; + protected readonly parameters: string; - constructor( - protected readonly transport: Transport, - protected readonly endpoint: string, - protected readonly encodedQueryParams: string, - ) { + constructor(protected readonly transport: Transport) { + // Get the `endpoint` and `parameters` value + // from the underlying `transport` instance. + this.endpoint = (transport as any).endpoint; + this.parameters = (transport as any).parameters; + + // Create a promise that resolves when + // the view is ready for messages. this.ready = this.waitForReady(); + if (this.init) this.init(); + this.listen(); } diff --git a/packages/provider/src/util/base64-json.ts b/packages/provider/src/util/base64-json.ts index a5b7b5b94..b51b20b62 100644 --- a/packages/provider/src/util/base64-json.ts +++ b/packages/provider/src/util/base64-json.ts @@ -1,6 +1,3 @@ -import { QueryParameters } from '@magic-sdk/types'; -import { createDeprecationWarning } from '../core/sdk-exceptions'; - /** * Given a JSON-serializable object, encode as a Base64 string. */ diff --git a/packages/provider/test/constants.ts b/packages/provider/test/constants.ts index e477d5051..4efb3f01e 100644 --- a/packages/provider/test/constants.ts +++ b/packages/provider/test/constants.ts @@ -2,11 +2,11 @@ export const MAGIC_RELAYER_FULL_URL = 'https://auth.magic.link'; export const TEST_API_KEY = 'pk_test_123'; export const LIVE_API_KEY = 'pk_live_123'; export const ENCODED_QUERY_PARAMS = 'testqueryparams'; -export const MSG_TYPES = (encodedQueryParams = ENCODED_QUERY_PARAMS) => ({ - MAGIC_HANDLE_RESPONSE: `MAGIC_HANDLE_RESPONSE-${encodedQueryParams}`, - MAGIC_OVERLAY_READY: `MAGIC_OVERLAY_READY-${encodedQueryParams}`, - MAGIC_SHOW_OVERLAY: `MAGIC_SHOW_OVERLAY-${encodedQueryParams}`, - MAGIC_HIDE_OVERLAY: `MAGIC_HIDE_OVERLAY-${encodedQueryParams}`, - MAGIC_HANDLE_REQUEST: `MAGIC_HANDLE_REQUEST-${encodedQueryParams}`, - MAGIC_HANDLE_EVENT: `MAGIC_HANDLE_EVENT-${encodedQueryParams}`, +export const MSG_TYPES = (parameters = ENCODED_QUERY_PARAMS) => ({ + MAGIC_HANDLE_RESPONSE: `MAGIC_HANDLE_RESPONSE-${parameters}`, + MAGIC_OVERLAY_READY: `MAGIC_OVERLAY_READY-${parameters}`, + MAGIC_SHOW_OVERLAY: `MAGIC_SHOW_OVERLAY-${parameters}`, + MAGIC_HIDE_OVERLAY: `MAGIC_HIDE_OVERLAY-${parameters}`, + MAGIC_HANDLE_REQUEST: `MAGIC_HANDLE_REQUEST-${parameters}`, + MAGIC_HANDLE_EVENT: `MAGIC_HANDLE_EVENT-${parameters}`, }); diff --git a/packages/provider/test/factories.ts b/packages/provider/test/factories.ts index e76911d26..48e89d7fc 100644 --- a/packages/provider/test/factories.ts +++ b/packages/provider/test/factories.ts @@ -42,7 +42,7 @@ export function createPayloadTransport(endpoint = MAGIC_RELAYER_FULL_URL) { } export function createViewController(endpoint = MAGIC_RELAYER_FULL_URL) { - return new TestViewController(createPayloadTransport(endpoint), endpoint, ENCODED_QUERY_PARAMS); + return new TestViewController(createPayloadTransport(endpoint)); } export const TestMagicSDK = createSDK(SDKBase, { diff --git a/packages/provider/test/spec/core/sdk/constructor.spec.ts b/packages/provider/test/spec/core/sdk/constructor.spec.ts index 58f5f7468..0570dc44b 100644 --- a/packages/provider/test/spec/core/sdk/constructor.spec.ts +++ b/packages/provider/test/spec/core/sdk/constructor.spec.ts @@ -21,7 +21,7 @@ test.beforeEach((t) => { restoreSDKEnvironmentConstants(); }); -function assertEncodedQueryParams(t: ExecutionContext, encodedQueryParams: string, expectedParams: any = {}) { +function assertEncodedQueryParams(t: ExecutionContext, parameters: string, expectedParams: any = {}) { const defaultExpectedParams = { API_KEY: TEST_API_KEY, DOMAIN_ORIGIN: 'null', @@ -31,7 +31,7 @@ function assertEncodedQueryParams(t: ExecutionContext, encodedQueryParams: strin locale: 'en_US', }; - t.deepEqual(JSON.parse(atob(encodedQueryParams)), { + t.deepEqual(JSON.parse(atob(parameters)), { ...defaultExpectedParams, ...expectedParams, }); @@ -47,8 +47,8 @@ test.serial('Initialize `MagicSDK`', (t) => { const magic = new TestMagicSDK(TEST_API_KEY); t.is(magic.apiKey, TEST_API_KEY); - t.is(magic.endpoint, MAGIC_RELAYER_FULL_URL); - assertEncodedQueryParams(t, magic.encodedQueryParams); + t.is((magic as any).endpoint, MAGIC_RELAYER_FULL_URL); + assertEncodedQueryParams(t, (magic as any).parameters); assertModuleInstanceTypes(t, magic); }); @@ -67,8 +67,8 @@ test.serial('Initialize `MagicSDK` with custom endpoint', (t) => { const magic = new TestMagicSDK(TEST_API_KEY, { endpoint: 'https://example.com' }); t.is(magic.apiKey, TEST_API_KEY); - t.is(magic.endpoint, 'https://example.com'); - assertEncodedQueryParams(t, magic.encodedQueryParams, { + t.is((magic as any).endpoint, 'https://example.com'); + assertEncodedQueryParams(t, (magic as any).parameters, { host: 'example.com', }); assertModuleInstanceTypes(t, magic); @@ -80,8 +80,8 @@ test.serial('Initialize `MagicSDK` when `window.location` is missing', (t) => { const magic = new TestMagicSDK(TEST_API_KEY); t.is(magic.apiKey, TEST_API_KEY); - t.is(magic.endpoint, MAGIC_RELAYER_FULL_URL); - assertEncodedQueryParams(t, magic.encodedQueryParams, { + t.is((magic as any).endpoint, MAGIC_RELAYER_FULL_URL); + assertEncodedQueryParams(t, (magic as any).parameters, { DOMAIN_ORIGIN: '', }); assertModuleInstanceTypes(t, magic); @@ -91,8 +91,8 @@ test.serial('Initialize `MagicSDK` with custom Web3 network', (t) => { const magic = new TestMagicSDK(TEST_API_KEY, { network: 'mainnet' }); t.is(magic.apiKey, TEST_API_KEY); - t.is(magic.endpoint, MAGIC_RELAYER_FULL_URL); - assertEncodedQueryParams(t, magic.encodedQueryParams, { + t.is((magic as any).endpoint, MAGIC_RELAYER_FULL_URL); + assertEncodedQueryParams(t, (magic as any).parameters, { ETH_NETWORK: 'mainnet', }); assertModuleInstanceTypes(t, magic); @@ -102,8 +102,8 @@ test.serial('Initialize `MagicSDK` with custom locale', (t) => { const magic = new TestMagicSDK(TEST_API_KEY, { locale: 'pl_PL' }); t.is(magic.apiKey, TEST_API_KEY); - t.is(magic.endpoint, MAGIC_RELAYER_FULL_URL); - assertEncodedQueryParams(t, magic.encodedQueryParams, { + t.is((magic as any).endpoint, MAGIC_RELAYER_FULL_URL); + assertEncodedQueryParams(t, (magic as any).parameters, { locale: 'pl_PL', }); assertModuleInstanceTypes(t, magic); @@ -147,14 +147,14 @@ class NoopExtSupportingReactNative extends Extension<'noop'> { test.serial('Initialize `MagicSDK` with config-less extensions via array', (t) => { const magic = new TestMagicSDK(TEST_API_KEY, { extensions: [new NoopExtNoConfig()] }); - assertEncodedQueryParams(t, magic.encodedQueryParams); + assertEncodedQueryParams(t, (magic as any).parameters); t.true(magic.noop instanceof NoopExtNoConfig); }); test.serial('Initialize `MagicSDK` with config-ful extensions via array (non-empty config)', (t) => { const magic = new TestMagicSDK(TEST_API_KEY, { extensions: [new NoopExtWithConfig()] }); - assertEncodedQueryParams(t, magic.encodedQueryParams, { + assertEncodedQueryParams(t, (magic as any).parameters, { ext: { noop: { hello: 'world' } }, }); @@ -164,7 +164,7 @@ test.serial('Initialize `MagicSDK` with config-ful extensions via array (non-emp test.serial('Initialize `MagicSDK` with config-ful extensions via array (empty config)', (t) => { const magic = new TestMagicSDK(TEST_API_KEY, { extensions: [new NoopExtWithEmptyConfig()] }); - assertEncodedQueryParams(t, magic.encodedQueryParams); + assertEncodedQueryParams(t, (magic as any).parameters); t.true(magic.noop instanceof NoopExtWithEmptyConfig); }); @@ -172,7 +172,7 @@ test.serial('Initialize `MagicSDK` with config-ful extensions via array (empty c test.serial('Initialize `MagicSDK` with config-less extensions via dictionary', (t) => { const magic = new TestMagicSDK(TEST_API_KEY, { extensions: { foobar: new NoopExtNoConfig() } }); - assertEncodedQueryParams(t, magic.encodedQueryParams); + assertEncodedQueryParams(t, (magic as any).parameters); t.true(magic.foobar instanceof NoopExtNoConfig); }); @@ -180,7 +180,7 @@ test.serial('Initialize `MagicSDK` with config-less extensions via dictionary', test.serial('Initialize `MagicSDK` with config-ful extensions via dictionary (non-empty config)', (t) => { const magic = new TestMagicSDK(TEST_API_KEY, { extensions: { foobar: new NoopExtWithConfig() } }); - assertEncodedQueryParams(t, magic.encodedQueryParams, { + assertEncodedQueryParams(t, (magic as any).parameters, { ext: { noop: { hello: 'world' } }, }); @@ -190,7 +190,7 @@ test.serial('Initialize `MagicSDK` with config-ful extensions via dictionary (no test.serial('Initialize `MagicSDK` with config-ful extensions via dictionary (empty config)', (t) => { const magic = new TestMagicSDK(TEST_API_KEY, { extensions: { foobar: new NoopExtWithEmptyConfig() } }); - assertEncodedQueryParams(t, magic.encodedQueryParams); + assertEncodedQueryParams(t, (magic as any).parameters); t.true(magic.foobar instanceof NoopExtWithEmptyConfig); }); diff --git a/packages/provider/test/spec/core/view-controller/constructor.spec.ts b/packages/provider/test/spec/core/view-controller/constructor.spec.ts index 9816826da..56d70241f 100644 --- a/packages/provider/test/spec/core/view-controller/constructor.spec.ts +++ b/packages/provider/test/spec/core/view-controller/constructor.spec.ts @@ -25,6 +25,8 @@ test('Instantiates `ViewController`', async (t) => { t.true(overlay instanceof ViewController); t.true((overlay as any).transport instanceof PayloadTransport); + t.is((overlay as any).endpoint, (overlay as any).transport.endpoint); + t.is((overlay as any).parameters, (overlay as any).transport.parameters); t.true(initStub.calledOnce); t.true(listenStub.calledOnce); t.true(waitForReadyStub.calledOnce); diff --git a/packages/react-native/package.json b/packages/react-native/package.json index cbe4ffaee..784374e9f 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -22,6 +22,7 @@ "@babel/runtime": "~7.10.4", "@magic-sdk/provider": "^3.0.1", "@magic-sdk/types": "^2.0.1", + "@magic-sdk/commons": "^0.1.0", "@types/lodash": "^4.14.158", "buffer": "~5.6.0", "localforage": "^1.7.4", diff --git a/packages/react-native/src/index.ts b/packages/react-native/src/index.ts index 4e638e65f..0bc115920 100644 --- a/packages/react-native/src/index.ts +++ b/packages/react-native/src/index.ts @@ -39,19 +39,7 @@ global.btoa = (str) => Buffer.from(str, 'binary').toString('base64'); /* istanbul ignore next */ global.atob = (b64Encoded) => Buffer.from(b64Encoded, 'base64').toString('binary'); -export { - Extension, - MagicSDKError as SDKError, - MagicExtensionError as ExtensionError, - MagicExtensionWarning as ExtensionWarning, - MagicRPCError as RPCError, - MagicSDKWarning as SDKWarning, - MagicSDKAdditionalConfiguration, - PromiEvent, - isPromiEvent, -} from '@magic-sdk/provider'; - -export * from '@magic-sdk/types'; +export * from '@magic-sdk/commons'; export const Magic = createSDK(SDKBaseReactNative, { platform: 'react-native', diff --git a/packages/react-native/src/react-native-transport.ts b/packages/react-native/src/react-native-transport.ts index a09485460..72487d01d 100644 --- a/packages/react-native/src/react-native-transport.ts +++ b/packages/react-native/src/react-native-transport.ts @@ -12,8 +12,8 @@ export class ReactNativeTransport extends PayloadTransport { event.nativeEvent && typeof event.nativeEvent.data === 'string' && /* Backward comaptible */ - (event.nativeEvent.url === `${this.endpoint}/send/?params=${encodeURIComponent(this.encodedQueryParams)}` || - event.nativeEvent.url === `${this.endpoint}/send/?params=${this.encodedQueryParams}`) + (event.nativeEvent.url === `${this.endpoint}/send/?params=${encodeURIComponent(this.parameters)}` || + event.nativeEvent.url === `${this.endpoint}/send/?params=${this.parameters}`) ) { const data: any = JSON.parse(event.nativeEvent.data); if (data && data.msgType && this.messageHandlers.size) { diff --git a/packages/react-native/src/react-native-webview-controller.tsx b/packages/react-native/src/react-native-webview-controller.tsx index f99e96cd9..7fcc4c9a4 100644 --- a/packages/react-native/src/react-native-webview-controller.tsx +++ b/packages/react-native/src/react-native-webview-controller.tsx @@ -119,7 +119,7 @@ export class ReactNativeWebViewController extends ViewController diff --git a/packages/react-native/test/constants.ts b/packages/react-native/test/constants.ts index e477d5051..4efb3f01e 100644 --- a/packages/react-native/test/constants.ts +++ b/packages/react-native/test/constants.ts @@ -2,11 +2,11 @@ export const MAGIC_RELAYER_FULL_URL = 'https://auth.magic.link'; export const TEST_API_KEY = 'pk_test_123'; export const LIVE_API_KEY = 'pk_live_123'; export const ENCODED_QUERY_PARAMS = 'testqueryparams'; -export const MSG_TYPES = (encodedQueryParams = ENCODED_QUERY_PARAMS) => ({ - MAGIC_HANDLE_RESPONSE: `MAGIC_HANDLE_RESPONSE-${encodedQueryParams}`, - MAGIC_OVERLAY_READY: `MAGIC_OVERLAY_READY-${encodedQueryParams}`, - MAGIC_SHOW_OVERLAY: `MAGIC_SHOW_OVERLAY-${encodedQueryParams}`, - MAGIC_HIDE_OVERLAY: `MAGIC_HIDE_OVERLAY-${encodedQueryParams}`, - MAGIC_HANDLE_REQUEST: `MAGIC_HANDLE_REQUEST-${encodedQueryParams}`, - MAGIC_HANDLE_EVENT: `MAGIC_HANDLE_EVENT-${encodedQueryParams}`, +export const MSG_TYPES = (parameters = ENCODED_QUERY_PARAMS) => ({ + MAGIC_HANDLE_RESPONSE: `MAGIC_HANDLE_RESPONSE-${parameters}`, + MAGIC_OVERLAY_READY: `MAGIC_OVERLAY_READY-${parameters}`, + MAGIC_SHOW_OVERLAY: `MAGIC_SHOW_OVERLAY-${parameters}`, + MAGIC_HIDE_OVERLAY: `MAGIC_HIDE_OVERLAY-${parameters}`, + MAGIC_HANDLE_REQUEST: `MAGIC_HANDLE_REQUEST-${parameters}`, + MAGIC_HANDLE_EVENT: `MAGIC_HANDLE_EVENT-${parameters}`, }); diff --git a/packages/react-native/test/factories.ts b/packages/react-native/test/factories.ts index 786c294ab..de6e60202 100644 --- a/packages/react-native/test/factories.ts +++ b/packages/react-native/test/factories.ts @@ -10,7 +10,7 @@ export function createReactNativeTransport(endpoint = MAGIC_RELAYER_FULL_URL) { } export function createReactNativeWebViewController(endpoint = MAGIC_RELAYER_FULL_URL) { - return new ReactNativeWebViewController(createReactNativeTransport(endpoint), endpoint, ENCODED_QUERY_PARAMS); + return new ReactNativeWebViewController(createReactNativeTransport(endpoint)); } export function createMagicSDK(endpoint = MAGIC_RELAYER_FULL_URL) { diff --git a/packages/react-native/test/spec/react-native-transport/handleReactNativeWebViewMessage.spec.ts b/packages/react-native/test/spec/react-native-transport/handleReactNativeWebViewMessage.spec.ts index 7c156672c..20e94bbce 100644 --- a/packages/react-native/test/spec/react-native-transport/handleReactNativeWebViewMessage.spec.ts +++ b/packages/react-native/test/spec/react-native-transport/handleReactNativeWebViewMessage.spec.ts @@ -33,7 +33,7 @@ test.cb('Ignores events with non-string data', (t) => { transport.handleReactNativeWebViewMessage({ nativeEvent: { - url: `qwerty/send/?params=${(transport as any).encodedQueryParams}`, + url: `qwerty/send/?params=${(transport as any).parameters}`, data: 123, }, } as any); diff --git a/packages/react-native/tsconfig.json b/packages/react-native/tsconfig.json index 7ba56cddf..96078f08c 100644 --- a/packages/react-native/tsconfig.json +++ b/packages/react-native/tsconfig.json @@ -14,5 +14,6 @@ "references": [ { "path": "../types/tsconfig.json" }, { "path": "../provider/tsconfig.json" }, + { "path": "../commons/tsconfig.json" }, ] } diff --git a/packages/react-native/tsconfig.module.json b/packages/react-native/tsconfig.module.json index a2fdd32d4..0fc689fc3 100644 --- a/packages/react-native/tsconfig.module.json +++ b/packages/react-native/tsconfig.module.json @@ -15,5 +15,6 @@ "references": [ { "path": "../types/tsconfig.module.json" }, { "path": "../provider/tsconfig.module.json" }, + { "path": "../commons/tsconfig.module.json" }, ] } diff --git a/packages/web/package.json b/packages/web/package.json index 8c43b2783..c63f6f804 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -23,6 +23,7 @@ "@babel/runtime": "^7.9.6", "@magic-sdk/provider": "^3.0.1", "@magic-sdk/types": "^2.0.1", + "@magic-sdk/commons": "^0.1.0", "localforage": "^1.7.4", "localforage-driver-memory": "^1.0.5", "regenerator-runtime": "0.13.5" diff --git a/packages/web/src/iframe-controller.ts b/packages/web/src/iframe-controller.ts index 3647ae29f..e99a8071a 100644 --- a/packages/web/src/iframe-controller.ts +++ b/packages/web/src/iframe-controller.ts @@ -33,12 +33,12 @@ function applyOverlayStyles(elem: HTMLElement) { * Checks if the given query params are associated with an active `