Skip to main content
import { useEffect, useState } from 'react';
import { useStytchB2BClient } from '@stytch/react-native/b2b';
import { Text } from 'react-native';

export const MemberDisplay = () => {
  const stytch = useStytchB2BClient();
  const [loggedInMember, setLoggedInMember] = useState(null);

  useEffect(() => {
    // Subscribe to member changes
    const unsubscribe = stytch.self.onChange((member) => {
      setLoggedInMember(member);
    });

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

  return (
    <Text>
      {loggedInMember ? (
        `Logged in member: ${loggedInMember.name}`
      ) : (
        'No logged in member found'
      )}
    </Text>
  );
};
{
  "organization_id": "organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931",
  "member_id": "member-test-32fc5024-9c09-4da3-bd2e-c9ce4da9375f",
  "email_address": "sandbox@stytch.com",
  "email_address_verified": true,
  "retired_email_addresses": ["old@stytch.com"],
  "status": "active",
  "name": "Test User",
  "is_breakglass": false,
  "member_password_id": "member-password-test-32fc5024-9c09-4da3-bd2e-c9ce4da9375f",
  "mfa_enrolled": false,
  "mfa_phone_number": null,
  "mfa_phone_number_verified": false,
  "default_mfa_method": "sms_otp",
  "totp_registration_id": "totp-registration-test-32fc5024-9c09-4da3-bd2e-c9ce4da9375f",
  "oauth_registrations": [],
  "sso_registrations": [],
  "roles": [],
  "trusted_metadata": {},
  "untrusted_metadata": {},
  "created_at": "2023-01-01T00:00:00Z",
  "updated_at": "2023-01-01T00:00:00Z"
}
The Stytch SDK stores the currently logged-in in local storage. and will periodically refresh the cached data from the API. Use the self.onChange method to listen for and react to changes to the Member 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 self.get method.

Parameters

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

Return value

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