diff --git a/docs/quick-starts/third-party/oidc/README.mdx b/docs/quick-starts/third-party/oidc/README.mdx index 7fda92c27ea..bee534d36aa 100644 --- a/docs/quick-starts/third-party/oidc/README.mdx +++ b/docs/quick-starts/third-party/oidc/README.mdx @@ -6,6 +6,8 @@ sidebar_custom_props: logoFilename: 'oidc.svg' --- +import QuickStartsReference from './_quick-starts-reference.md'; + # Integrate third-party app with OIDC / OAuth Use Logto as your identity provider (IdP) to integrate third-party apps via OpenID Connect (OIDC) or OAuth 2.0 protocol. @@ -35,9 +37,12 @@ In order to set up Logto as an IdP for your third-party applications, you need t 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. - - Otherwise, click on the **Show endpoint details** button to view all the OIDC authentication endpoints. +--- + + + ## Manage your third-party applications \{#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. diff --git a/docs/quick-starts/third-party/oidc/_quick-starts-reference.md b/docs/quick-starts/third-party/oidc/_quick-starts-reference.md new file mode 100644 index 00000000000..aa34448e413 --- /dev/null +++ b/docs/quick-starts/third-party/oidc/_quick-starts-reference.md @@ -0,0 +1,11 @@ +Under the hood, a third-party app is just a standard OAuth 2.0 / OIDC client. This means you (or the third-party developer) can use any OAuth 2.0 / OIDC library or framework to integrate with Logto. + +If you're not familiar with OAuth 2.0 or OIDC, you can start by following one of our “Traditional web” quick start guides. + +A few things to keep in mind: + +1. Logto currently requires third-party apps to be “Traditional web” apps. In other words, the app needs a backend server (or backend-for-frontend) to securely store the client secret. +2. Most our quick start guides are written for first-party apps, but you can still use them as a reference for third-party app integration. +3. The main difference is that third-party apps will show a consent screen, asking users for explicit permission to access their data. + +You can find more information in our [quick start guides](https://docs.logto.io/quick-starts). diff --git a/docs/use-cases/README.mdx b/docs/use-cases/README.mdx new file mode 100644 index 00000000000..bcca680014d --- /dev/null +++ b/docs/use-cases/README.mdx @@ -0,0 +1,24 @@ +--- +sidebar_position: 1 +sidebar_label: Introduction +--- + +import AiCatalog from './ai/fragments/_catalog.mdx'; +import AuthorizationCatalog from './authorization/fragments/_catalog.mdx'; +import MultiTenancyCatalog from './multi-tenancy/fragments/_catalog.mdx'; + +# Logto use cases + +Logto is a powerful auth infrastructure and identity and access management (IAM) solution that can be used in various scenarios. We have created a series of use cases to help you understand how to leverage Logto in different contexts. + +## Authorization + + + +## Multi-tenancy + + + +## AI + + diff --git a/docs/use-cases/ai/README.mdx b/docs/use-cases/ai/README.mdx new file mode 100644 index 00000000000..b510dec85b3 --- /dev/null +++ b/docs/use-cases/ai/README.mdx @@ -0,0 +1,11 @@ +--- +sidebar_position: 3 +sidebar_label: AI +description: Explore how Logto can help you build secure, AI-enabled experiences. +--- + +import Catalog from './fragments/_catalog.mdx'; + +# AI integration use cases with Logto + + diff --git a/docs/use-cases/ai/assets/third-party-app-permissions.png b/docs/use-cases/ai/assets/third-party-app-permissions.png new file mode 100644 index 00000000000..ff0f43a3c20 Binary files /dev/null and b/docs/use-cases/ai/assets/third-party-app-permissions.png differ diff --git a/docs/use-cases/ai/enable-third-party-ai-agent-access.mdx b/docs/use-cases/ai/enable-third-party-ai-agent-access.mdx new file mode 100644 index 00000000000..6d5a148aaec --- /dev/null +++ b/docs/use-cases/ai/enable-third-party-ai-agent-access.mdx @@ -0,0 +1,29 @@ +--- +sidebar_position: 3 +sidebar_label: Enable third-party AI agent access to app +--- + +# Enable third-party AI agent access to your app + +:::caution +👷 This tutorial is still in progress. Please check back later for updates. 🚧 +::: + +This guide walks you through integrating Logto with your service and enabling AI agents to access it. + +You'll learn how to: + +- Configure Logto as the authorization server for your service. +- Obtain an access token for the AI agent to access your service. +- Test the flow with an AI agent. + +## Prerequisites + +- A [Logto Cloud](https://cloud.logto.io) (or self-hosted) tenant +- A service that exposes API endpoints to be accessed by the AI agent + +### Understanding the flow + +- **Service**: The service you want to expose to the AI agent. +- **AI agent**: The AI agent that will access your service. +- **Logto**: Serves as the OpenID Connect provider (authorization server) and manages user identities. diff --git a/docs/use-cases/ai/fragments/_catalog.mdx b/docs/use-cases/ai/fragments/_catalog.mdx new file mode 100644 index 00000000000..75be88be48b --- /dev/null +++ b/docs/use-cases/ai/fragments/_catalog.mdx @@ -0,0 +1,50 @@ +import FlaskIcon from '@site/src/assets/flask.svg'; +import RobotIcon from '@site/src/assets/robot.svg'; +import SecurityIcon from '@site/src/assets/security.svg'; +import DynamicHeading from '@site/src/components/DynamicHeading'; + +Explore how Logto empowers you to build secure, AI-enabled experiences. Whether you’re implementing the Model Context Protocol (MCP) or integrating AI agents into your app, Logto offers developer-friendly authentication and authorization solutions. + +Build your MCP server + +, + }, + }, + { + type: 'link', + label: 'Enable third-party AI agent access to your MCP server', + href: '/use-cases/ai/mcp-server-enable-third-party-ai-agent-access', + description: + 'Find out how to enable authentication and authorization for third-party AI agents and apps connecting to your MCP server.', + customProps: { + icon: , + }, + }, + ]} +/> + +AI-ready auth for your app + +, + }, + }, + ]} +/> diff --git a/docs/use-cases/ai/fragments/_mcp-prerequisites.mdx b/docs/use-cases/ai/fragments/_mcp-prerequisites.mdx new file mode 100644 index 00000000000..1057a3c2e47 --- /dev/null +++ b/docs/use-cases/ai/fragments/_mcp-prerequisites.mdx @@ -0,0 +1,44 @@ +import Mermaid from '@theme/Mermaid'; + +## Prerequisites + +- A [Logto Cloud](https://cloud.logto.io) (or self-hosted) tenant +- Node.js or Python environment + +### Understanding the architecture + +- **MCP server**: The server that exposes tools and resources to MCP clients. +- **MCP client**: A client used to initiate the authentication flow and test the integration. {{props.isThirdParty ? 'The third-party AI agent will be used as the client in this guide.' : "We'll use the MCP Inspector as the client in this guide."}} +- **Logto**: Serves as the OpenID Connect provider (authorization server) and manages user identities. + +A non-normative sequence diagram illustrates the overall flow of the process: + +${props.isThirdParty ? '(third-party AI agent)' : '(MCP Inspector)'} + participant Server as MCP Server + participant Logto + + Server->>Logto: Request OpenID Connect configuration + Logto->>Server: Return configuration + Note over Server: Cache the configuration + Client->>Server: Request access to a tool + Server->>Client: Not authenticated (401 Unauthorized) + Client->>Server: Request OAuth 2.0 Authorization Server Metadata + Note over Server: In this context, “OpenID Connect configuration” and
“OAuth 2.0 Authorization Server Metadata”
refer to the same thing. + Server->>Client: Return OpenID Connect configuration retrieved from Logto + Client->>Logto: Redirect to Logto for authentication + Logto->>Logto: User authenticates + ${props.isThirdParty ? 'Logto->>Logto: User authorizes (consents) scopes
to the third-party app' : ''} + Logto->>Client: Redirect back to MCP server with authorization code + Client->>Logto: Request access token using authorization code + Logto->>Client: Return access token + Client->>Server: Request tool with access token + Server->>Logto: Request user info using access token + Logto->>Server: Return user info + Server->>Client: Return tool response`} + +/> + +:::note +Due to MCP is quickly evolving, the above diagram may not be fully up to date. Please refer to the [mcp-auth](https://mcp-auth.dev) documentation for the latest information. +::: diff --git a/docs/use-cases/ai/fragments/_mcp-sample-code.mdx b/docs/use-cases/ai/fragments/_mcp-sample-code.mdx new file mode 100644 index 00000000000..db84772149b --- /dev/null +++ b/docs/use-cases/ai/fragments/_mcp-sample-code.mdx @@ -0,0 +1,15 @@ +import TabItem from '@theme/TabItem'; +import Tabs from '@theme/Tabs'; + + + + +The full MCP server code can be found in the [mcp-auth/python](https://github.com/mcp-auth/python) repository. + + + + +The full MCP server code can be found in the [mcp-auth/js](https://github.com/mcp-auth/js) repository. + + + diff --git a/docs/use-cases/ai/fragments/_mcp-set-up-server.mdx b/docs/use-cases/ai/fragments/_mcp-set-up-server.mdx new file mode 100644 index 00000000000..1bb51d7197f --- /dev/null +++ b/docs/use-cases/ai/fragments/_mcp-set-up-server.mdx @@ -0,0 +1,207 @@ +import TabItem from '@theme/TabItem'; +import Tabs from '@theme/Tabs'; + +## Set up the MCP server + +### Create project and install dependencies + + + + +```bash +mkdir mcp-server +cd mcp-server +uv init # Or use your own project structure +uv add "mcp[cli]" starlette uvicorn mcpauth # Or use any preferred package manager +``` + + + + +```bash +mkdir mcp-server +cd mcp-server +npm init -y +npm install @modelcontextprotocol/sdk express mcp-auth # Or use any preferred package manager +``` + + + + +### Configure MCP auth with Logto + +Remember to replace `` with the issuer endpoint you copied earlier. + + + + +**In `whoami.py`:** + +```python +from mcpauth import MCPAuth +from mcpauth.config import AuthServerType +from mcpauth.utils import fetch_server_config + +auth_issuer = '' +auth_server_config = fetch_server_config(auth_issuer, type=AuthServerType.OIDC) +mcp_auth = MCPAuth(server=auth_server_config) +``` + + + + +**In `whoami.js`:** + +```js +import { MCPAuth, fetchServerConfig } from 'mcp-auth'; + +const authIssuer = ''; +const mcpAuth = new MCPAuth({ + server: await fetchServerConfig(authIssuer, { type: 'oidc' }), +}); +``` + + + + +### Implement token verification + +Since we're going to verify the access token and retrieve user info, we need to implement the access token verification as follows: + + + + +```python +import requests +from mcpauth.types import AuthInfo + +def verify_access_token(token: str) -> AuthInfo: + endpoint = auth_server_config.metadata.userinfo_endpoint + response = requests.get( + endpoint, + headers={"Authorization": f"Bearer {token}"}, + ) + response.raise_for_status() + data = response.json() + return AuthInfo( + token=token, + subject=data.get("sub"), + issuer=auth_server_config.metadata.issuer, + claims=data, + ) +``` + + + + +```js +const verifyToken = async (token) => { + const { userinfoEndpoint, issuer } = mcpAuth.config.server.metadata; + const response = await fetch(userinfoEndpoint, { + headers: { Authorization: `Bearer ${token}` }, + }); + if (!response.ok) throw new Error('Token verification failed'); + const userInfo = await response.json(); + return { + token, + issuer, + subject: userInfo.sub, + claims: userInfo, + }; +}; +``` + + + + +### Implement the "whoami" tool + +Now, let's implement the "whoami" tool that returns the current user's identity claims requesting the userinfo endpoint with the access token sent by the client. + +:::note +We are using the SSE transport for the example due to the lack of official support for the Streamable HTTP transport in the current version of the SDK. Theoretically, you can use any HTTP-compatible transport. +::: + + + + +```python +from mcp.server.fastmcp import FastMCP +from starlette.applications import Starlette +from starlette.routing import Mount +from starlette.middleware import Middleware + +mcp = FastMCP("WhoAmI") + +@mcp.tool() +def whoami() -> dict: + """ + Returns the current user's identity information. + """ + return ( + mcp_auth.auth_info.claims + if mcp_auth.auth_info + else {"error": "Not authenticated"} + ) + +bearer_auth = Middleware(mcp_auth.bearer_auth_middleware(verify_access_token)) +app = Starlette( + routes=[ + mcp_auth.metadata_route(), # Serves OIDC metadata for discovery + Mount('/', app=mcp.sse_app(), middleware=[bearer_auth]), + ], +) +``` + +Run the server with: + +```bash +uvicorn whoami:app --host 0.0.0.0 --port 3001 +``` + + + + +```js +import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'; +import express from 'express'; + +// Create MCP server and register the whoami tool +const server = new McpServer({ name: 'WhoAmI', version: '0.0.0' }); +server.tool('whoami', ({ authInfo }) => ({ + content: [ + { type: 'text', text: JSON.stringify(authInfo?.claims ?? { error: 'Not authenticated' }) }, + ], +})); + +// Express app & MCP Auth middleware +const app = express(); +app.use(mcpAuth.delegatedRouter()); +app.use(mcpAuth.bearerAuth(verifyToken)); + +// SSE transport (as in SDK docs) +const transports = {}; +app.get('/sse', async (_req, res) => { + const transport = new SSEServerTransport('/messages', res); + transports[transport.sessionId] = transport; + res.on('close', () => delete transports[transport.sessionId]); + await server.connect(transport); +}); +app.post('/messages', async (req, res) => { + const sessionId = String(req.query.sessionId); + const transport = transports[sessionId]; + if (transport) await transport.handlePostMessage(req, res, req.body); + else res.status(400).send('No transport found for sessionId'); +}); + +app.listen(3001); +``` + +Run the server with: + +```bash +node whoami.js +``` + + + diff --git a/docs/use-cases/ai/mcp-server-add-auth.mdx b/docs/use-cases/ai/mcp-server-add-auth.mdx new file mode 100644 index 00000000000..72aef7bd66c --- /dev/null +++ b/docs/use-cases/ai/mcp-server-add-auth.mdx @@ -0,0 +1,79 @@ +--- +sidebar_position: 1 +sidebar_label: Enable auth for MCP-powered apps +--- + +import Prerequisites from './fragments/_mcp-prerequisites.mdx'; +import SampleCode from './fragments/_mcp-sample-code.mdx'; +import SetUpServer from './fragments/_mcp-set-up-server.mdx'; + +# Enable auth for your MCP-powered apps with Logto + +This guide walks you through integrating Logto with your MCP server using [mcp-auth](https://mcp-auth.dev), allowing you to authenticate users and securely retrieve their identity information using the standard OpenID Connect flow. + +You'll learn how to: + +- Configure Logto as the authorization server for your MCP server. +- Set up a “whoami” tool in your MCP server to return the current user's identity claims. +- Test the flow with the MCP Inspector (MCP client). + +After this tutorial, your MCP server will: + +- Authenticate users in your Logto tenant. +- Return identity claims (`sub`, `username`, `name`, `email`, etc.) for the "whoami" tool invocation. + +Once the integration is complete, you can replace the MCP Inspector with your own MCP client, such as a web app, to access the tools and resources exposed by your MCP server. + + + +## Set up app in Logto + +1. Sign in to your Logto Console. +2. Go **Applications** → **Create application** → **Create app without framework**. +3. Choose type: Single-page app. +4. Fill in the app name and other required fields, then click **Create application**. +5. Save and copy the **App ID** and **Issuer endpoint**. + + + +## Test the integration + +1. Start the MCP server +2. Start the MCP Inspector. + + Due to the limit of the current MCP Inspector implementation, we need to use the forked version from mcp-auth: + + ```bash + git clone https://github.com/mcp-auth/inspector.git + cd inspector + npm install + npm run dev + ``` + + Then, open the URL shown in the terminal. + +3. In the MCP Inspector: + + - **Transport Type**: `SSE` + - **URL**: `http://localhost:3001/sse` + - **OAuth Client ID**: Paste your Logto App ID + - **Auth Params**: `{"scope": "openid profile email"}` + - **Redirect URI**: This URL should be auto-populated. Copy it. + +4. Find the application you created earlier in the Logto Console, open the details page, and paste the redirect URI into the **Settings** / **Redirect URIs** section. Save the changes. +5. Back in the MCP Inspector, click **Connect**. This should redirect you to the Logto sign-in experience. + +After completing sign-in, you should be redirected back to the MCP Inspector. Go to **Tools** -> **List Tools** -> **whoami** -> **Run Tool**. + +You should see user claims, such as: + +```json +{ + "sub": "user_XXXX", + "username": "alice", + "name": "Alice Smith", + "email": "alice@example.com" +} +``` + + diff --git a/docs/use-cases/ai/mcp-server-enable-third-party-ai-agent-access.mdx b/docs/use-cases/ai/mcp-server-enable-third-party-ai-agent-access.mdx new file mode 100644 index 00000000000..6db3cdd2b3e --- /dev/null +++ b/docs/use-cases/ai/mcp-server-enable-third-party-ai-agent-access.mdx @@ -0,0 +1,124 @@ +--- +sidebar_position: 2 +sidebar_label: Enable third-party AI agent access to MCP server +--- + +import QuickStartsReference from '../../quick-starts/third-party/oidc/_quick-starts-reference.md'; + +import thirdPartyAppPermissions from './assets/third-party-app-permissions.png'; +import Prerequisites from './fragments/_mcp-prerequisites.mdx'; +import SampleCode from './fragments/_mcp-sample-code.mdx'; +import SetUpServer from './fragments/_mcp-set-up-server.mdx'; + +# Enable third-party AI agent access to your MCP server + +This guide walks you through integrating Logto with your MCP server using [mcp-auth](https://mcp-auth.dev), allowing you to authenticate users and securely retrieve their identity information using the standard OpenID Connect flow. + +You'll learn how to: + +- Configure Logto as the authorization server for your MCP server. +- Set up a “whoami” tool in your MCP server to return the current user's identity claims. +- Test the flow with a third-party AI agent (MCP client). + +After this tutorial, your MCP server will: + +- Authenticate users in your Logto tenant. +- Return identity claims (`sub`, `username`, `name`, `email`, etc.) for the "whoami" tool invocation. + +## Difference between third-party AI agent (MCP client) and your own MCP client + +Let's take a look at an example. Imagine you’re a developer running an MCP server to manage email access and automation. + +**Official email app (Your own MCP client)** + +- You provide an official email app for users to read and manage their emails. +- How it works: The official email app connects to your MCP server using Logto to authenticate users. When Alice signs in, she automatically gets access to her emails, no extra permission screens needed, since it’s your trusted app. + +**Third-party AI agent (Third-party MCP client)** + +- You’re building an ecosystem around your MCP server, so another developer creates “SmartMail AI” (an AI assistant that can summarize emails and schedule meetings automatically) integrating it as a third-party client. +- How it works: SmartMail AI (third-party MCP client) wants to access user emails via your MCP server. When Alice signs in to SmartMail AI using her account: + - She’s shown a consent screen, asking permission for SmartMail AI to read her emails and calendar. + - Alice can allow or deny this access. + - Only the data she consents to is shared with SmartMail AI, and SmartMail AI cannot access any additional data without explicit re-consent. + +This access (permission) control ensures user data safety, even though your MCP server manages all the data, third-party apps like SmartMail AI can only access what the user has explicitly allowed. They cannot bypass this process, as it's enforced by your access control implementation in the MCP server. + +**Summary** + +| Client type | Example | Consent required? | Who controls it? | +| -------------------- | -------------------------- | ----------------- | ------------------- | +| Official email app | Your own email application | No | You (the developer) | +| Third-party AI agent | SmartMail AI assistant | Yes | Another developer | + +:::note +If you want to integrate your MCP server with your own AI agent or app, please refer to the [Enable auth for your MCP-powered apps with Logto](./mcp-server-add-auth) guide. +::: + + + +## Set up third-party AI agent + +To enable the third-party AI agent to access your MCP server, you need to set up the following: + +1. The client should be able to make MCP requests to invoke the tools exposed by the MCP server. +2. The client should be able to handle the 401 Unauthorized response. See [Authorization Flow Steps](https://modelcontextprotocol.io/specification/2025-03-26/basic/authorization#2-5-authorization-flow-steps) for more details. +3. After successful authentication, the client should be able to make requests to the MCP server with the access token obtained from Logto. + +## Set up AI agent in Logto + +To enable the third-party AI agent to access your MCP server, you need to set up a **third-party app** in Logto. This app will be used to represent the AI agent and obtain the necessary credentials for authentication and authorization. + +### Allow developers to create third-party apps in Logto + +If you are building a marketplace or want to allow developers to create third-party apps in Logto, you can leverage [Logto Management API](/integrate-logto/interact-with-management-api) to create third-party apps programmatically. This allows developers to register their applications and obtain the necessary credentials for authentication. + +You'll need to host your own service to handle the client registration process. This service will interact with the Logto Management API to create third-party apps on behalf of developers. + +```mermaid +sequenceDiagram + actor Developer + participant Server as Your app registration service + participant Logto as Logto Management API + Developer->>Server: Register app + Server->>Logto: Create app + Logto->>Server: App ID, secret, etc. + Server->>Developer: App ID, secret, etc. +``` + +Alternatively, you can manually create third-party apps in Logto Console to get familiar with the process. + +### Manually create a third-party app in Logto + +You can manually create a third-party app in Logto Console for testing purposes or ad-hoc integrations. This is useful when you want to quickly test the integration without implementing a full client-registration flow. + +1. Sign in to your Logto Console. +2. Go **Applications** → **Create application** → **Third-party app** -> **OIDC**. +3. Fill in the app name and other required fields, then click **Create application**. +4. Click **Permissions** tab, in the **User** section, click "Add". +5. In the opened dialog -> **User data** -> select **`profile`**, **`email`** permissions, then click **Save**. +6. In the third-party app, configure scopes to request `openid profile email` permissions. +7. Configure the **redirect URI** of your third-party application accordingly. Remember to update the redirect URI in Logto as well. + +Third-party app permissions + +--- + + + + + +## Test the integration + +1. Start the MCP server. +2. Start the AI agent. +3. In the client, invoke the `whoami` tool to retrieve the current user's identity claims. +4. The client should handle the 401 Unauthorized response and redirect the user to Logto for authentication. +5. After successful authentication, the client should receive an access token and use it to make requests to the MCP server. +6. The client should be able to retrieve the identity claims from the MCP server using the access token. + + diff --git a/docs/use-cases/authorization/README.mdx b/docs/use-cases/authorization/README.mdx new file mode 100644 index 00000000000..d376d8c32ba --- /dev/null +++ b/docs/use-cases/authorization/README.mdx @@ -0,0 +1,11 @@ +--- +sidebar_position: 1 +sidebar_label: Authorization +description: Explore how Logto can help you build flexible authorization with role-based access control (RBAC) and resource indicators. +--- + +import Catalog from './fragments/_catalog.mdx'; + +# Authorization use cases with Logto + + diff --git a/docs/use-cases/authorization/fragments/_catalog.mdx b/docs/use-cases/authorization/fragments/_catalog.mdx new file mode 100644 index 00000000000..d25f1937c79 --- /dev/null +++ b/docs/use-cases/authorization/fragments/_catalog.mdx @@ -0,0 +1,16 @@ +import AuthorizationIcon from '@site/src/assets/authorization.svg'; + +, + }, + }, + ]} +/> diff --git a/docs/use-cases/multi-tenancy/README.mdx b/docs/use-cases/multi-tenancy/README.mdx new file mode 100644 index 00000000000..dce55def368 --- /dev/null +++ b/docs/use-cases/multi-tenancy/README.mdx @@ -0,0 +1,11 @@ +--- +sidebar_position: 2 +sidebar_label: Multi-tenancy +description: Explore how Logto can help you build multi-tenancy applications with ease. +--- + +import Catalog from './fragments/_catalog.mdx'; + +# Multi-tenancy use cases with Logto + + diff --git a/docs/use-cases/multi-tenancy/fragments/_catalog.mdx b/docs/use-cases/multi-tenancy/fragments/_catalog.mdx new file mode 100644 index 00000000000..7acf42e462e --- /dev/null +++ b/docs/use-cases/multi-tenancy/fragments/_catalog.mdx @@ -0,0 +1,16 @@ +import OrganizationIcon from '@site/src/assets/organization.svg'; + +, + }, + }, + ]} +/> diff --git a/docusaurus-common.config.ts b/docusaurus-common.config.ts index 5a6df959520..b0fb0492691 100644 --- a/docusaurus-common.config.ts +++ b/docusaurus-common.config.ts @@ -131,6 +131,11 @@ export const createCommonThemeConfig = (site: Site) => { position: 'left', label: 'Integrations', }, + { + to: buildUrl('/use-cases', 'main'), + position: 'left', + label: 'Use cases', + }, { to: new URL('https://openapi.logto.io', mainSiteUrl).href, position: 'left', diff --git a/src/assets/robot.svg b/src/assets/robot.svg new file mode 100644 index 00000000000..23c409e3042 --- /dev/null +++ b/src/assets/robot.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/components/DynamicHeading/index.tsx b/src/components/DynamicHeading/index.tsx new file mode 100644 index 00000000000..a3c92d7c068 --- /dev/null +++ b/src/components/DynamicHeading/index.tsx @@ -0,0 +1,20 @@ +type Props = React.HTMLAttributes & { + readonly level: 1 | 2 | 3 | 4 | 5 | 6; +}; + +/** + * A component that renders a heading element (h1-h6) based on the level prop. + * @param {number} level The heading level (1-6). + * @param {React.HTMLAttributes} rest Any other props to be passed to the heading element. + * @returns {JSX.Element} The rendered heading element. + */ +const DynamicHeading = ({ level, children, ...rest }: Props) => { + if (level < 1 || level > 6) { + throw new Error('Level must be between 1 and 6'); + } + + const HeadingTag = `h${level}` as const; + return {children}; +}; + +export default DynamicHeading; diff --git a/src/sidebar/index.ts b/src/sidebar/index.ts index 2ac7e0cb6be..6a7519e9f1e 100644 --- a/src/sidebar/index.ts +++ b/src/sidebar/index.ts @@ -19,6 +19,7 @@ const sidebars: SidebarsConfig = { docsSidebar, quickStartSidebar, integrationsSidebar, + useCasesSidebar: [{ type: 'autogenerated', dirName: 'use-cases' }], // But you can create a sidebar manually /* diff --git a/src/theme/DocCard/index.tsx b/src/theme/DocCard/index.tsx index a7dfb18e121..6522ed0bc96 100644 --- a/src/theme/DocCard/index.tsx +++ b/src/theme/DocCard/index.tsx @@ -8,7 +8,7 @@ import type { Props } from '@theme/DocCard'; import clsx from 'clsx'; import { type ReactNode } from 'react'; -import styles from './styles.module.css'; +import styles from './styles.module.scss'; function useCategoryItemsPlural() { const { selectMessage } = usePluralForm(); diff --git a/src/theme/DocCard/styles.module.css b/src/theme/DocCard/styles.module.scss similarity index 100% rename from src/theme/DocCard/styles.module.css rename to src/theme/DocCard/styles.module.scss