Chrome Extension OAuth Flow

This diagram illustrates the OAuth authentication flow for third-party integrations (e.g., Hubspot) within the Remix Chrome Extension.

Flow Overview

The OAuth process in the Chrome Extension follows a different pattern than the desktop flow. Instead of using local Remix screens, it leverages a hosted web app and a server-side service agent to handle the authentication callback and messaging.

Step-by-Step Process

1. Initiation: User opens a screen in the Chrome Extension that requires third-party authentication and clicks the auth button (e.g., Hubspot).
2. Direct Popup: The Chrome Extension opens a browser popup window directly to the third-party OAuth URL. Unlike the desktop flow, there is no intermediate Remix screen involved.
3. User Authentication: The user completes the OAuth sign-in process on the third-party platform (Hubspot) within the popup window.
4. OAuth Handler Redirect: After successful authentication, the third party redirects to the OAuth Handler at https://remix.app/remix/oauth_handler (a hosted web app).
5. Service Agent Call: The OAuth Handler uses the user's token and calls the "publish" service agent in the remix workspace hosted on https://agt.remixlabs.com. Service Agent Call: The OAuth Handler uses the user's token and calls the "publish" service agent in the remix workspace hosted on https://agt.remixlabs.com. This service publishes messages to notify the subscriber of their successful sign-in within the Chrome Extension..
6. Message Publication: The publish service agent sends a message to the Chrome Extension notifying it that OAuth is complete.
7. Completion: The Chrome Extension screen (which has remained open and listening throughout the entire process) receives the notification and closes the popup window.

Dependencies

For this OAuth flow to function properly, the following components must be deployed:

• OAuth Handler - Must be hosted at https://remix.app/remix/oauth_handler to receive OAuth callbacks from third-party services
• Publish Service Agent - Must be deployed in the remix workspace at https://agt.remixlabs.com to handle message publishing between the OAuth Handler and Chrome Extension

Extension third party oauth component

To try an example of third-party OAuth in the extension, search for "third party oauth" and select "Extension third party oauth example"