refactor: update title in 3rd party app config guide

docs/docs/recipes/logto-as-idp/README.mdx

@@ -87,5 +87,6 @@ All third-party applications will be catalogued on the **Applications** page, sp
 ## Continue with
 
 - [branding customization](./branding-customization)
+- [third-party app configuration](./configure-3rd-party-app-in-console)
 - [permission management](./permissions-management)
 - [application reference](../../references/applications/)

docs/docs/recipes/logto-as-idp/configure-3rd-party-app-in-console.mdx

@@ -1,54 +1,5 @@
-import ClientCredentials from './assets/client-credentials.webp';
-import DiscoveryEndpoint from './assets/discovery-endpoint.webp';
-import EndpointDetails from './assets/endpoint-details.webp';
-import RedirectUri from './assets/redirect-uri.webp';
+import Content from './fragments/_configure-3rd-party-app.mdx';
 
-## Create an third-party OIDC application in Logto
+# Create an third-party OIDC application in Console
 
-Just like how you create a first-party application in Logto, you can also create an application for third-party services that support OIDC. This application will act as an IdP for your third-party applications.
-
-1. Go to the **Logto Console** and navigate to the **Applications** page.
-
-2. Select "Third-party app -> OIDC" as the application type.
-
-   If this is the first time you create an application, click on the **View all** link to see all application types.
-   ![application list](./assets/application-list.webp)
-
-   Otherwise, click on the **Create application** button on the top right corner of the page and select "Third-party app -> OIDC" as the application type.
-   ![create application](./assets/create-application.webp)
-
-3. Just like creating a Logto first-party application, enter a **name** and **description** for your application and click on the **Create** button. A new third-party OIDC application will be created.
-
-   ![application details](./assets/application-details.webp)
-
-## Setup the OIDC configurations
-
-In order to set up Logto as an IdP for your third-party applications, you need to configure the OIDC settings under the application details page.
-
-1. Provide the **redirect URI** of your third-party application. This is the URL that the third-party application will redirect users to after they are authenticated by Logto. You can usually find this information in the third-party application's IdP connection settings page.
-
-   :::note
-   Logto supports multiple redirect URIs. You can add more redirect URIs by clicking on the **Add another** button.
-   :::
-
-   <img src={RedirectUri} alt="redirect uri" width={500} />
-
-2. Retrieve the **client ID** and **client secret** from Logto application details page and enter them into your service provider's IdP connection settings page.
-
-   <img src={ClientCredentials} alt="client credentials" width={500} />
-
-3. Retrieve the **authorization endpoint** and **token endpoint** from Logto application details page and provide them to your service provider.
-
-   If your service provider supports OIDC discovery, you can simply copy the **discovery endpoint** from Logto application details page and provide it to your service provider. The service provider will be able to retrieve all the up to date OIDC authentication information from the discovery endpoint automatically.
-
-   <img src={DiscoveryEndpoint} alt="discovery endpoint" width={500} />
-
-   Otherwise, click on the **Show endpoint details** button to view all the OIDC authentication endpoints.
-
-   <img src={EndpointDetails} alt="endpoint details" width={500} />
-
-## Manage your third-party applications
-
-All third-party applications will be catalogued on the **Applications** page, specifically under the **Third-party apps** tab. This arrangement distinguishes them from first-party applications for you, ensuring easy management.
-
-![third-party apps](./assets/third-party-apps.webp)
+<Content />

docs/docs/recipes/logto-as-idp/fragments/_configure-3rd-party-app.mdx

@@ -0,0 +1,53 @@
+{/* This is a re-usable fragment that currently being referenced by both the recipe and the connector guide */}
+import ClientCredentials from '../assets/client-credentials.webp';
+import DiscoveryEndpoint from '../assets/discovery-endpoint.webp';
+import EndpointDetails from '../assets/endpoint-details.webp';
+import RedirectUri from '../assets/redirect-uri.webp';
+
+Just like how you create a first-party application in Logto, you can also create an application for third-party services that support OIDC. This application will act as an IdP for your third-party applications.
+
+1. Go to the **Logto Console** and navigate to the **Applications** page.
+
+2. Select "Third-party app -> OIDC" as the application type.
+
+   If this is the first time you create an application, click on the **View all** link to see all application types.
+   ![application list](../assets/application-list.webp)
+
+   Otherwise, click on the **Create application** button on the top right corner of the page and select "Third-party app -> OIDC" as the application type.
+   ![create application](../assets/create-application.webp)
+
+3. Just like creating a Logto first-party application, enter a **name** and **description** for your application and click on the **Create** button. A new third-party OIDC application will be created.
+
+   ![application details](../assets/application-details.webp)
+
+## Setup the OIDC configurations
+
+In order to set up Logto as an IdP for your third-party applications, you need to configure the OIDC settings under the application details page.
+
+1. Provide the **redirect URI** of your third-party application. This is the URL that the third-party application will redirect users to after they are authenticated by Logto. You can usually find this information in the third-party application's IdP connection settings page.
+
+   :::note
+   Logto supports multiple redirect URIs. You can add more redirect URIs by clicking on the **Add another** button.
+   :::
+
+   <img src={RedirectUri} alt="redirect uri" width={500} />
+
+2. Retrieve the **client ID** and **client secret** from Logto application details page and enter them into your service provider's IdP connection settings page.
+
+   <img src={ClientCredentials} alt="client credentials" width={500} />
+
+3. Retrieve the **authorization endpoint** and **token endpoint** from Logto application details page and provide them to your service provider.
+
+   If your service provider supports OIDC discovery, you can simply copy the **discovery endpoint** from Logto application details page and provide it to your service provider. The service provider will be able to retrieve all the up to date OIDC authentication information from the discovery endpoint automatically.
+
+   <img src={DiscoveryEndpoint} alt="discovery endpoint" width={500} />
+
+   Otherwise, click on the **Show endpoint details** button to view all the OIDC authentication endpoints.
+
+   <img src={EndpointDetails} alt="endpoint details" width={500} />
+
+## Manage your third-party applications
+
+All third-party applications will be catalogued on the **Applications** page, specifically under the **Third-party apps** tab. This arrangement distinguishes them from first-party applications for you, ensuring easy management.
+
+![third-party apps](../assets/third-party-apps.webp)

docs/integrations/third-party/oidc/README.mdx

@@ -6,8 +6,10 @@ sidebar_custom_props:
   logoFilename: 'oidc.svg'
 ---
 
-import Content from '../../../docs/recipes/logto-as-idp/configure-3rd-party-app-in-console.mdx';
+import Content from '../../../docs/recipes/logto-as-idp/fragments/_configure-3rd-party-app.mdx';
 
 # Logto as an Identity Provider (IdP)
 
+## Create an third-party OIDC application in Logto
+
 <Content />