remix_widgets_oauth_sequence.svg

Mobile Widgets OAuth Flow

This diagram illustrates the OAuth authentication flow for third-party integrations (e.g., Hubspot) within mobile widgets using the Remix Container App.

Flow Overview

The mobile widgets OAuth flow is unique in that it begins directly from a widget on the user's device and leverages the device's default browser for authentication. The Remix Container App orchestrates the navigation between different flows (_rmx_widgets and _rmx_home) to manage the authentication process while keeping the user experience smooth.

Step-by-Step Process

  1. Widget Setup: User installs the app containing widgets and sets a widget on their device. The widget displays a view prompting: "Tap to begin sign in".
  2. Initiation: User taps the sign-in prompt on the widget, which redirects them to the Remix Container App installed on their device.
  3. OAuth Screen Navigation: The container app navigates to the oauth_signin screen in the _rmx_widgets flow.
  4. Open Link Execution: The oauth_signin screen executes an open link action that opens the OAuth URL in the user's device default browser.
  5. Background Navigation: While the browser opens, the Remix Container App simultaneously navigates to the home screen in the _rmx_home flow.
  6. User Authentication: The user completes the OAuth sign-in process in their device's default browser on the third-party platform (Hubspot).
  7. Return to Container: After successful authentication, the browser redirects back to the Remix Container App, specifically to the confirmation screen in the _rmx_widgets flow.
  8. Widget Reload: The confirmation screen reloads all widgets, allowing them to access and use the newly acquired authentication token.
  9. Home Navigation: The confirmation screen then navigates the user to the home screen in the _rmx_home flow.
  10. Completion: The user manually navigates to the screen where their widgets are located. The widgets are now functioning with the authenticated token.

Dependencies

For this OAuth flow to function properly, _rmx_widgets must include two required screens: