|
| 1 | +--- |
| 2 | +title: "Stytch" |
| 3 | +description: "Use Stytch as a User Source so people who already sign in through your Stytch tenant can sign in to your MCP Gateways" |
| 4 | +--- |
| 5 | + |
| 6 | +import Image from "next/image"; |
| 7 | +import { Callout, Steps } from "nextra/components"; |
| 8 | + |
| 9 | +export const IMAGE_SCALE_FACTOR = 1.5; |
| 10 | +export const STYTCH_SCREENSHOT_WIDTH = 1312 / IMAGE_SCALE_FACTOR; |
| 11 | +export const STYTCH_SCREENSHOT_HEIGHT = 1099 / IMAGE_SCALE_FACTOR; |
| 12 | + |
| 13 | +# Stytch |
| 14 | + |
| 15 | +Use Stytch as a User Source so the people who already sign in through your Stytch project can sign in to your MCP Gateways. Stytch's [Connected Apps](https://stytch.com/docs/connected-apps/build-login-flow/login-flow) feature turns your Stytch project into an OIDC identity provider that Arcade can connect to. This guide applies to both Stytch Consumer and B2B projects, where the Connected Apps feature behaves identically. Once you have the values it tells you to copy, [create the User Source in Arcade](/guides/user-sources#create-a-user-source). |
| 16 | + |
| 17 | +## Before you start |
| 18 | + |
| 19 | +- A Stytch admin role that can manage Connected Apps in your project. |
| 20 | +- A Stytch project. You can develop and test in the project's test environment first and switch the Connected App to production mode when you're ready. |
| 21 | +- The Stytch Frontend SDK enabled on the project. Connected Apps uses a customer-hosted page to render the authorization UI, and the SDK is what powers that page. Stytch's [build a login flow](https://stytch.com/docs/connected-apps/build-login-flow/login-flow) guide covers the SDK setup. |
| 22 | +- An **Authorization URL** configured on the Connected App, pointing to the page on your site that mounts Stytch's `<IdentityProvider />` (Consumer) or `<B2BIdentityProvider />` (B2B) component. Stytch's [integrate Connected Apps with an existing authentication system](https://stytch.com/docs/connected-apps/guides/integrate-with-existing-system) guide walks through the setup. |
| 23 | +- An Arcade project where you'll create the User Source. |
| 24 | + |
| 25 | +## Register a Connected App in Stytch |
| 26 | + |
| 27 | +<Steps> |
| 28 | + |
| 29 | +### Open the Stytch Dashboard |
| 30 | + |
| 31 | +Sign in to the [Stytch Dashboard](https://stytch.com/dashboard) for your project. |
| 32 | + |
| 33 | +Go to **Connected Apps** in the left navigation, then click **Add Application**. |
| 34 | + |
| 35 | +### Choose the application type |
| 36 | + |
| 37 | +In the **Select type of Connected App** dialog: |
| 38 | + |
| 39 | +- **Application type**: **First-party application**. First-party apps skip the Stytch consent screen at sign-in, which fits the User Source pattern where Arcade is acting as part of your own identity infrastructure rather than a third-party application requesting access. |
| 40 | +- **Authorization Code method**: **Confidential method**, with **Secure Web Application** selected. Arcade authenticates with Stytch using a client secret, which the confidential method supports. The public method is intended for applications that cannot securely store a secret and does not apply here. |
| 41 | + |
| 42 | +Click **Add Application**. |
| 43 | + |
| 44 | +<Image |
| 45 | + alt="Select type of Connected App dialog with First-party application and Confidential method selected" |
| 46 | + className="max-w-full mt-4" |
| 47 | + src="/images/user-sources/stytch/stytch-create-app-light.png" |
| 48 | + width={STYTCH_SCREENSHOT_WIDTH} |
| 49 | + height={STYTCH_SCREENSHOT_HEIGHT} |
| 50 | +/> |
| 51 | + |
| 52 | +### Name the app and add the Arcade redirect URL |
| 53 | + |
| 54 | +On the new app's **Details** page, set **Name** to something your team will recognize, for example `Arcade User Source`. |
| 55 | + |
| 56 | +Scroll to the **Login Redirect URLs** section and add this URL: |
| 57 | + |
| 58 | +`https://cloud.arcade.dev/oauth2/intermediate_callback` |
| 59 | + |
| 60 | +Click **Save** to apply the changes. Stytch reveals the **Client ID** at the top of the details panel. |
| 61 | + |
| 62 | +<Image |
| 63 | + alt="Connected App Details panel showing the Client ID at the top and Login Redirect URLs section with the Arcade redirect URL filled in" |
| 64 | + className="max-w-full mt-4" |
| 65 | + src="/images/user-sources/stytch/stytch-client-id-redirect-uri-light.png" |
| 66 | + width={STYTCH_SCREENSHOT_WIDTH} |
| 67 | + height={STYTCH_SCREENSHOT_HEIGHT} |
| 68 | +/> |
| 69 | + |
| 70 | +### Save the client secret |
| 71 | + |
| 72 | +Stytch shows the **Client Secret** in a one-time dialog after the app is created. Copy the value and store it somewhere secure. The full secret is not retrievable from the Dashboard afterward, so a lost value requires rotating to a new one. |
| 73 | + |
| 74 | +Check the **I have saved my client secret in a secure place** box and confirm. |
| 75 | + |
| 76 | +<Image |
| 77 | + alt="Did you save your client secret? dialog with the secret visible and the confirmation checkbox" |
| 78 | + className="max-w-full mt-4" |
| 79 | + src="/images/user-sources/stytch/stytch-client-secret-light.png" |
| 80 | + width={STYTCH_SCREENSHOT_WIDTH} |
| 81 | + height={STYTCH_SCREENSHOT_HEIGHT} |
| 82 | +/> |
| 83 | + |
| 84 | +</Steps> |
| 85 | + |
| 86 | +## Copy these values to Arcade |
| 87 | + |
| 88 | +Open your project's **Project Overview** page in the Stytch Dashboard. The **Project ID & API keys** section lists your **Project domain**, which is the OIDC issuer Arcade uses. |
| 89 | + |
| 90 | +<Image |
| 91 | + alt="Stytch Project Overview page with the Project domain field highlighted" |
| 92 | + className="max-w-full mt-4" |
| 93 | + src="/images/user-sources/stytch/stytch-domain-light.png" |
| 94 | + width={STYTCH_SCREENSHOT_WIDTH} |
| 95 | + height={STYTCH_SCREENSHOT_HEIGHT} |
| 96 | +/> |
| 97 | + |
| 98 | +Copy these values into Arcade's User Source form: |
| 99 | + |
| 100 | +| Arcade field | Where to find it in Stytch | |
| 101 | +|---|---| |
| 102 | +| **Issuer URL** | The full URL form of your **Project domain** from the **Project Overview** page, for example `https://<your-project-domain>.customers.stytch.dev`. Stytch publishes the OIDC discovery document at `<project-domain>/.well-known/openid-configuration`. | |
| 103 | +| **Client ID** | The ID shown at the top of the Connected App's **Details** page. | |
| 104 | +| **Client Secret** | The Client Secret you saved when you created the app. | |
| 105 | + |
| 106 | +## Create the User Source in Arcade |
| 107 | + |
| 108 | +Open the Arcade Dashboard, select your project, navigate to **User Sources**, and click **Create User Source**. Paste the values from the table above. For a walkthrough of the form, see [Create a User Source](/guides/user-sources#create-a-user-source) in the User Sources overview. |
| 109 | + |
| 110 | +Once the User Source is active, attach it to an MCP Gateway by following [Create via Dashboard](/guides/mcp-gateways/create-via-dashboard) and picking **User Source** under "Non-Arcade Users" in the gateway form. |
| 111 | + |
| 112 | +## Notes |
| 113 | + |
| 114 | +- **Test vs production**: New Connected Apps default to test mode and issue test-environment credentials. Enable the **Enable for production** toggle on the app's **Details** page when you're ready to issue live tokens, then update the User Source in Arcade with the production Client ID and Client Secret. |
| 115 | +- **Custom Stytch domains**: If you've configured a [custom domain](https://stytch.com/docs/connected-apps/resources/custom-domains) on the Stytch project, use that hostname as the **Issuer URL** instead of the `<project-domain>.customers.stytch.dev` value. End users see the custom domain on the authorization page. |
| 116 | +- **Client secret rotation**: Stytch supports [rotating the client secret](https://stytch.com/docs/api-reference/consumer/api/connected-apps/rotate-secret/start-secret-rotation) for a Connected App from the Dashboard or via the API. The rotation flow keeps the previous secret active while you swap the new one into Arcade. See [Rotate the client secret](/guides/user-sources#rotate-the-client-secret) in the User Sources guide for the Arcade-side procedure. |
| 117 | +- **Subject Claim**: Arcade's default Subject Claim, `sub`, is the Stytch user's stable identifier and is the recommended value. Stytch's Connected Apps issues a [fixed set of standard OIDC claims](https://stytch.com/docs/api-reference/consumer/api/connected-apps/tokens/connected-app-id-token-object) on the ID token. Stytch does not currently support a custom-claim template for the ID token, so the standard claim set is what Arcade has available. See [Advanced: scopes and subject claim](/guides/user-sources#advanced-scopes-and-subject-claim) in the overview for what makes a good claim. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments