Remove functionality from the connect widget

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Custom onLoadUrlInBrowser and onLoadUrlInBrowserError props
 - uiMessageWebviewUrlScheme is no longer supported. The default scheme of the mx widgets will be used which is "mx". clientRedirectUrl has been the recommended method for redirecting from oauth for [years](https://docs.mx.com/release-notes/2022/#february)
+- The proxy property has been removed from the connect widget. Before a connect widget is rendered a widget url should be fetched and then provided to the widget.
 
 ### Changed
 

example/app.json

@@ -28,7 +28,12 @@
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
-      "expo-router",
+      [
+        "expo-router",
+        {
+          "origin": false
+        }
+      ],
       [
         "expo-splash-screen",
         {

example/src/app/connect.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react"
+import { StyleSheet } from "react-native"
+import { SafeAreaView } from "react-native-safe-area-context"
+import * as Linking from "expo-linking"
+
+import { ConnectWidget } from "@mxenabled/react-native-widget-sdk"
+import { fetchConnectWidgetUrl } from "../shared/api"
+
+const styles = StyleSheet.create({
+  page: {
+    backgroundColor: "#ffffff",
+    paddingTop: 10,
+  },
+})
+
+export default function Connect() {
+  const clientRedirectUrl = Linking.createURL("connect")
+
+  const [url, setUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetchConnectWidgetUrl(clientRedirectUrl).then((url) => {
+      setUrl(url)
+    })
+  }, [clientRedirectUrl])
+
+  return (
+    <SafeAreaView style={styles.page}>
+      {url && (
+        <ConnectWidget
+          url={url}
+          onSsoUrlLoadError={(error) => {
+            console.error(`SSO URL load error: ${error}`)
+          }}
+          onMessage={(url) => {
+            console.log(`Got a message: ${url}`)
+          }}
+          onInvalidMessageError={(url, _error) => {
+            console.log(`Got an unknown message: ${url}`)
+          }}
+          onLoad={(_payload) => {
+            console.log("Widget is loading")
+          }}
+          onLoaded={(_payload) => {
+            console.log("Widget has loaded")
+          }}
+          onMemberConnected={(payload) => {
+            console.log(`Member connected with payload: ${JSON.stringify(payload)}`)
+          }}
+          onOAuthError={(payload) => {
+            console.log(`OAuth error with payload: ${JSON.stringify(payload)}`)
+          }}
+          onOAuthRequested={(payload) => {
+            console.log(`OAuth requested with URL: ${payload.url}`)
+          }}
+          onStepChange={(payload) => {
+            console.log(`Moving from ${payload.previous} to ${payload.current}`)
+          }}
+          onSelectedInstitution={(payload) => {
+            console.log(`Selecting ${payload.name}`)
+          }}
+        />
+      )}
+    </SafeAreaView>
+  )
+}

example/src/shared/api.ts

@@ -0,0 +1,47 @@
+import { Platform } from "react-native"
+
+const baseUrl = Platform.OS === "android" ? "http://10.0.2.2:8089" : "http://localhost:8089"
+const proxyUrl = `${baseUrl}/user/widget_urls`
+
+interface WidgetUrlResponse {
+  widget_url: {
+    url: string
+  }
+}
+
+export const fetchConnectWidgetUrl = async (clientRedirectUrl: string) => {
+  const headers: Record<string, string> = {
+    "Accept-Version": "v20250224",
+    "Content-Type": "application/json",
+  }
+
+  const method = "POST"
+  const body = JSON.stringify({
+    widget_url: {
+      client_redirect_url: clientRedirectUrl,
+      is_mobile_webview: true,
+      ui_message_version: 4,
+      widget_type: "connect_widget",
+      data_request: { products: ["identity_verification"] },
+    },
+  })
+
+  try {
+    const response = await fetch(proxyUrl, {
+      body,
+      headers,
+      method,
+    })
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch widget URL: ${response.status} ${response.statusText}`)
+    }
+
+    const data: WidgetUrlResponse = await response.json()
+
+    return data.widget_url.url
+  } catch (error) {
+    console.error("Error fetching widget URL:", error)
+    throw error
+  }
+}

src/components/ConnectWidgets.tsx

@@ -7,12 +7,10 @@ import {
 import { Type, SsoUrlProps, ConnectWidgetConfigurationProps } from "../sso"
 import * as WebBrowser from "expo-web-browser"
 import { makeWidgetComponentWithDefaults } from "./make_component"
-import { useOAuthDeeplink, OAuthProps } from "./oauth"
-import { useWidgetRendererWithRef, StylingProps } from "./renderer"
+import { StylingProps, useWidgetRenderer } from "./renderer"
 
 export type ConnectWidgetProps = SsoUrlProps &
   StylingProps &
-  OAuthProps &
   ConnectPostMessageCallbackProps<string> &
   ConnectWidgetConfigurationProps &
   JSX.IntrinsicAttributes
@@ -40,12 +38,10 @@ export function ConnectWidget(props: ConnectWidgetProps) {
     onOAuthRequested,
   }
 
-  const [ref, elem] = useWidgetRendererWithRef(
+  const elem = useWidgetRenderer(
     { ...modifiedProps, widgetType: Type.ConnectWidget },
     dispatchConnectLocationChangeEvent,
   )
 
-  useOAuthDeeplink(ref, modifiedProps)
-
   return elem
 }