On Organization Change

import { useEffect, useState } from 'react';
import { useStytchB2BClient } from '@stytch/react/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/react/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/react/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/react/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

function

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

Show parameters

object

The updated Organization object.

Show properties

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.

string

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

string

The image URL of the Organization logo.

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.

array[objects]

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

Show sso_active_connections properties

string

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

string

A human-readable display name for the connection.

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.

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

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

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.

string

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

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

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

function

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

Pre-built UI

Hooks

Methods

More Resources

Skeleton group medium 6

On Organization Change

Parameters

Return value