Devin/1744245477 implement login with popup v2 (#879)

* Implement loginWithPopupV2 method in React Native OAuth extensions

Co-Authored-By: [email protected] <[email protected]>

* Fix loginWithPopupV2 implementation to use Verify method

Co-Authored-By: [email protected] <[email protected]>

* Adding babel plugins

* bump compiler options to es2022

* bump esbuild target to es2022

* remove local forage

* bump expo-web-browser

* remove unused dependency

* add back rn

* mock localforage

* revert build target

* es2022

* Remove Extension class and rename InternalExtension to MagicExtension

Co-Authored-By: [email protected] <[email protected]>

* remove static field

* remove static field

* update yarn.lock

* fix test

* fix tests

* update yarn.lock

* Revert "Remove Extension class and rename InternalExtension to MagicExtension…"

This reverts commit d3d0911.

* bump target to es 2022

* update yarn.lock

* update yarn.lock

* remove static plugin

* remove crypto

* update yarn.lock

* feat: hardcode embedded wallet url

* remove console

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: sherzod-bakhodirov <[email protected]>

Author: 3 people

packages/@magic-ext/react-native-bare-oauth/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+};

packages/@magic-ext/react-native-bare-oauth/package.json

@@ -26,14 +26,11 @@
     ]
   },
   "dependencies": {
-    "crypto-js": "^4.2.0",
-    "react-native-device-info": "^10.3.0"
+    "react-native-inappbrowser-reborn": "^3.7.0"
   },
   "devDependencies": {
     "@magic-sdk/react-native-bare": "^30.4.2",
-    "@magic-sdk/types": "^24.21.0",
-    "@types/crypto-js": "~4.2.0",
-    "react-native-inappbrowser-reborn": "^3.7.0"
+    "@magic-sdk/types": "^24.21.0"
   },
   "peerDependencies": {
     "@magic-sdk/react-native-bare": ">=13.0.0",

packages/@magic-ext/react-native-bare-oauth/src/crypto.ts

@@ -1,13 +1,12 @@
 import { InAppBrowser } from 'react-native-inappbrowser-reborn';
 import { Extension } from '@magic-sdk/react-native-bare';
-import { getBundleId } from 'react-native-device-info';
-import { createCryptoChallenge } from './crypto';
 import {
   OAuthErrorData,
   OAuthPayloadMethods,
   OAuthRedirectConfiguration,
   OAuthRedirectError,
   OAuthRedirectResult,
+  OAuthRedirectStartResult,
 } from './types';
 
 export class OAuthExtension extends Extension.Internal<'oauth'> {
@@ -23,18 +22,38 @@ export class OAuthExtension extends Extension.Internal<'oauth'> {
   public loginWithPopup(configuration: OAuthRedirectConfiguration) {
     return this.utils.createPromiEvent<OAuthRedirectResult>(async (resolve, reject) => {
       try {
-        const { provider, query, redirectURI } = await createURI.call(this, configuration);
-        const url = `https://auth.magic.link/v1/oauth2/${provider}/start?${query}`;
+        const startPayload = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.Start, [
+          {
+            ...configuration,
+            apiKey: this.sdk.apiKey,
+            platform: 'rn',
+          },
+        ]);
+
+        const result = await this.request<OAuthRedirectStartResult | OAuthRedirectError>(startPayload);
+        const successResult = result as OAuthRedirectStartResult;
+        const errorResult = result as OAuthRedirectError;
+
+        if (errorResult.error) {
+          reject(
+            this.createError<OAuthErrorData>(errorResult.error, errorResult.error_description ?? 'An error occurred.', {
+              errorURI: errorResult.error_uri,
+              provider: errorResult.provider,
+            }),
+          );
+          return;
+        }
+
+        if (!successResult?.oauthAuthoriationURI) {
+          reject(this.createError<object>('NO_AUTH_URI', 'No authorization URI was returned', {}));
+          return;
+        }
 
-        /**
-         * Response Type Inspired by:
-         * https://docs.expo.io/versions/latest/sdk/webbrowser/#returns
-         */
-        const res = await InAppBrowser.openAuth(url, redirectURI, {});
+        const url = successResult.oauthAuthoriationURI;
+        const res = await InAppBrowser.openAuth(url, configuration.redirectURI, {});
 
         if (res.type === 'success') {
           const queryString = new URL(res.url).search;
-
           resolve(getResult.call(this, queryString.toString()));
         } else {
           reject(this.createError<object>(res.type, 'User has cancelled the authentication', {}));
@@ -50,66 +69,14 @@ export class OAuthExtension extends Extension.Internal<'oauth'> {
   }
 }
 
-const OAUTH_REDIRECT_METADATA_KEY = 'oauth_redirect_metadata';
-
-export async function createURI(this: OAuthExtension, configuration: OAuthRedirectConfiguration) {
-  // Bust any old, in-progress OAuth flows.
-  await this.utils.storage.removeItem(OAUTH_REDIRECT_METADATA_KEY);
-
-  // Unpack configuration, generate crypto values, and persist to storage.
-  const { provider, redirectURI, scope, loginHint } = configuration;
-  const { verifier, challenge, state } = await createCryptoChallenge();
-  const bundleId = getBundleId();
-
-  /* Stringify for RN Async storage */
-  const storedData = JSON.stringify({
-    verifier,
-    state,
-  });
-
-  await this.utils.storage.setItem(OAUTH_REDIRECT_METADATA_KEY, storedData);
-
-  // Formulate the initial redirect query to Magic's OAuth hub.
-  // Required fields:
-  //   - `magic_api_key`
-  //   - `magic_challenge`
-  //   - `state`
-  //   - `redirect_uri`
-  //   - `platform`
-  // Optional fields:
-  //   - `bundleId`
-
-  const query = [
-    `magic_api_key=${encodeURIComponent(this.sdk.apiKey)}`,
-    `magic_challenge=${encodeURIComponent(challenge)}`,
-    `state=${encodeURIComponent(state)}`,
-    `platform=${encodeURIComponent('rn')}`,
-    scope && `scope=${encodeURIComponent(scope.join(' '))}`,
-    redirectURI && `redirect_uri=${encodeURIComponent(redirectURI)}`,
-    loginHint && `login_hint=${encodeURIComponent(loginHint)}`,
-    bundleId && `bundleId=${encodeURIComponent(bundleId)}`,
-  ].reduce((prev, next) => (next ? `${prev}&${next}` : prev));
-
-  return {
-    query,
-    provider,
-    redirectURI,
-  };
-}
-
 export function getResult(this: OAuthExtension, queryString: string) {
   return this.utils.createPromiEvent<OAuthRedirectResult>(async (resolve, reject) => {
-    const json: string = (await this.utils.storage.getItem(OAUTH_REDIRECT_METADATA_KEY)) as string;
-
-    const { verifier, state } = JSON.parse(json);
-
-    // Remove the save OAuth state from storage, it stays in memory now...
-    this.utils.storage.removeItem(OAUTH_REDIRECT_METADATA_KEY);
-
-    const parseRedirectResult = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.ParseRedirectResult, [
-      queryString,
-      verifier,
-      state,
+    const parseRedirectResult = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.Verify, [
+      {
+        authorizationResponseParams: queryString,
+        magicApiKey: this.sdk.apiKey,
+        platform: 'rn',
+      },
     ]);
 
     // Parse the result, which may contain an OAuth-formatted error.

packages/@magic-ext/react-native-bare-oauth/src/index.ts

@@ -1,7 +1,9 @@
 import { MagicUserMetadata } from '@magic-sdk/types';
 
 export enum OAuthPayloadMethods {
-  ParseRedirectResult = 'magic_oauth_parse_redirect_result',
+  Start = 'magic_oauth_login_with_redirect_start',
+  Verify = 'magic_oauth_login_with_redirect_verify',
+  Popup = 'magic_oauth_login_with_popup',
 }
 
 export type OAuthProvider =
@@ -107,3 +109,9 @@ export enum OAuthErrorCode {
   ServerError = 'server_error',
   TemporarilyUnavailable = 'temporarily_unavailable',
 }
+
+export interface OAuthRedirectStartResult {
+  oauthAuthoriationURI?: string;
+  useMagicServerCallback?: boolean;
+  shouldReturnURI?: boolean;
+}

packages/@magic-ext/react-native-bare-oauth/src/types.ts

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['babel-preset-expo'],
+};

packages/@magic-ext/react-native-expo-oauth/babel.config.js

@@ -26,16 +26,17 @@
     ]
   },
   "dependencies": {
-    "@magic-sdk/types": "^10.0.0",
-    "crypto-js": "^4.2.0",
-    "expo-application": "^5.0.1",
-    "expo-web-browser": ">=12.0.0"
+    "expo-web-browser": "14.0.2"
   },
   "devDependencies": {
     "@magic-sdk/react-native-expo": "^30.4.2",
+    "@magic-sdk/types": "^24.18.2",
+    "@react-native-async-storage/async-storage": "^2.1.2",
     "@types/crypto-js": "~4.2.0"
   },
   "peerDependencies": {
-    "@magic-sdk/react-native-expo": ">=13.0.0"
+    "@magic-sdk/react-native-expo": ">=13.0.0",
+    "@magic-sdk/types": "^24.18.2",
+    "@react-native-async-storage/async-storage": "^2.1.2"
   }
 }