# Mastercard Data Connect Components Flows source: https://developer.mastercard.com/open-finance-us/documentation/connect/components/flows/index.md This section gives more detail on the different flows. ## Application Flows {#application-flows} The following sequence diagrams show what happens in the following situations: * Legacy Institution Flow, Successful Login * Legacy Institution Flow, Login Error * Legacy Institution Flow, MFA Challenge * Legacy Institution Flow, Reconnection Flow (using Data Connect Fix) * OAuth Institution, Popup * OAuth Institution, Redirect
### Legacy Institution Flow, Successful Login {#legacy-institution-flow-successful-login} Diagram components-legacy-login-success ### Legacy Institution Flow, Login Error {#legacy-institution-flow-login-error} Diagram components-legacy-login-error ### Legacy Institution Flow, MFA Challenge {#legacy-institution-flow-mfa-challenge} Diagram components-legacy-login-mfa ### Legacy Institution Flow, Reconnection Flow (using Data Connect Fix) {#legacy-institution-flow-reconnection-flow-using-data-connect-fix} The Reconnection Flow allows Data Connect Fix to be used when a problem occurs with a previously added user account (such as the connection to the user's FI being lost, or if the user's credentials were updated for various reasons). See [Data Connect Fix](https://developer.mastercard.com/open-finance-us/documentation/connect/generate-2-connect-url-apis/index.md#data-connect-fix). Diagram components-legacy-login-fix ### OAuth Institution, Popup {#oauth-institution-popup} Diagram components-oauth-popup ### OAuth Institution, Redirect {#oauth-institution-redirect} Diagram components-oauth-redirect ## SDK Flows {#sdk-flows} The following diagram highlights the key aspects of the Data Connect Components Web SDK and how data flows from the calling application, to the SDK, to Mastercard Servers, and back to the calling application. This shows how user credentials are handled securely. Diagram components-sdk-flow ## Legacy and OAuth Connections {#legacy-and-oauth-connections} The APIs used depends on whether the FI is a legacy or OAuth connection. For legacy connections, the Data Connect experience will ask the user for their user credentials for the FI. For direct or OAuth connections, the user is redirected to a login screen hosted by the FI. ### Legacy connections {#legacy-connections} For connections that do not leverage direct connectivity (i.e., OAuth), a means to embed a login form is provided via this endpoint. **Create Login Forms** API Reference: `POST /connect-components/institutions/{institution_id}/login-forms` Upon calling this endpoint, a customerId is provided as well as the id of the institution for which the customer would like to log into. The response from this call is a JSON structure that cannot be used directly. Instead, the JSON data is provided to the Data Connect Components Web SDK which handles the rendering of the login form. Warning: The serviceAgreement object must be provided in the request body, or the call will fail and no login attempt with the FI will be made. **Render Login Forms** Each element of a login form (i.e., username input, password input) is to be rendered individually, using the Data Connect Components Web SDK. This allows for complete control in placement of the elements. Additionally, the SDK provides means for styling the login form elements. The means for submitting this data (e.g., a button element) is left entirely up to the parent application to design and control. It will be the responsibility of the application developer to ensure that the submit element calls the appropriate Data Connect Components Web SDK method. See [Render Login Form](https://developer.mastercard.com/open-finance-us/documentation/connect/components/integration/ccwebsdk/index.md#render-login-form) in the Data Connect Components Web SDK documentation for more information. **Submitting Login Form Data** Once the user has entered their credentials and triggered the submit button, a call to the Data Connect Components Web SDK's `form.submit()` method must be made. This method will send an event to the login form elements which will, in turn, submit their contents directly to Mastercard's servers. It is important to note that the user credentials contained within the Login Form are never made available to the calling application and the transmission of them is handled within the SDK using iframes. Additionally, security measures, such as same-origin policies, are enforced to ensure that data cannot be exfiltrated from the Login Form elements. See [Submit Login Form](https://developer.mastercard.com/open-finance-us/documentation/connect/components/integration/ccwebsdk/index.md#submit-login-form) in the Data Connect Components Web SDK documentation for more information. ### OAuth connections {#oauth-connections} For OAuth connections, the handling of credentials is facilitated directly by the FI. As such, a URL is needed to direct the user to that managed login page. A call is made to the Mastercard servers to generate this URL for a specific institution and customer. **Create OAuth URL** API Reference: `POST /connect-components/institutions/{institution_id}/oauth-urls` Warning: The serviceAgreement object must be provided in the request body, or the call will fail and no login attempt with the FI will be made. Because the user credential interactions happen entirely within the financial institution's web page, the SDK will not provide any data or emit any events until the user has completed the login and account selection (where available). See [OAuth Usage](https://developer.mastercard.com/open-finance-us/documentation/connect/components/integration/ccwebsdk/index.md#oauth-usage) in the Data Connect Components Web SDK documentation for more information. **LoggedIn Event** Once the user has completed the interaction with the FI, the user will either be directed to a landing page (in the cases where a popup was used to display the OAuth login form), or the user will be redirected back to the calling application (in cases where redirection was used). In both scenarios, a loggedIn event will be emitted by the SDK. Warning: There are special considerations for event handling in cases where redirection is used. It is the calling application's responsibility to ensure that the SDK is present and loaded on the page to which the user is redirected. This event indicates to the calling application that any cleanup work (such as closing popups) should be performed. At the time this event is received, account discovery has not been completed, so it would be appropriate to display a loading screen to the user. See [Events](https://developer.mastercard.com/open-finance-us/documentation/connect/components/integration/ccwebsdk/index.md#events) in the Data Connect Components Web SDK documentation for more information. ### Initiate Reconnection (Data Connect Fix for Components) {#initiate-reconnection-data-connect-fix-for-components} The Initiate Reconnection endpoint (which allows a Data Connect Fix flow for Data Connect Components) can be used when a problem occurs with a previously added user account, such as the connection to the user's FI being lost or the user's credentials were updated (for any number of reasons). You will need the institutionLoginId relating to the user account in question (you can get this value using the Account Aggregation endpoints such as Get Customer Account by ID). Not all connection issues can be resolved using Initiate Reconnection. The [Aggregation Status Code](https://developer.mastercard.com/open-finance-us/documentation/products/manage/aggregation-status-codes/index.md) returned when you call one of the Account Aggregation endpoints will indicate what is causing the issue, and whether using Initiate Reconnection will help. The Data Connect Fix URL can be presented to the user to allow them to re-establish the connection with the FI. API Reference: `POST /connect-components/customers/{customer_id}/institution-login-ids/{institution_login_id}/reconnections`