Adding OAuth to Stytch Login

​

Prerequisites

1. Complete the steps in the OAuth configuration guide
2. Enable the Frontend SDKs in your Stytch Dashboard and enable Create Organizations under “Enabled Methods.”

​

Add OAuth providers to your UI config

import { B2BProducts, StytchB2B } from '@stytch/react/b2b';

const Login = () => {
  const config = {
    authFlowType: "Discovery", // or "Organization"
    products: [B2BProducts.oauth],
    oauthOptions: {
      providers: [{ type: 'google' }, { type: 'microsoft' }]
    },
  };

  return <StytchB2B config={config} />;
};

export default Login;

​

Render the UI component

• Handle the OAuth redirect from Stytch based on the stytch_token_type
• For Discovery flows, prompt the user with their discovered organizations and handle their selection
• For Organization-specific flows, log the user in directly

​

Test your integration

1. Navigate to your login page
2. Click on an OAuth provider button (e.g., “Continue with Google”)
3. Complete the OAuth flow with the provider
4. Verify that you’re redirected back to your application and authenticated

​

Next steps