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

# Identity Provider Configuration

> Configure Stytch as an identity provider using the Stytch Next.js SDK

<Frame>
  <img src="https://mintcdn.com/stytch-34ca0595/chUftqYqk2C1W0Ql/images/api-reference/b2c/frontend-sdks/prebuilt-ui-identity-provider.png?fit=max&auto=format&n=chUftqYqk2C1W0Ql&q=85&s=71a895007e4c575f0257b91305ed5280" alt="Example of IDP SSO Consent Screen UI" style={{ maxWidth: "400px" }} width="848" height="814" data-path="images/api-reference/b2c/frontend-sdks/prebuilt-ui-identity-provider.png" />
</Frame>

The `IdentityProvider` component is used to enable the logged-in User to perform an OAuth Authorization flow with a pre-registered Connected App. The UI component will automatically parse out OAuth related fields from the query params, such as `client_id`, `redirect_uri`, `scope`, and `state`.

The User must be logged in before this component is rendered.

For an overview of when consent is required, see our [Consent Management guide](/connected-apps/resources/consent-management).

## Props

<ParamField path="presentation.theme" type="object or array">
  The `presentation.theme` object allows you to customize the look of the SDK. You can specify some of them or none at all. We'll use our defaults for the ones you don't specify.

  If you pass in an array of two themes, the first will automatically be used when the user's OS is in light mode, and the second in dark mode.

  See [our pre-built themes](../theming#pre-built-themes), [how to write your own theme](../theming#creating-your-own-theme) or [reference for all properties](../theming#reference).
</ParamField>

<ParamField path="presentation.options" type="object">
  The `presentation.options` object customizes non-style related aspects of the SDK's appearance.

  You can specify some of them or none at all. We'll use our defaults for the ones you don't specify.

  <Expandable title="properties">
    <ParamField path="hideHeaderText" type="boolean">
      When this value is true, the title and description text will not show in the SDK.
    </ParamField>

    <ParamField path="logo" type="object">
      The configuration object for your custom logo.

      <ParamField path="logo.url" type="string">
        The URL of your custom logo.
      </ParamField>

      <ParamField path="logo.alt" type="string">
        The alt text for the logo for non-visual users. This is required for accessibility.
      </ParamField>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="presentation.icons" type="object">
  Allows our icons to be overridden. See [icon customization guide](../theming#icon-customization) for more information.
</ParamField>

<ParamField path="callbacks" type="object">
  Optional callbacks that are triggered by various events in the SDK. See more details about the callbacks [here](/api-reference/consumer/frontend-sdks/react/prebuilt-ui/identity-provider/callbacks).

  <Expandable title="properties">
    <ParamField path="onEvent" type="(data) => void">
      A callback function that responds to events sent from the SDK.
    </ParamField>

    <ParamField path="onError" type="(data) => void">
      A callback function that responds to errors in the SDK. It is useful for debugging during development and error handling in production.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="getIDPConsentManifest" type="function">
  Optional function to customize the consent screen based on the scopes requested by the client.

  This function expects an object of type `{ scopes: string[]; clientName: string }` and returns a type of `IDPConsentSection[] | IDPConsentItem[]`.

  If not provided, default scope descriptions will be used.

  <Expandable title="arguments">
    <ParamField path="IDPConsentSection" type="{ header: string; items: IDPConsentItem[] }">
      A top-level UI section with a header and multiple sub-items.

      `{header: "ChatGPT is requesting to:", items: ["view your saved information"]}.`
    </ParamField>

    <ParamField path="IDPConsentItem" type="string | { text: string; details: string[] }">
      A single item to render. Can either be a simple string or an object with optional expandable details.

      `{ text: "view your saved information", details: ["Your email", "Your name", "Your phone number"] }`
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="trustedAuthTokenParams" type="object">
  The trusted auth token params to use for the authorization flow.

  <Expandable title="properties">
    <ParamField path="trustedAuthToken" type="string">
      The trusted auth token to be exchanged for a session.
    </ParamField>

    <ParamField path="tokenProfileID" type="string">
      The ID of the token profile, from the Stytch Dashboard, to use for the authorization flow.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="strings" type="object">
  <Note>You should also provide a `getIDPConsentManifest` callback to customize the scope description and header message</Note>

  Specify custom strings to be used in the prebuilt UI. Consult the message catalog (messages/en.po) for the list of available strings. Each value should be specified using ICU MessageFormat.

  Strings that are not defined will use the default English value as a fallback.

  See [Text Customization](/api-reference/consumer/frontend-sdks/react/prebuilt-ui/text-customization) for more information.
</ParamField>

<Panel>
  <RequestExample>
    ```jsx theme={null}
    import { IdentityProvider } from '@stytch/nextjs';

    const presentation = { theme: { 'font-family': 'Arial' } };

    const MyComponent = () => {
    return <IdentityProvider presentation={presentation} />;
    };

    export default MyComponent;
    ```
  </RequestExample>
</Panel>