> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect Widget UI Walkthrough

> Explore the Connect Widget's UI and common flows.

Depending on how you've configured the request for the widget, the widget can load to a:

* Top institutions page with a searchbar.
* Specific institution or member and prompt the user for their credentials.
* Prompt for the user to solve multifactor authentication (MFA) challenge.
* Prompt for the user to verify microdeposits in their account.

By default, the widget will show a list of top institutions and a searchbar.

On this page, we'll cover some common flows and functionality within the widget.

## Credential Flow

In the credential flow, users select their financial institution, then enter their username and password. When entering their credentials, users may see additional instructions relevant to that financial institution.

The following image demonstrates a successful credential flow in the Connect Widget.

<img src="https://mintcdn.com/mx-7a01b258/OOfo2VTBgMqAqqgz/images/connect/connect-widget.svg?fit=max&auto=format&n=OOfo2VTBgMqAqqgz&q=85&s=9a1b729216c492a41e33701d8893141e" alt="Connect Widget Credential Flow" width="1756" height="962" data-path="images/connect/connect-widget.svg" />

## OAuth Flow

OAuth is a secure method of authorizing access to a user's data.

When a user attempts to connect to an institution that supports OAuth, the typical flow is:

1. The user is redirected to the bank's site to login.
2. The user then authenticates with the bank and selects which data they want to share with MX.
3. Once the user has completed authorization, they are redirected back to MX's Connect Widget.
4. At this point, MX will retrieve tokens that will allow MX to use the bank's API to access only the data the user allowed.

<Info>
  **INFO**

  Shared data includes both transactional and account information. Users oftentimes only select one or the other, meaning they are only getting about half of the information they are potentially wanting.
</Info>

The following image demonstrates a user selecting an OAuth institution. When the user selects **Go to log in**, they'll be sent to the institution's site to log in. After authorizing their accounts, the user will be sent back to the Connect Widget.

<img src="https://mintcdn.com/mx-7a01b258/OOfo2VTBgMqAqqgz/images/connect/connect-widget-oauth.svg?fit=max&auto=format&n=OOfo2VTBgMqAqqgz&q=85&s=f595f99d4431ab1ee9b944a50f850774" alt="Connect Widget OAuth Flow" width="1810" height="909" data-path="images/connect/connect-widget-oauth.svg" />

## Verification Flow

In the verification flow, the Connect Widget only displays institutions that support instant account verification (IAV).

If you've purchased Microdeposits, then when end users search for an institution that doesn't support IAV, the [microdeposits flow](#microdeposits-flow) begins.

The end user will be prompted to verify an existing connection (if they have one) before going to search. The widget will only search for and display institutions that support IAV.

The end user will then create a member, start aggregating IAV data, and answer multifactor authentication if necessary.

## Microdeposits Flow

<Info>
  **INFO**

  You must have Microdeposits enabled for this flow to occur.
</Info>

The microdeposits flow occurs when the widget's `data_request.products` include `account_verification` and the user searched for an institution that doesn't support IAV.

When this happens, the end user will be able to connect with account numbers, then verify using microdeposits.

For more information, see [How to Request a Microdeposit Verification](/products/connectivity/microdeposits/connect-widget).

## MFA Flow

The MFA flow occurs when the Connect Widget is loaded directly to a financial institution where the member is in a `CHALLENGED` state.

The widget will automatically prompt the user to complete one of the following challenges:

* One time password
* MFA question
* MFA image

<Info>
  **INFO**

  You can load the Connect Widget directly to resolve MFA for a member by setting `current_member_guid`.
</Info>

The following example shows the three possible MFA challenges.

<img src="https://mintcdn.com/mx-7a01b258/OOfo2VTBgMqAqqgz/images/connect/connect-widget-mfa.svg?fit=max&auto=format&n=OOfo2VTBgMqAqqgz&q=85&s=eb864b887c256d11e50054656257fa14" alt="image of the Connect Widget" width="1810" height="900" data-path="images/connect/connect-widget-mfa.svg" />

## Global Navbar

The widget's navbar includes a back button that allows end users to navigate to the previous screen. This button is available on most screens. Some exceptions include the connecting screen, connected screens, and MFA screens, where the back button is not displayed.

## Add Account Manually

Users can add an account manually to track accounts, assets, and other things that don't have a live connection.

Users will enter fields depending on the account type they select. Each account type has an account name field, an account balance field, and a section where the user can select if the account is for personal or business use.

## Dark Mode

You can set the widget to dark mode when configuring the request.

## Errors

A variety of errors can occur when users connect to a member. For a full list of errors, see [Member Connection Statuses](/api-reference/platform-api/reference/members#member-connection-statuses).
