Accounts Widget OAuth Does Not Work

[brianarpie-forme]

Describe the bug

Accounts Widget OAuth does not work.

I believe the following prop is missing from the creation of the AccountsWidget which utilizes OAuth when tapping on "Add Account":

onOAuthRequested: makeDefaultConnectOnOAuthRequested(props)

This code exists for ConnectWidget which is able to perform OAuth.

Device information

• Device: iPhone 14
• OS: 17.X
• React Native version: 0.71 and 0.73
• MX React Native Widget SDK version: 1.0.8 and 1.1.2
• Are you using Expo: No

[brianarpie-forme]

Hi @emilysallstrom, can you reproduce this? I am planning on submitting a pull request this week to fix it. Thank you for taking a look!

[emilysallstrom]

@brianarpie-forme Apologies, I just noticed this. Can you give an example in code of what you're trying to do? It sounds like you're expecting a property in <AccountsWidget ... /> that doesn't exist, but it does exist in the <ConnectWidget ... />? You mentioned you may submit PR to fix it - did your fix work?

[brianarpie-forme]

Hi @emilysallstrom,

We ended up using pnpm patch to fix the issue, but a new issue recently came up when adding any new account through the Accounts widget.

It's still true for us that we must use the ConnectWidget instead of the exported AccountsWidget to get OAuth to work from the SDK.

However, the behavior upon tapping "Add an Account" changed at some point. The webview is now opening up a URL https://int-widgets.moneydesktop.com/md/accounts/... (dev, of course -- becasueint-, but also true for the production URL). This was calling the request interceptor with intent to open in the browser. This made it impossible to add any new accounts. We adjusted the patch to fix this issue -- and this hack works for all of our tested use cases, but I doubt it's the intended fix.

Here are the patches we've applied so you can better understand what we've been up against. The first patch is for 1.0.8, and the second patch is for 1.0.9.

Patch applied from Jan 22:

index 77a9ad9787d0e43cbaad6e2a0291ea09ca7f56bb..18b0960f60e7c19a03643d08cc0e46303109ba7d 100644
--- a/dist/src/components/ConnectWidgets.js
+++ b/dist/src/components/ConnectWidgets.js
@@ -13,7 +13,7 @@ export function ConnectWidget(props) {
         onOAuthRequested: makeDefaultConnectOnOAuthRequested(props),
         ...props,
     };
-    const [ref, elem] = useWidgetRendererWithRef({ ...props, widgetType: Type.ConnectWidget }, dispatchConnectLocationChangeEvent);
+    const [ref, elem] = useWidgetRendererWithRef({ widgetType: Type.ConnectWidget, ...props }, dispatchConnectLocationChangeEvent);
     useOAuthDeeplink(ref, props);
     return elem;
 }
diff --git a/dist/src/sso/widget_configuration.d.ts b/dist/src/sso/widget_configuration.d.ts
index f5333b9718bb4babe5d7c3db22e6efd4f536f71e..1c86b47ddc300ff3249c67ec8d5f85b88579d308 100644
--- a/dist/src/sso/widget_configuration.d.ts
+++ b/dist/src/sso/widget_configuration.d.ts
@@ -43,6 +43,7 @@ export declare type WidgetConfiguration = {
 };
 export declare type ConnectWidgetConfigurationProps = Camelize<ConnectWidgetConfiguration>;
 export declare type ConnectWidgetConfiguration = WidgetConfiguration & {
+    widget_type?: string;
     client_redirect_url?: string;
     current_institution_code?: string;
     current_institution_guid?: string;
diff --git a/src/components/ConnectWidgets.tsx b/src/components/ConnectWidgets.tsx
index 577409ec69f159b741e53f4043405239136a7c72..635f99da034dc6bbb79389ffa829a73da8fcc608 100644
--- a/src/components/ConnectWidgets.tsx
+++ b/src/components/ConnectWidgets.tsx
@@ -29,7 +29,7 @@ export function ConnectWidget(props: ConnectWidgetProps) {
   }

   const [ref, elem] = useWidgetRendererWithRef(
-    { ...props, widgetType: Type.ConnectWidget },
+    { widgetType: Type.ConnectWidget, ...props },
     dispatchConnectLocationChangeEvent,
   )

diff --git a/src/sso/widget_configuration.ts b/src/sso/widget_configuration.ts
index 60614413cdd0f43b589b80a89d4126f4b2fc84e2..83fb404c20fd0466e8e7a6b7c4fc49e883a74e10 100644
--- a/src/sso/widget_configuration.ts
+++ b/src/sso/widget_configuration.ts
@@ -65,6 +65,7 @@ export type WidgetConfiguration = {

 export type ConnectWidgetConfigurationProps = Camelize<ConnectWidgetConfiguration>
 export type ConnectWidgetConfiguration = WidgetConfiguration & {
+  widget_type?: string
   client_redirect_url?: string
   current_institution_code?: string
   current_institution_guid?: string

We removed that patch and are now applying this patch:

diff --git a/dist/src/components/request_interceptor.js b/dist/src/components/request_interceptor.js
index 492ef0478c51422f3981e12a97808cc0fe71e0bf..118c2c25e6bc669f96857de7adaf2f4d5cd9f5e7 100644
--- a/dist/src/components/request_interceptor.js
+++ b/dist/src/components/request_interceptor.js
@@ -33,14 +33,23 @@ export function makeRequestInterceptor(widgetUrl, uiMessageWebviewUrlScheme, cal
     return function (request) {
         const action = interceptor.action(request);
         switch (action) {
+            // [05/13/2024][PATCH]
+            // The Accounts Widget broke because of a change in the messages from the underlying Webview. 
+            // This is a hack to fix connecting an account from this widget.
+            // We've tested it rigorously and can see it's working properly, disabling all "LoadInBrowser" actions. 
+            // In theory, the only time we want to load in the browser is during an OAuth flow, but this is handled
+            // without this interception.  Before this, clicking "Add an account" would open up Safari,
+            // and would break the flow to connect a new account.
+            case Action.LoadInBrowser:
             case Action.LoadInApp:
                 return true;
             case Action.Intercept:
                 callbacks.onIntercept?.(request.url);
                 return false;
-            case Action.LoadInBrowser:
-                callbacks.onLoadUrlInBrowser?.(request.url);
-                return false;
+            // [05/13/2024][DEPRECATED]
+            // case Action.LoadInBrowser:
+            //     callbacks.onLoadUrlInBrowser?.(request.url);
+            //     return false;
         }
     };
 }