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

# Provider login redirect

> Connect instructs you to redirect the customer to an external page.

When customer selects a provider with a DIRECT integration, Connect will instruct you to redirect the customer to an external page where they will login to their provider's online dashboard and provide consent for your application to access their tariff.

<Steps>
  <Step title="Handling Redirect">
    Connect will respond with the `session_redirect` route.

    <CodeGroup>
      ```json Connect response theme={"system"}
      {
        "connect_token": "cot_6587fa4362341be5b524de3b",
        "route": "session_redirect",
        "live_mode": false,
        "data": {
          "redirect_url": "https://british-gas-uk.connect.flatpeak.com"
        }
      }
      ```
    </CodeGroup>

    You will redirect the session to `redirect_url` via HTTP-GET, appending `connect_token`.

    ```http Example redirect (http) theme={"system"}
    GET /?fp_cot=cot_6587fa4362341be5b524de3b HTTP/1.1
    Host: british-gas-uk.connect.flatpeak.com
    ```

    <Note>You can append any other query parameter to redirect, for example, your internal session or a security key. They will be returned to you via callback later.</Note>
  </Step>

  <Step title="Handling Callback">
    Once you redirect the customer's session to `redirect_url`, you will soon receive a callback to the URI you specified when you created the `connect_token` via the API. It will have the same query params and payload that you appended to the original redirect.

    ```http Example callback theme={"system"}
    myapp://oauth-callback/flatpeak?fp_cot=cot_6587fa4362341be5b524de3b
    ```

    POST your response to Connect to `session_restore` route:

    ```json Your POST to Connect theme={"system"}
    curl --request POST \
      --url https://connect.flatpeak.com \
      --header 'Content-Type: application/json' \
      --data '{
      "connect_token": "cot_6587fa4362341be5b524de3b",
      "route": "session_restore",
    }'
    ```
  </Step>
</Steps>

**Your customer's experience with redirects**

Your customer will likely interact with only two pages - `Login` and `Consent`.

However, depending on how the provider implements the login process, the configuration of their account (such as having multiple properties supplied under one contract) and other factors, they may be presented with additional pages:

<Tabs>
  <Tab title="Login">
    <Frame>
      <img src="https://mintcdn.com/flatpeak/TQaxvXRAD8Q-IDz9/images/Direct%20Login.png?fit=max&auto=format&n=TQaxvXRAD8Q-IDz9&q=85&s=7ff12f660b9c79084f2a0f56a4f5a2eb" style={{ width: "200px" }} width="1500" height="3408" data-path="images/Direct Login.png" />
    </Frame>
  </Tab>

  <Tab title="Retry">
    <Frame>
      <img src="https://mintcdn.com/flatpeak/R_LWNRztMA209Dv3/images/Direct%20Retry.png?fit=max&auto=format&n=R_LWNRztMA209Dv3&q=85&s=c0e722428121b2f29f5ac5a1ac82465c" style={{ width: "200px" }} width="375" height="852" data-path="images/Direct Retry.png" />
    </Frame>
  </Tab>

  <Tab title="OTP">
    <Frame>
      <img src="https://mintcdn.com/flatpeak/R_LWNRztMA209Dv3/images/Direct%20OTP.png?fit=max&auto=format&n=R_LWNRztMA209Dv3&q=85&s=bab0a7d408e6227239675becf9aac605" style={{ width: "200px" }} width="375" height="852" data-path="images/Direct OTP.png" />
    </Frame>
  </Tab>

  <Tab title="No tariff">
    <Frame>
      <img src="https://mintcdn.com/flatpeak/R_LWNRztMA209Dv3/images/Direct%20No%20Fariff%20Found.png?fit=max&auto=format&n=R_LWNRztMA209Dv3&q=85&s=d01dbd720e043f99a0eb6e76910d689d" style={{ width: "200px" }} width="375" height="852" data-path="images/Direct No Fariff Found.png" />
    </Frame>
  </Tab>

  <Tab title="Multi addresses">
    <Frame>
      <img src="https://mintcdn.com/flatpeak/R_LWNRztMA209Dv3/images/Direct%20Multiaddress.png?fit=max&auto=format&n=R_LWNRztMA209Dv3&q=85&s=cf261582395fb419d2ed1ffd60676426" style={{ width: "200px" }} width="375" height="852" data-path="images/Direct Multiaddress.png" />
    </Frame>
  </Tab>

  <Tab title="Consent">
    <Frame>
      <img src="https://mintcdn.com/flatpeak/TQaxvXRAD8Q-IDz9/images/Direct%20Consent.png?fit=max&auto=format&n=TQaxvXRAD8Q-IDz9&q=85&s=80ffc99035a00666eacfc9f2333e68ca" style={{ width: "200px" }} width="1500" height="3408" data-path="images/Direct Consent.png" />
    </Frame>
  </Tab>
</Tabs>

<Note>The actual look and feel may vary between providers as they develop and host the pages. The word \[Brand] will always be replaced with your business name.</Note>

**UI integration tip**

When redirecting to an external page, use a modal or a sheet [iOS](https://developer.apple.com/design/human-interface-guidelines/sheets), [Android](https://m3.material.io/components/bottom-sheets/guidelines) to avoid layout issues—especially on devices with camera notches or cutouts.
This ensures a clean, contained user experience without UI elements being obscured.

<Frame>
  <img src="https://mintcdn.com/flatpeak/-Ak0AVMaQzkfm1jo/images/modal.png?fit=max&auto=format&n=-Ak0AVMaQzkfm1jo&q=85&s=a126e943bcdc8acaf2549afb1ee95f10" style={{ width: "250px" }} width="489" height="231" data-path="images/modal.png" />
</Frame>
