From 8431b6b1764e1488402999fa5dc39dc2b790b234 Mon Sep 17 00:00:00 2001 From: Arian Flores Date: Tue, 3 Jan 2023 10:05:42 -0800 Subject: [PATCH 01/27] Create @magic-sdk/react-native-bare SDK --- .../react-native-bare/.eslintignore | 6 + .../@magic-sdk/react-native-bare/.eslintrc.js | 7 + .../react-native-bare/.lintstagedrc.yml | 2 + .../react-native-bare/.prettierrc.js | 1 + .../@magic-sdk/react-native-bare/CHANGELOG.md | 395 ++++++++++++++++++ packages/@magic-sdk/react-native-bare/LICENSE | 21 + .../@magic-sdk/react-native-bare/README.md | 54 +++ .../react-native-bare/babel.config.json | 4 + .../react-native-bare/jest.config.ts | 30 ++ .../@magic-sdk/react-native-bare/package.json | 54 +++ .../react-native-bare/src/ambient-types.d.ts | 19 + .../@magic-sdk/react-native-bare/src/index.ts | 71 ++++ .../src/react-native-sdk-base.ts | 8 + .../src/react-native-webview-controller.tsx | 203 +++++++++ .../react-native-bare/test/constants.ts | 12 + .../react-native-bare/test/factories.ts | 15 + .../react-native-bare/test/mocks.ts | 20 + .../react-native-bare/test/setup.ts | 18 + .../react-native-sdk-base/Relayer.spec.ts | 15 + .../_post.spec.ts | 52 +++ .../handleReactNativeWebViewMessage.spec.ts | 167 ++++++++ .../hideOverlay.spec.ts | 28 ++ .../init.spec.ts | 53 +++ .../showOverlay.spec.ts | 27 ++ .../react-native-bare/test/tsconfig.json | 3 + .../react-native-bare/tsconfig.json | 3 + 26 files changed, 1288 insertions(+) create mode 100644 packages/@magic-sdk/react-native-bare/.eslintignore create mode 100644 packages/@magic-sdk/react-native-bare/.eslintrc.js create mode 100644 packages/@magic-sdk/react-native-bare/.lintstagedrc.yml create mode 100644 packages/@magic-sdk/react-native-bare/.prettierrc.js create mode 100644 packages/@magic-sdk/react-native-bare/CHANGELOG.md create mode 100644 packages/@magic-sdk/react-native-bare/LICENSE create mode 100644 packages/@magic-sdk/react-native-bare/README.md create mode 100644 packages/@magic-sdk/react-native-bare/babel.config.json create mode 100644 packages/@magic-sdk/react-native-bare/jest.config.ts create mode 100644 packages/@magic-sdk/react-native-bare/package.json create mode 100644 packages/@magic-sdk/react-native-bare/src/ambient-types.d.ts create mode 100644 packages/@magic-sdk/react-native-bare/src/index.ts create mode 100644 packages/@magic-sdk/react-native-bare/src/react-native-sdk-base.ts create mode 100644 packages/@magic-sdk/react-native-bare/src/react-native-webview-controller.tsx create mode 100644 packages/@magic-sdk/react-native-bare/test/constants.ts create mode 100644 packages/@magic-sdk/react-native-bare/test/factories.ts create mode 100644 packages/@magic-sdk/react-native-bare/test/mocks.ts create mode 100644 packages/@magic-sdk/react-native-bare/test/setup.ts create mode 100644 packages/@magic-sdk/react-native-bare/test/spec/react-native-sdk-base/Relayer.spec.ts create mode 100644 packages/@magic-sdk/react-native-bare/test/spec/react-native-webview-controller/_post.spec.ts create mode 100644 packages/@magic-sdk/react-native-bare/test/spec/react-native-webview-controller/handleReactNativeWebViewMessage.spec.ts create mode 100644 packages/@magic-sdk/react-native-bare/test/spec/react-native-webview-controller/hideOverlay.spec.ts create mode 100644 packages/@magic-sdk/react-native-bare/test/spec/react-native-webview-controller/init.spec.ts create mode 100644 packages/@magic-sdk/react-native-bare/test/spec/react-native-webview-controller/showOverlay.spec.ts create mode 100644 packages/@magic-sdk/react-native-bare/test/tsconfig.json create mode 100644 packages/@magic-sdk/react-native-bare/tsconfig.json diff --git a/packages/@magic-sdk/react-native-bare/.eslintignore b/packages/@magic-sdk/react-native-bare/.eslintignore new file mode 100644 index 000000000..04cb86151 --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/.eslintignore @@ -0,0 +1,6 @@ +/node_modules +/coverage +/dist +/.eslintrc.js +/jest.config.ts +/babel.config.js diff --git a/packages/@magic-sdk/react-native-bare/.eslintrc.js b/packages/@magic-sdk/react-native-bare/.eslintrc.js new file mode 100644 index 000000000..591a9a1f1 --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/.eslintrc.js @@ -0,0 +1,7 @@ +module.exports = { + extends: ['../../../.eslintrc.js'], + parserOptions: { + project: ['./tsconfig.json', './test/tsconfig.json'], + tsconfigRootDir: __dirname, + }, +} diff --git a/packages/@magic-sdk/react-native-bare/.lintstagedrc.yml b/packages/@magic-sdk/react-native-bare/.lintstagedrc.yml new file mode 100644 index 000000000..1c250ad65 --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/.lintstagedrc.yml @@ -0,0 +1,2 @@ +'*.{ts,tsx}': + - eslint --fix diff --git a/packages/@magic-sdk/react-native-bare/.prettierrc.js b/packages/@magic-sdk/react-native-bare/.prettierrc.js new file mode 100644 index 000000000..6177cac66 --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/.prettierrc.js @@ -0,0 +1 @@ +module.exports = require('../../../.prettierrc.js'); diff --git a/packages/@magic-sdk/react-native-bare/CHANGELOG.md b/packages/@magic-sdk/react-native-bare/CHANGELOG.md new file mode 100644 index 000000000..4bb9f7c21 --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/CHANGELOG.md @@ -0,0 +1,395 @@ +# v12.0.0 (Tue Dec 20 2022) + +#### ๐Ÿ› Bug Fix + +- Merge branch 'master' into mushfichowdhury-sc-61149-implement-event-emitting-in-magic-sdk-based ([@mushfichowdhury-magic](https://github.com/mushfichowdhury-magic)) +- Adds more Context about Expo dependency in `@magic-ext/react-native-oauth` to README [#386](https://github.com/magiclabs/magic-js/pull/386) ([@Ariflo](https://github.com/Ariflo)) + +#### ๐Ÿ“ Documentation + +- Adds advice for fixing symlink error in RN projects inside of Monorepos to README [#395](https://github.com/magiclabs/magic-js/pull/395) ([@Ariflo](https://github.com/Ariflo)) + +#### Authors: 2 + +- Arian Flores ([@Ariflo](https://github.com/Ariflo)) +- Mushfi Chowdhury ([@mushfichowdhury-magic](https://github.com/mushfichowdhury-magic)) + +--- + +# v10.0.1 (Fri Sep 09 2022) + +#### ๐Ÿ› Bug Fix + +- Add RN TypedArray stringify conversion logic [#357](https://github.com/magiclabs/magic-js/pull/357) ([@Ethella](https://github.com/Ethella)) + +#### Authors: 1 + +- Jerry Liu ([@Ethella](https://github.com/Ethella)) + +--- + +# v10.0.0 (Fri Aug 05 2022) + +#### ๐Ÿ’ฅ Breaking Change + +- Revert "Revert "Enable bundle Id in Expo"" [#338](https://github.com/magiclabs/magic-js/pull/338) ([@Ethella](https://github.com/Ethella)) +- Enable bundle Id in Expo [#335](https://github.com/magiclabs/magic-js/pull/335) ([@Ethella](https://github.com/Ethella)) + +#### ๐Ÿ› Bug Fix + +- Merge branch 'master' into early-access ([@bcleary06](https://github.com/bcleary06)) +- Update Readme and manual version bump for releases [#339](https://github.com/magiclabs/magic-js/pull/339) ([@Ethella](https://github.com/Ethella)) +- Revert "Enable bundle Id in Expo" [#337](https://github.com/magiclabs/magic-js/pull/337) ([@Ethella](https://github.com/Ethella)) + +#### Authors: 2 + +- Brian Cleary ([@bcleary06](https://github.com/bcleary06)) +- Jerry Liu ([@Ethella](https://github.com/Ethella)) + +--- + +# v8.2.0 (Mon Mar 07 2022) + +#### ๐Ÿ› Bug Fix + +- Update READMEs with outdated context/hyperlinks ([@smithki](https://github.com/smithki)) +- Merge branch 'master' into smithki/better-build-system-documentation ([@smithki](https://github.com/smithki)) + +#### ๐Ÿ  Internal + +- Internal documentation updates (`BUILD_SYSTEM.md`) [#283](https://github.com/magiclabs/magic-js/pull/283) ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +# v8.1.0 (Mon Jan 31 2022) + +#### ๐Ÿš€ Enhancement + +- Add special parsing logic to handle typed array in payload [#275](https://github.com/magiclabs/magic-js/pull/275) ([@Ethella](https://github.com/Ethella)) + +#### Authors: 1 + +- Jerry Liu ([@Ethella](https://github.com/Ethella)) + +--- + +# v8.0.0 (Tue Jan 25 2022) + +#### ๐Ÿ’ฅ Breaking Change + +- Switch from `microbundle` to `esbuild` [#220](https://github.com/magiclabs/magic-js/pull/220) ([@smithki](https://github.com/smithki)) + +#### ๐Ÿ› Bug Fix + +- Merge with master ([@smithki](https://github.com/smithki)) +- Merge branch 'master' into feat/faster-builds ([@smithki](https://github.com/smithki)) +- Remove comments from README files ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +# v6.1.4 (Thu Oct 21 2021) + +#### ๐Ÿ› Bug Fix + +- Revert to `.js` extension for ES module builds targeting webpack/CRA [#232](https://github.com/magiclabs/magic-js/pull/232) ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +# v6.1.3 (Wed Oct 20 2021) + +#### โš ๏ธ Pushed to `master` + +- Fix dist files glob in package.json ([@smithki](https://github.com/smithki)) +- Merge branch 'master' of github.com:magiclabs/magic-js ([@smithki](https://github.com/smithki)) +- Force re-publish ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +# v6.1.2 (Wed Oct 20 2021) + +#### ๐Ÿ› Bug Fix + +- Use '.mjs' extension for ESM build files [#230](https://github.com/magiclabs/magic-js/pull/230) ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +# v6.0.6 (Thu Sep 23 2021) + +#### ๐Ÿ› Bug Fix + +- Port `@magic-ext/oauth`, `@magic-ext/react-native-oauth`, `@magic-ext/webauthn` extensions to Magic SDK monorepo [#218](https://github.com/magiclabs/magic-js/pull/218) ([@smithki](https://github.com/smithki)) +- Add `@magic-sdk/pnp` package for out-of-the-box login page UIs [#217](https://github.com/magiclabs/magic-js/pull/217) ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +# v6.0.2 (Tue Sep 14 2021) + +#### ๐Ÿ› Bug Fix + +- Import regeneratorRuntime in Magic JS (non-CDN version) [#210](https://github.com/magiclabs/magic-js/pull/210) ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +# v6.0.1 (Tue Sep 14 2021) + +#### ๐Ÿ› Bug Fix + +- Fix SemVer cyclic dependency issues with some hacks [#209](https://github.com/magiclabs/magic-js/pull/209) ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +# v6.0.0 (Tue Sep 14 2021) + +#### ๐Ÿ’ฅ Breaking Change + +- v6.0.0 [#208](https://github.com/magiclabs/magic-js/pull/208) ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +# v4.4.2 (Mon Aug 16 2021) + +#### ๐Ÿ› Bug Fix + +- Migrate unit tests to Jest [#194](https://github.com/magiclabs/magic-js/pull/194) ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +# v4.4.0 (Wed Jul 28 2021) + +#### ๐Ÿš€ Enhancement + +- Add explicit JSDelivr entry-point for `magic-sdk` [#191](https://github.com/magiclabs/magic-js/pull/191) ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +# v4.3.1 (Fri Jun 11 2021) + +#### ๐Ÿ› Bug Fix + +- Upgrade @aveq-research/localforage-asyncstorage-driver [#183](https://github.com/magiclabs/magic-js/pull/183) ([@Ethella](https://github.com/Ethella)) + +#### Authors: 1 + +- Jerry Liu ([@Ethella](https://github.com/Ethella)) + +--- + +# v4.0.1 (Tue Dec 01 2020) + +#### ๐Ÿ› Bug Fix + +- Add 'importHelpers: true' to base tsconfig.json [#152](https://github.com/magiclabs/magic-js/pull/152) ([@smithki](https://github.com/smithki)) + +#### ๐Ÿ“ Documentation + +- Fix incorrect TypeScript project references and update READMEs with changelog links [#151](https://github.com/magiclabs/magic-js/pull/151) ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +# v4.0.0 (Tue Nov 17 2020) + +#### ๐Ÿ’ฅ Breaking Change + +- [All packages] Internal API changes & Cleanups [#149](https://github.com/magiclabs/magic-js/pull/149) ([@smithki](https://github.com/smithki)) + +#### ๐Ÿ› Bug Fix + +- Update CHANGELOGs and CONTRIBUTING guide [#146](https://github.com/magiclabs/magic-js/pull/146) ([@smithki](https://github.com/smithki)) + +#### ๐Ÿ  Internal + +- Simplify scripts [#147](https://github.com/magiclabs/magic-js/pull/147) ([@smithki](https://github.com/smithki)) + +#### Authors: 1 + +- Ian K Smith ([@smithki](https://github.com/smithki)) + +--- + +## `3.0.1` - 10/21/2020 + +#### Changed + +- Removed the following public methods and functions + - `BaseExtension.utils.encodeQueryParameters` + - `BaseExtension.utils.decodeQueryParameters` + +## `2.8.0` - 09/24/2020 + +#### Added + +- Adds a Magic SDK extensions runtime compatibility check, ensuring you're version of Magic SDK is designed for the extensions you have in use. + +## `2.7.1` - 09/18/2020 + +#### Fixed + +- Fix missing BigInt dependency #131 + +## `2.7.0` - 09/15/2020 + +#### Added + +- New, optional `redirectURI` parameter for the `loginWithMagicLink` method +- New `loginWithCredential` method for completing a magic link login with redirect: `await magic.auth.loginWithCredential()` + +## `2.6.0` - 08/24/2020 + +#### Added + +- New optional `locale` parameter to SDK constructor + +## `2.5.1` - 08/20/2020 + +#### Added + +- New RPC error code for the `loginWithMagicLink` method: `-10005` + +## `2.4.6` - 07/22/2020 + +#### Added + +- Export `PromiEvent` type and `isPromiEvent` utility from SDK entry-points (`magic-sdk` and `@magic-sdk/react-native`). + +## `2.4.1` through `2.4.5` - 07/13/2020 + +#### Fixed + +- Bug preventing NPM tarball from containing `/dist` files. + +## `2.4.0` - 07/13/2020 + +#### Changed + +- Updated build system to use TypeScript project references instead of Microbundle. +- Pass `targetOrigin` parameter to `postMessage` calls. + +## `2.3.1` - 07/08/2020 + +#### Fixed + +- Bug affecting `localforage` type imports causing compilation failure in TypeScript. + +## `2.3.0` - 07/08/2020 + +#### Added + +- WebAuthn support. +- `localforage` APIs for Magic SDK Extensions. + +## `2.1.0` - 06/25/2020 + +#### Changed + +- Update dependencies. + +#### Added + +- Add `ExtensionWarning` class. + +## `2.0.5` - 06/23/2020 + +#### Changed + +- Update dependencies. + +## `2.0.4` - 06/23/2020 + +#### Changed + +- Update dependencies. + +## `2.0.3` - 06/23/2020 + +#### Changed + +- Update dependencies. + +## `2.0.2` - 06/22/2020 + +#### Changed + +- Update dependencies. + +## `2.0.1` - 06/16/2020 + +#### Added + +- Introduce the `ExtensionError` type to ease handling of errors rising from Magic SDK Extensions. + +## `2.0.0` - 06/12/2020 + +#### Changed + +- Move "react-native-webivew" to peer dependencies + +## `1.0.1` - 06/11/2020 + +#### Changed + +- Update dependencies. +- Circle CI tag in readme is broken after namechange from MagicHQ to MagicLabs + +## `1.0.0` - 06/02/2020 + +This is the first release our changelog records. Future updates will be logged in the following format: + +#### Fixed + +- Bug fixes and patches will be described here. + +#### Changed + +- Changes (breaking or otherwise) to current APIs will be described here. + +#### Added + +- New features or APIs will be described here. diff --git a/packages/@magic-sdk/react-native-bare/LICENSE b/packages/@magic-sdk/react-native-bare/LICENSE new file mode 100644 index 000000000..784e62485 --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/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/@magic-sdk/react-native-bare/README.md b/packages/@magic-sdk/react-native-bare/README.md new file mode 100644 index 000000000..fece61049 --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/README.md @@ -0,0 +1,54 @@ +# โœจ Magic Authentication JavaScript SDK + +[![](https://circleci.com/gh/magiclabs/magic-js.svg?style=shield)](https://circleci.com/gh/magiclabs/magic-js) + +> Magic empowers developers to protect their users via an innovative, passwordless authentication flow without the UX compromises that burden traditional OAuth implementations. + +

+ License ยท + Changelog ยท + Contributing Guide +

+ +## โš ๏ธ Major Change: Package Split Beta โš ๏ธ +Please note that splitting the `Expo` and `Bare React Native` Magic packages is a part of a **beta** release. Take whatever precautions necessary to verify use before installing on your production application. As always, in the case something goes awry, you may open an issue and revert your package to the previous stable version `magic-sdk/react-native@x.x.x`. + +## ๐Ÿ“– Documentation + +See the [developer documentation](https://magic.link/docs) to learn how you can master the Magic SDK in a matter of minutes. + +## ๐Ÿ”— Installation + +Integrating your app with Magic will require our client-side NPM package: + +```bash +# Via NPM: +npm install --save @magic-sdk/react-native-bare + +# Via Yarn: +yarn add @magic-sdk/react-native-bare +``` + +## โšก๏ธ 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!_ + +```tsx +import React from 'react'; +import { Magic } from '@magic-sdk/react-native-bare'; + +const magic = new Magic('YOUR_API_KEY'); + +export default function App() { + return <> + {/* Render the Magic iframe! */} + + {...} + +} + +// Somewhere else in your code... +await magic.auth.loginWithMagicLink({ email: 'your.email@example.com' }); +``` diff --git a/packages/@magic-sdk/react-native-bare/babel.config.json b/packages/@magic-sdk/react-native-bare/babel.config.json new file mode 100644 index 000000000..fedbe6dea --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/babel.config.json @@ -0,0 +1,4 @@ +{ + "presets": ["module:metro-react-native-babel-preset"], + "plugins": ["@babel/plugin-transform-flow-strip-types"] +} diff --git a/packages/@magic-sdk/react-native-bare/jest.config.ts b/packages/@magic-sdk/react-native-bare/jest.config.ts new file mode 100644 index 000000000..5c03b1ea8 --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/jest.config.ts @@ -0,0 +1,30 @@ +import baseJestConfig from '../../../jest.config'; +import type { Config } from '@jest/types'; + +const config: Config.InitialOptions = { + ...baseJestConfig, + preset: 'react-native', + transform: { + '^.+\\.(js|jsx)$': 'babel-jest', + '\\.(ts|tsx)$': 'ts-jest', + }, + transformIgnorePatterns: [ + "node_modules/(" + + "?!(jest-)?react-native" + + "|react-clone-referenced-element" + + "|@react-native-community" + + "|expo(nent)?" + + "|@expo(nent)?/.*" + + "|react-navigation" + + "|@react-navigation/.*" + + "|@unimodules/.*" + + "|unimodules" + + "|sentry-expo" + + "|native-base" + + "|@sentry/.*" + + "|native-base-*)" + ], + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], +}; + +export default config; diff --git a/packages/@magic-sdk/react-native-bare/package.json b/packages/@magic-sdk/react-native-bare/package.json new file mode 100644 index 000000000..7bdf7ea3d --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/package.json @@ -0,0 +1,54 @@ +{ + "name": "@magic-sdk/react-native-bare", + "version": "13.0.0", + "description": "Passwordless authentication for React Native (Bare).", + "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": "node", + "main": "./dist/cjs/index.js", + "module": "./dist/es/index.js", + "types": "./dist/types/index.d.ts", + "dependencies": { + "@aveq-research/localforage-asyncstorage-driver": "^3.0.1", + "@magic-sdk/commons": "^7.0.1", + "@magic-sdk/provider": "^11.1.3", + "@magic-sdk/types": "^10.0.0", + "@react-native-async-storage/async-storage": "^1.15.5", + "@types/lodash": "^4.14.158", + "buffer": "~5.6.0", + "localforage": "^1.7.4", + "localforage-driver-memory": "^1.0.5", + "lodash": "^4.17.19", + "process": "~0.11.10", + "react-native-device-info": "^10.3.0", + "tslib": "^2.0.3", + "whatwg-url": "~8.1.0" + }, + "devDependencies": { + "@babel/core": "^7.15.0", + "@babel/plugin-transform-flow-strip-types": "^7.14.5", + "@babel/runtime": "~7.10.4", + "@react-native-community/async-storage": "^1.12.1", + "metro-react-native-babel-preset": "^0.66.2", + "react": "^16.13.1", + "react-native": "^0.62.2", + "react-native-device-info": "^10.3.0", + "react-native-webview": "8.1.2" + }, + "peerDependencies": { + "@react-native-community/async-storage": ">=1.12.1", + "react": ">=16", + "react-native": ">=0.60", + "react-native-device-info": ">=10.3.0", + "react-native-webview": ">=8" + }, + "gitHead": "1ef062ea699d48d5e9a9375a93b7c147632b05ca" +} diff --git a/packages/@magic-sdk/react-native-bare/src/ambient-types.d.ts b/packages/@magic-sdk/react-native-bare/src/ambient-types.d.ts new file mode 100644 index 000000000..816fffca0 --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/src/ambient-types.d.ts @@ -0,0 +1,19 @@ +declare namespace NodeJS { + export interface Global { + btoa(data: string): string; + atob(data: string): string; + } + + export interface Process { + browser: boolean; + [key: string]: any; + } +} + +declare module '@aveq-research/localforage-asyncstorage-driver' { + export const driverWithoutSerialization: any; +} + +declare module 'react-native-device-info' { + export function getBundleId(): string; +} diff --git a/packages/@magic-sdk/react-native-bare/src/index.ts b/packages/@magic-sdk/react-native-bare/src/index.ts new file mode 100644 index 000000000..0fd3bf919 --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/src/index.ts @@ -0,0 +1,71 @@ +/* + eslint-disable + + global-require, + @typescript-eslint/no-var-requires + */ + +/* istanbul ignore file */ + +import 'regenerator-runtime/runtime'; + +import { createSDK, InstanceWithExtensions, MagicSDKExtensionsOption } from '@magic-sdk/provider'; +import * as processPolyfill from 'process'; +import localForage from 'localforage'; +import { URL as URLPolyfill, URLSearchParams as URLSearchParamsPolyfill } from 'whatwg-url'; +import { Buffer } from 'buffer'; +import * as _ from 'lodash'; +import { getBundleId } from 'react-native-device-info'; +import { driverWithoutSerialization } from '@aveq-research/localforage-asyncstorage-driver'; +import * as memoryDriver from 'localforage-driver-memory'; +import { ReactNativeWebViewController } from './react-native-webview-controller'; +import { SDKBaseReactNative } from './react-native-sdk-base'; + +// Web3 assumes a browser context, so we need +// to provide `btoa` and `atob` shims. + +// We expect `global.process` to be a Node Process for web3.js usage +// so we replace it here. +global.process = _.merge(global.process, processPolyfill); + +(global.process as any).browser = false; + +// WHATWG URL requires global `Buffer` access. +global.Buffer = Buffer; + +// Setup global WHATWG URL polyfills +global.URL = URLPolyfill as any; +global.URLSearchParams = URLSearchParamsPolyfill as any; + +/* istanbul ignore next */ +global.btoa = (str) => Buffer.from(str, 'binary').toString('base64'); +/* istanbul ignore next */ +global.atob = (b64Encoded) => Buffer.from(b64Encoded, 'base64').toString('binary'); + +export * from '@magic-sdk/commons'; + +export const Magic = createSDK(SDKBaseReactNative, { + platform: 'react-native', + sdkName: '@magic-sdk/react-native-bare', + version: process.env.BARE_REACT_NATIVE_VERSION!, + bundleId: getBundleId(), + defaultEndpoint: 'https://box.magic.link/', + ViewController: ReactNativeWebViewController, + configureStorage: /* istanbul ignore next */ async () => { + const lf = localForage.createInstance({ + name: 'MagicAuthLocalStorageDB', + storeName: 'MagicAuthLocalStorage', + }); + + const driver = driverWithoutSerialization(); + await Promise.all([lf.defineDriver(driver), lf.defineDriver(memoryDriver)]); + await lf.setDriver([driver._driver, memoryDriver._driver]); + + return lf; + }, +}); + +export type Magic = MagicSDKExtensionsOption> = InstanceWithExtensions< + SDKBaseReactNative, + T +>; diff --git a/packages/@magic-sdk/react-native-bare/src/react-native-sdk-base.ts b/packages/@magic-sdk/react-native-bare/src/react-native-sdk-base.ts new file mode 100644 index 000000000..ad9e6d559 --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/src/react-native-sdk-base.ts @@ -0,0 +1,8 @@ +import { SDKBase } from '@magic-sdk/provider'; +import { ReactNativeWebViewController } from './react-native-webview-controller'; + +export class SDKBaseReactNative extends SDKBase { + public get Relayer() { + return (this.overlay as ReactNativeWebViewController).Relayer; + } +} diff --git a/packages/@magic-sdk/react-native-bare/src/react-native-webview-controller.tsx b/packages/@magic-sdk/react-native-bare/src/react-native-webview-controller.tsx new file mode 100644 index 000000000..56bee0b9a --- /dev/null +++ b/packages/@magic-sdk/react-native-bare/src/react-native-webview-controller.tsx @@ -0,0 +1,203 @@ +import React, { useState, useCallback, useMemo } from 'react'; +import { StyleSheet, View } from 'react-native'; +import { WebView } from 'react-native-webview'; +import { ViewController, createModalNotReadyError } from '@magic-sdk/provider'; +import { MagicMessageEvent } from '@magic-sdk/types'; +import { isTypedArray } from 'lodash'; +import Global = NodeJS.Global; + +const MAGIC_PAYLOAD_FLAG_TYPED_ARRAY = 'MAGIC_PAYLOAD_FLAG_TYPED_ARRAY'; + +/** + * Builds the Magic `` overlay styles. These base styles enable + * `` 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, + elevation: 10000, + }, + + hide: { + zIndex: -10000, + elevation: 0, + }, + }); +} + +/** + * Overloads React Native's `` with helper methods we require to hide/show + * the rendered ``. + */ +interface ViewWrapper extends View { + showOverlay: () => void; + hideOverlay: () => void; +} + +/** + * View controller for the Magic `` overlay. + */ +export class ReactNativeWebViewController extends ViewController { + private webView!: WebView | null; + private container!: ViewWrapper | null; + private styles: any; + + protected init() { + this.webView = null; + this.container = null; + this.styles = createWebViewStyles(); + } + + /** + * Renders a React Native `` with built-in message handling to and + * from the Magic `