On Organization Change

import { useEffect, useState } from 'react';
import { useStytchB2BClient } from '@stytch/nextjs/b2b';

export const OrganizationDisplay = () => {
  const stytch = useStytchB2BClient();
  const [organization, setOrganization] = useState(null);

  useEffect(() => {
    // Subscribe to organization changes
    const unsubscribe = stytch.organization.onChange((org) => {
      setOrganization(org);
    });

    // Cleanup subscription on unmount
    return unsubscribe;
  }, [stytch]);

  return (
    <div>
      {organization ? (
        <p>Organization: {organization.organization_name}</p>
      ) : (
        <p>No organization found</p>
      )}
    </div>
  );
};

{
  "email_allowed_domains": [],
  "email_invites": "ALL_ALLOWED",
  "email_jit_provisioning": "NOT_ALLOWED",
  "mfa_policy": "OPTIONAL",
  "organization_id": "organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931",
  "organization_logo_url": "",
  "organization_name": "Example Org Inc",
  "organization_slug": "exampleorg",
  "organization_external_id": "example-org-external-id",
  "sso_default_connection_id": null,
  "sso_jit_provisioning": "ALL_ALLOWED",
  "sso_jit_provisioning_allowed_connections": [],
  "sso_active_connections": [],
  "scim_active_connection": null,
  "trusted_metadata": {},
  "oauth_tenant_jit_provisioning": "RESTRICTED",
  "allowed_oauth_tenants": {
    "slack": ["T1234"],
    "hubspot": ["Hub2345", "Hub3456"]
  }
}

import { useEffect, useState } from 'react';
import { useStytchB2BClient } from '@stytch/nextjs/b2b';

export const OrganizationDisplay = () => {
  const stytch = useStytchB2BClient();
  const [organization, setOrganization] = useState(null);

  useEffect(() => {
    // Subscribe to organization changes
    const unsubscribe = stytch.organization.onChange((org) => {
      setOrganization(org);
    });

    // Cleanup subscription on unmount
    return unsubscribe;
  }, [stytch]);

  return (
    <div>
      {organization ? (
        <p>Organization: {organization.organization_name}</p>
      ) : (
        <p>No organization found</p>
      )}
    </div>
  );
};

{
  "email_allowed_domains": [],
  "email_invites": "ALL_ALLOWED",
  "email_jit_provisioning": "NOT_ALLOWED",
  "mfa_policy": "OPTIONAL",
  "organization_id": "organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931",
  "organization_logo_url": "",
  "organization_name": "Example Org Inc",
  "organization_slug": "exampleorg",
  "organization_external_id": "example-org-external-id",
  "sso_default_connection_id": null,
  "sso_jit_provisioning": "ALL_ALLOWED",
  "sso_jit_provisioning_allowed_connections": [],
  "sso_active_connections": [],
  "scim_active_connection": null,
  "trusted_metadata": {},
  "oauth_tenant_jit_provisioning": "RESTRICTED",
  "allowed_oauth_tenants": {
    "slack": ["T1234"],
    "hubspot": ["Hub2345", "Hub3456"]
  }
}

import { useEffect, useState } from 'react';
import { useStytchB2BClient } from '@stytch/nextjs/b2b';

export const OrganizationDisplay = () => {
  const stytch = useStytchB2BClient();
  const [organization, setOrganization] = useState(null);

  useEffect(() => {
    // Subscribe to organization changes
    const unsubscribe = stytch.organization.onChange((org) => {
      setOrganization(org);
    });

    // Cleanup subscription on unmount
    return unsubscribe;
  }, [stytch]);

  return (
    <div>
      {organization ? (
        <p>Organization: {organization.organization_name}</p>
      ) : (
        <p>No organization found</p>
      )}
    </div>
  );
};

{
  "email_allowed_domains": [],
  "email_invites": "ALL_ALLOWED",
  "email_jit_provisioning": "NOT_ALLOWED",
  "mfa_policy": "OPTIONAL",
  "organization_id": "organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931",
  "organization_logo_url": "",
  "organization_name": "Example Org Inc",
  "organization_slug": "exampleorg",
  "organization_external_id": "example-org-external-id",
  "sso_default_connection_id": null,
  "sso_jit_provisioning": "ALL_ALLOWED",
  "sso_jit_provisioning_allowed_connections": [],
  "sso_active_connections": [],
  "scim_active_connection": null,
  "trusted_metadata": {},
  "oauth_tenant_jit_provisioning": "RESTRICTED",
  "allowed_oauth_tenants": {
    "slack": ["T1234"],
    "hubspot": ["Hub2345", "Hub3456"]
  }
}

The Stytch SDK stores the of the logged-in in local storage. and will periodically refresh the cached data from the API. Use the organization.onChange method to listen for and react to changes to the Organization object.

Before using this method, enable in the Frontend SDK page.

If you need to asynchronously fetch guaranteed-fresh data from the API, use the organizations.get method.

Parameters

callback

function

The callback function to call when the Organization changes. The first parameter is the updated Organization object.

Show parameters

organization

object

The updated Organization object.

Show properties

organization_id

string

Globally unique UUID that identifies a specific Organization. The organization_id is critical to perform operations on an Organization, so be sure to preserve this value. You may also use the organization_slug or organization_external_id here as a convenience.

organization_name

string

The name of the Organization. Must be between 1 and 128 characters in length.

organization_logo_url

string

The image URL of the Organization logo.

organization_slug

string

The unique URL slug of the Organization.The slug only accepts alphanumeric characters and the following reserved characters: - . _ ~. Must be between 2 and 128 characters in length.Wherever an organization_id is expected in a path or request parameter, you may also use the organization_slug as a convenience.

sso_active_connections

array[objects]

An array of active SAML Connection references or OIDC Connection references.

Show sso_active_connections properties

connection_id

string

Globally unique UUID that identifies a specific SSO connection_id for a Member.

display_name

string

A human-readable display name for the connection.

email_allowed_domains

array[strings]

An array of email domains that allow invites or JIT provisioning for new Members. This list is enforced when either email_invites or email_jit_provisioning is set to RESTRICTEDCommon domains such as gmail.com are not allowed. See the full list of disallowed common email domains.

email_jit_provisioning

string

The authentication setting that controls how a new Member can be provisioned by authenticating via Email Magic Link or OAuth. The accepted values are:

RESTRICTED – only new Members with verified emails that comply with email_allowed_domains can be provisioned upon authentication via Email Magic Link or OAuth
NOT_ALLOWED – the default setting, disables JIT provisioning via Email Magic Link and OAuth

auth_methods

string

The setting that controls which authentication methods can be used by Members of an Organization. The accepted values are:

ALL_ALLOWED – the default setting which allows all authentication methods to be used
RESTRICTED – only methods that comply with allowed_auth_methods can be used for authentication. This setting does not apply to Members with is_breakglass set to true

allowed_auth_methods

array[strings]

An array of allowed authentication methods. This list is enforced when auth_methods is set to RESTRICTED. The list’s accepted values are: sso, magic_link, email_otp, password, google_oauth, microsoft_oauth, slack_oauth, github_oauth, and hubspot_oauth.

sso_default_connection_id

string

The default connection used for SSO when there are multiple active connections.

oauth_tenant_jit_provisioning

string

The authentication setting that controls how a new Member can JIT provision into an Organization by tenant. The accepted values are:

RESTRICTED – only new Members with tenants in allowed_oauth_tenants can JIT provision via tenant
NOT_ALLOWED – the default setting, disables JIT provisioning by OAuth Tenant

allowed_oauth_tenants

object

A map of allowed OAuth tenants. If this field is not passed in, the Organization will not allow JIT provisioning by OAuth Tenant. Allowed keys are “slack”, “hubspot”, and “github”.

Return value

unsubscribe

function

The function to call to unsubscribe from the Organization change event.

⌘I

​Parameters

​Return value

Parameters

Return value