> ## 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.

> Enable your application to become an OAuth and OIDC Authorization server by leveraging the Stytch frontend SDK.

# Build an authorization server using Stytch Connected Apps

In this guide, you'll learn how to configure your suite of OIDC applications to log in and perform actions on behalf of your users with your Stytch-powered app using our frontend SDKs. If you prefer to use your own UI components, see how to build a custom flow [here](/connected-apps/build-custom-flow/getting-started-api).

This enables users of your Stytch app to use compatible applications—in-house tools, external integrations, desktop apps, AI agents, or any OIDC-compatible app—to use your Stytch application as an Authorization Server.

## **Prerequisites**

In order to complete this guide, you'll need:

* A Stytch project. If you don't have one already, or would like to create a new one, in the [Dashboard](https://stytch.com/dashboard), click on your existing project name in the top left corner of the Dashboard, click **Create Project**, and then select B2B Authentication or Consumer Authentication.
* A React or Next.js app authorized to use Stytch [frontend SDKs](https://stytch.com/dashboard/sdk-configuration).
* A Relying Party app (the Connected App) that wishes to receive user information from your application.

## Integration steps

<Steps>
  <Step title="Implement the React component" stepNumber={1}>
    To use the **Stytch frontend SDK**, we have created a component for use in your app:

    * `<IdentityProvider />` for Consumer applications
    * `<B2BIdentityProvider />` for B2B applications

    When mounted on the page located at the Authorization URL, this component will catch the parameters passed in the URL and initiate the flow with Stytch. After the initial step succeeds, Stytch will respond with a redirect to send the user's browser to the `redirect_uri` with a code for the Connected App to complete the flow on its backend.

    <CodeGroup>
      ```javascript B2B theme={null}
      const { member } = useStytchMember();

      if (!member) {
        const loginURL = `/login?returnTo=${window.location.toString()}`
        return <Redirect to={loginURL} />
      }

      return <B2BIdentityProvider />
      ```

      ```javascript Consumer theme={null}
      const { user } = useStytchUser();

      if (!user) {
        const loginURL = `/login?returnTo=${window.location.toString()}`
        return <Redirect to={loginURL} />
      }

      return <IdentityProvider />
      ```
    </CodeGroup>

    For this flow to succeed, the user must already be logged in to your Stytch-powered app and have an active session, so you'll want to check for a valid session prior to rendering the component and if the user is not logged in, redirect to the login page with a `return_to` parameter. Learn more about the Authorization Code Flow [here](/connected-apps/authorization-code-flow).
  </Step>

  <Step title="Configure Stytch for the component" stepNumber={2}>
    Enter the URL where the component is mounted into the Authorization URL field in the Connected Apps section of the [Stytch Dashboard](https://stytch.com/dashboard/connected-apps).

    <img src="https://mintcdn.com/stytch-34ca0595/ZKC15aiBkMCWQwo0/images/connected-apps/getting-started/authorization-url.png?fit=max&auto=format&n=ZKC15aiBkMCWQwo0&q=85&s=4adc0bd49a71190934660a70119ad9a2" alt="Authorization Url Pn" width="3000" height="1500" data-path="images/connected-apps/getting-started/authorization-url.png" />
  </Step>

  <Step title="Create a new Connected App in the dashboard" stepNumber={3}>
    After Stytch handles verification of the user and the application's ability to access the user's information, Stytch will issue a redirect. To set this up, each Connected App is also configured in the [Connected Apps section](https://stytch.com/dashboard/connected-apps) of the Dashboard.

    <Accordion title="How does the redirect work" icon="sparkles">
      This redirect is intended to go to a callback URL which should be supplied by the Connected App. The redirect will pass an authorization `code` - a short-lived credential that the Connected App will use to complete the authorization flow.
    </Accordion>

    Create a new Connected App and specify what type of user consent and OIDC flow the Connected App should expect. Stytch supports connecting a few types of client apps which vary based on how much user consent is appropriate and specifics of the OIDC flow.

    <img src="https://mintcdn.com/stytch-34ca0595/cD8BioQ2Qs_VMTqe/images/connected-apps/getting-started/create-new-app.png?fit=max&auto=format&n=cD8BioQ2Qs_VMTqe&q=85&s=11e817caef56f1761414197198f785f2" alt="Create New App Pn" width="3000" height="1500" data-path="images/connected-apps/getting-started/create-new-app.png" />

    <img src="https://mintcdn.com/stytch-34ca0595/cD8BioQ2Qs_VMTqe/images/connected-apps/getting-started/select-client-type.png?fit=max&auto=format&n=cD8BioQ2Qs_VMTqe&q=85&s=e239e1517fefc7d82dd72757a08470f7" alt="Select Client Type Pn" width="3000" height="1500" data-path="images/connected-apps/getting-started/select-client-type.png" />
  </Step>

  <Step title="Configure the Connected App" stepNumber={4} titleSize="h4">
    Continue to configure the Connected App. Make sure to take a note of the “Client ID” and the “Client secret” (for confidential apps); these will be needed by the Connecting App to complete the Authorization Code Flow.

    <img src="https://mintcdn.com/stytch-34ca0595/ZKC15aiBkMCWQwo0/images/connected-apps/getting-started/app-details.png?fit=max&auto=format&n=ZKC15aiBkMCWQwo0&q=85&s=dadb5a506640101f7b3a43a56dd227a7" alt="App Details Pn" width="3000" height="1812" data-path="images/connected-apps/getting-started/app-details.png" />

    The Connected App will also supply a Redirect URL for receiving the login information from Stytch after the initial login is complete. This should be entered into the “Redirect URLs” field.

    <img src="https://mintcdn.com/stytch-34ca0595/ZKC15aiBkMCWQwo0/images/connected-apps/guides/integrate_with_ai_agents-redirect-urls.png?fit=max&auto=format&n=ZKC15aiBkMCWQwo0&q=85&s=9341c964810bc1d8a0337e74fef65f08" alt="Integrate With Ai Agents Redirect Urls Pn" width="3000" height="1500" data-path="images/connected-apps/guides/integrate_with_ai_agents-redirect-urls.png" />

    At this point, off-the-shelf software should be prepared to authorize as a Connected App with Stytch. If implementing your own Connected App, see [this guide](/connected-apps/build-custom-flow/implementing-your-own) to learn more.
  </Step>
</Steps>

## **What's next**

Read more about our other offerings:

* [Implementing your own Connected App](/connected-apps/build-custom-flow/implementing-your-own)
* [Public Apps](/connected-apps/build-custom-flow/public-apps): Authorization Code Flow with PKCE
* Log users in with other commonly used IdPs such as Google and Microsoft ActiveDirectory with OAuth [multi-tenant](/multi-tenant-auth/authentication/oauth/overview) and [consumer](/consumer-auth/authentication/oauth/overview) applications
* Learn more about Machine-to-Machine authentication with M2M for [multi-tenant](/multi-tenant-auth/authentication/m2m/authenticate-client) and [consumer](/consumer-auth/authentication/m2m/authenticate-client) applications
* Add custom claims to your Connected Apps access tokens using a Custom Claim Template for [multi-tenant](/multi-tenant-auth/manage-sessions/custom-claims) and [consumer](/consumer-auth/manage-sessions/custom-claims) applications