본문으로 건너뛰기

Third-party app integration: Single page app (SPA)

Use Logto as your identity provider (IdP) to integrate third-party single page applications (SPAs) via OpenID Connect (OIDC) or OAuth 2.0 protocol.

Single page apps are client-side web applications that run entirely in the user's browser. Since they cannot securely store client secrets, they use PKCE (Proof Key for Code Exchange) for secure authorization. In this scenario, the client obtains tokens directly from the authorization server without going through a backend.

A typical example is MCP (Model Context Protocol) integrations, where the MCP Client initiates authentication directly with the auth server to access various MCP Servers—the MCP Server providers don't control the client applications.

Create a third-party SPA in Logto​

  1. Go to Console > Applications.

  2. Select "Third-party app > Third-party app (Single page app)" 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.

    • Otherwise, click on the Create application button on the top right corner of the page and select "Third-party app > Third-party app (Single page app)" as the application type.

  3. Enter a name and description for your application and click on the Create button. A new third-party SPA will be created.

Set up the OIDC / OAuth configurations​

To configure Logto as an IdP for your third-party SPA:

  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. Logto supports multiple redirect URIs—click the Add another button to add more.

  2. Retrieve the client ID from Logto application details page and enter it into your service provider's IdP connection settings page.

  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 automatically retrieve all OIDC authentication information from the discovery endpoint.
    • Otherwise, click on the Show endpoint details button to view all the OIDC authentication endpoints.

  4. Ensure the third-party application is configured to use PKCE (Proof Key for Code Exchange) during the authorization flow. Most modern OAuth/OIDC libraries support PKCE out of the box.

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 quick start guides based on your application type.

A few things to keep in mind:

  1. Most of our quick start guides are written for first-party apps, but you can still use them as a reference for third-party app integration.
  2. 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.

Manage permissions and branding​

Once the OIDC configurations are set up, you can manage what permissions the third-party application can request and customize the branding of the consent screen:

Manage your third-party applications​

All third-party applications are listed on the Applications page under the Third-party apps tab, making it easy to distinguish them from first-party applications.

Further readings​

Third-party applications