Skip to main content
If you’re just getting started, follow our Quickstart on implementing a general login or signup.

​
Overview

This guide shows you how to configure the <StytchB2B> component auth flow to be scoped to a specific organization. This typically means you have or plan to have org-specific routes in your app (e.g. acme.yourapp.com or yourapp.com/team/acme).

​
Prerequisites

  • JavaScript, Next.js, or React B2B SDK installed
  • public_token from your Stytch project & environment added to your app
  • Enable the Frontend SDK configuration and any relevant authentication products in the Dashboard.
1

Add <StytchB2B> to your login page

In most cases, the Stytch UI component would be hosted at an org-specific URL (e.g. https://yourapp.com/acme/login).
Having an organization-specific URL makes it more difficult to be abused for account enumeration.
2

Add the organization URL to authorized domains

If you’re using a URL with the organization_slug (e.g. acme in the example above):
  • Add it as an Authorized Domain using an Organization URL template.
  • Or set the organizationSlug param in the component config directly.
3

Set authFlowType to Organization

Configure under the component config:
authFlowType: 'Organization'
4

Set auth methods and their redirect URLs

Specify auth methods under the config, for example:
products: [B2BProducts.emailMagicLinks, B2BProducts.sso],
emailMagicLinksOptions: {
	loginRedirectURL: "https://example.com/login",
	signupRedirectURL: "https://example.com/signup"
},
ssoOptions: {
	loginRedirectURL: "https://example.com/login",
	signupRedirectURL: "https://example.com/signup"
},
Redirect URLs determine where users are routed to complete their auth flow per method config. For example:
  • signupRedirectURL: Where new users are routed after clicking an email magic link.
  • loginRedirectURL: Where existing users are routed after clicking an email magic link.
These can be set to be the same or different URL depending if you want to redirect users differently.
5

Add the <StytchB2B> component to any redirects

Add the <StytchB2B> component to your redirect URL routes to handle the remainder of the authentication flow.
6

Handling Session and Member data

Upon a successful authentication, a session_token and session_jwt for the organization is stored in browser cookies or mobile storage.You can retrieve both Session and Member data via the SDK. For example, useStytchMemberSession() could be used to route authenticated users to your core app experience.

​
Account enumeration risk

An account enumeration attack is when a bad actor identifies valid users, emails, etc. through an app’s auth flow to gain information about a system that can be used in further attacks. Org-specific logins surface the organization’s name and login methods. Passwords and Magic Links can further expose whether or not a user has an existing account if error messages aren’t opaque enough. Preventative measures you can take:

​
Next steps

  • Authentication methods
  • Session management