We’re excited to announce that Stytch Connected Apps can now plug into any existing authentication infrastructure. This means you can power AI agent interactions, cross-app logins, and secure data sharing without ripping and replacing your identity stack.

While Connected Apps unlocks a range of integrations, it shines as a catalyst for building agentic use cases and securing Model Context Protocol (MCP) implementations. It handles the underlying OAuth complexity, provides a drop-in UI and full lifecycle management for user consent, and gives admins org-level policy controls and human-in-the-loop approvals to keep agent interactions safe and auditable.

Until now, many teams couldn’t take advantage of Connected Apps as they were locked into contracts with a legacy Customer Identity and Access Management (CIAM) vendor, or were anchored to an in-house auth system. Even if they chose to trial a simple agentic workflow, it meant spending months re-architecting their identity stack. That changes today with Connected Apps.

Stytch Connected Apps is generally available today, and free to use for the first 10,000 active users and AI agents. Head to the Connected Apps docs to get started or let us know if you’d like to chat through your use case first.

“MCP is the handshake between our data and agent workflows. With Stytch, those connections are standardized, secure, and reversible—no glue code, no platform debt.”

— Trey Lachance, Software Engineer, Sacra

Implementing Connected Apps on any identity stack

We’ve made Connected Apps incredibly flexible so it can run natively on Stytch’s auth platform or be dropped into any existing identity infrastructure. At its core, Stytch uses Trusted Auth Tokens, where your app asserts a logged-in user via a trusted token; Stytch verifies the trusted token, renders consent, and completes the OAuth flow to the requesting app or agent with a session. This creates a fast path to cleanly integrate with your existing auth solution.

Today, most modern auth providers will send JWTs in their response, leading to a smooth process where we can directly use that token for the session exchange. However, if your CIAM doesn’t provide JWTs, we can securely handle these requests with minimal effort. Here are the options:

Option 1: Using a JWT issued by your auth provider

If your auth provider already issues JWTs, you can pass that token to Stytch and start the flow immediately. Just initialize a lightweight client, provide the trusted auth token, and render the consent UI tied to the OAuth request.

// Initialize the Stytch SDK. Tell it to not manage persistent sessions or set cookies 
const stytch = new StytchUIClient(process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN);

const tokenProfileID = process.env.NEXT_PUBLIC_STYTCH_TAT_PROFILE_ID;

const OAuthAuthorizeImpl = ({ authToken }) => {
  const tokenParams = { trustedAuthToken, tokenProfileID };
  return (
    <StytchProvider stytch={stytch}>
      <IdentityProvider trustedAuthTokenParams={tokenParams} />
    <StytchProvider/>
  )
}

export function OAuthAuthorizePage() {
  // Derive Trusted Auth Token from existing identity ecosystem
  // Can be an Access Token or ID Token JWT from _any_ identity system
  const [authToken, setAuthToken] = useState<string | null>(null);
  useEffect(() => {
    getIDTokenFromExistingInfra().then(setAuthToken)
  }, [getToken]);

  // Instantiate IDP component using Trusted Auth Token directly
  // IDP component manages user state entirely self-contained 
  return (
    {authToken && <OAuthAuthorizeImpl authToken={authToken} />}
  )
}

Option 2: Creating a new JWT

If your auth provider doesn’t issue JWTs, mint a short-lived one with a keypair on your server and pass it to the client to get started. While competing solutions omit this step, signing a keypair keeps the integration secure while avoiding any session coupling with your backend, critical for enterprise customers.

/* Sample generation of private key pair for signing
openssl genpkey -algorithm RSA -out private_key.pem -pkeyopt rsa_keygen_bits:2048 
*/

// Serverside implementation of Trusted Auth Token JWT minting
import { importPKCS8, SignJWT } from 'jose';

const privateKeyProm = importPKCS8(process.env.STYTCH_TAT_PRIVATE_KEY, 'RS256');

async function generateSignedJwt(payloadData) {
  const jwt = await new SignJWT(payloadData)
    .setProtectedHeader({ alg: 'RS256' })
    .setIssuedAt()
    .setIssuer('urn:example:issuer')
    .setAudience('urn:example:audience')
    .setExpirationTime('10m')
    .sign(await privateKeyProm);

  console.log('Signed JWT:', jwt);
  return jwt;
}

export async function POST(req, res){
  const token = generateSignedJwt({
    userId: '12345', // derived from req using existing IAM tooling
    email: 'user@example.com',
    roles: ['admin', 'user'],
  });
  return Response.json({ token })
}

Headless SDKs

The above options show you how to use Stytch's prebuilt UI components. If you would prefer to have full control over your UI, Stytch provides a headless SDK for full customization of the experience and UI to fit your brand and app UX. Use the headless SDK methods to parse the OAuth request, start authorization, and submit the result from your own components.

const stytch = new StytchUIClient(process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN);

const tokenProfileID = process.env.NEXT_PUBLIC_STYTCH_TAT_PROFILE_ID;

export function OAuthAuthorizeIdealAPI() {
  // Derive Trusted Auth Token from existing identity ecosystem
  // Can be an Access Token or ID Token JWT from _any_ identity system
  const {getToken} = useAuth();
  const [consentData, setConsentData] = useState<OAuthConsentData | null>(null);

  // Exchange the TaT and kick off the OAuth flow
  useEffect(() => {
    (async () => {
      const token = await getToken();
      await stytch.session.attest({ 
        token,
        profile_id: tokenProfileID,
        session_duration_minutes: 10 
      })

      const oauthParams = parseOAuthParams(window.location.href);
      const consentData = await stytch.idp.oauthAuthorizeStart(oauthParams);
      setConsentData(consentData);
    })();
  }, [getToken]);

  // Call the Submit endpoint to finish off the flow and trigger a browser navigation redirect
  const onSubmit = (consentGranted) => stytch.idp.oauthAuthorizeSubmit({
    ...oauthParams, 
    consentGranted,
  })
  // Redirection is an explicit action so application code gets a chance to emit events
  // or do other bookkeeping before redirect is committed
  .then(res => window.location.href = res.location);

  return (
    {consentData && (
      <CustomConsentUI onSubmit={onSubmit} consentData={consentData}>
    )}
  )
}

Watch this demo video where one of our engineers walks through the implementation step by step.

Where Connected Apps shines: AI agents

The most obvious place we see Connected Apps being used is in AI and MCP integrations. This way, teams can create MCP servers that give agents scoped, auditable access to user data with minimal lift. Instead of redirecting an engineering team’s next few quarters building OAuth, they can take advantage of Connected Apps to get something shipped in one sprint.

A standalone solution provides a pain-free way to trial what an auth migration may look like. You can trial the functionality and UX of Stytch with one wedge of the auth stack. Start with Connected Apps for securely extending auth to AI agents, then expand into the rest of Stytch’s platform when you’re ready. This way of implementing OAuth support has the added benefit of seamlessly integrating with most RUM solutions, letting you track important user metrics immediately upon integration. The design of Connected Apps intentionally avoids lock-in to a specific auth migration path, giving you the same flexibility as if you never integrated it at all.

To demonstrate this, we have created a guide and made a demo video showing how to add Connected Apps into an existing auth setup. The process will be similar for any CIAM being used, whether SaaS or in-house. Contact us with any questions or concerns if your solution will work.

Additionally, read the case study we did with Sacra to learn how Connected Apps enabled them to build their MCP servers and solve for enterprise level needs.

“Stytch’s MCP-ready flows made our ChatGPT and Claude connectors predictable: dynamic client registration, safe resets, and clear errors we can action on instead of mystery failures.”

— Danny Tharma, Head of Engineering & Product at Sacra

Next steps

Connected Apps dramatically reduces the time to ship MCP and agent-based interactions. It also makes OAuth adoption faster, lighter, and more practical by working with existing authentication systems.

Read the docs or contact us to talk through your stack and roadmap. We’re excited to see how Connected Apps can help your team.