Skip to main content
import { AuthFlowType, B2BProducts, StytchB2B } from "@stytch/react/b2b";

const organizationConfig = {
  authFlowType: AuthFlowType.Organization,
  organizationSlug: 'example-org', // Optional, only needed if not rendering on an Organization-specific URL
  products: [B2BProducts.oauth],
  oauthOptions: {
    loginRedirectURL: 'https://example.com/authenticate',
    signupRedirectURL: 'https://example.com/signup',
    providers: [
      { type: 'google', one_tap: true, cancel_on_tap_outside: false },
      { type: 'microsoft' },
    ],
    providerParams: {
      login_hint: 'example_hint@stytch.com',
    },
  },
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};

// Render the StytchB2B component
<StytchB2B config={organizationConfig} />
To build an Organization-specific login page that only allows a Member to log in to a specific Organization, set up a login page that renders the StytchB2B component with authFlowType set to Organization. The UI component is commonly hosted on an Organization-specific login URL that contains the Organization’s slug (unique identifier) – for example, https://yourdomain.com/example-org/login, where example-org is the Organization slug. If the Organization slug is included in your URL structure, you’ll need to specify where our JavaScript SDK should look for it by adding an Organization URL template in the Domains section of the Frontend SDK page in the Stytch Dashboard. Using the URL examples above, your Organization URL template would look like https://yourdomain.com/{{slug}}/login. Alternatively, if you’d prefer not to set up an Organization URL template, you can pass the desired Organization slug directly into the UI component via the config.organizationSlug parameter.