the connect widget is now fetching its own url

Author: wesrisenmay-mx

example/src/app/connect.tsx

@@ -1,12 +1,10 @@
-import React from "react"
-import { StyleSheet, Platform } from "react-native"
+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"
-
-const baseUrl = Platform.OS === "android" ? "http://10.0.2.2:8089" : "http://localhost:8089"
-const proxy = `${baseUrl}/user/widget_urls`
+import { fetchWidgetUrl } from "../shared/api"
 
 const styles = StyleSheet.create({
   page: {
@@ -18,39 +16,48 @@ const styles = StyleSheet.create({
 export default function Connect() {
   const clientRedirectUrl = Linking.createURL("connect")
 
+  const [url, setUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetchWidgetUrl({ clientRedirectUrl, widgetType: "connect_widget" }).then((url) => {
+      setUrl(url)
+    })
+  }, [clientRedirectUrl])
+
   return (
     <SafeAreaView style={styles.page}>
-      <ConnectWidget
-        url="junk"
-        clientRedirectUrl={clientRedirectUrl}
-        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)}`)
-        }}
-        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}`)
-        }}
-      />
+      {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)}`)
+          }}
+          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,58 @@
+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 FetchWidgetUrlProps {
+  clientRedirectUrl: string
+  widgetType: string
+}
+
+export function buildWidgetConfiguration({ clientRedirectUrl, widgetType }: FetchWidgetUrlProps) {
+  return {
+    ...(widgetType === "connect_widget"
+      ? { data_request: { products: ["identity_verification"] } }
+      : {}),
+    client_redirect_url: clientRedirectUrl,
+    is_mobile_webview: true,
+    ui_message_version: 4,
+    widget_type: widgetType,
+  }
+}
+
+interface WidgetUrlResponse {
+  widget_url: {
+    url: string
+  }
+}
+
+export const fetchWidgetUrl = async (props: FetchWidgetUrlProps) => {
+  const headers: Record<string, string> = {
+    "Accept-Version": "v20250224",
+    "Content-Type": "application/json",
+  }
+
+  const method = "POST"
+  const body = JSON.stringify({
+    widget_url: buildWidgetConfiguration(props),
+  })
+
+  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
+  }
+}