跳到主要内容

User Store

The UserStore is a reactive store that manages user authentication, profile, and account operations. It provides a simplified interface for user management while automatically synchronizing with other CDF stores.

Overview​

The UserStore provides:

  • User authentication (login, logout, OTP)
  • User profile management
  • Account deletion
  • Automatic synchronization with other stores
  • Reactive state management

Accessing the Store​

Access the UserStore through the CDF instance:

const userStore = espCDF.userStore;

Properties​

PropertyTypeDescription
userESPRMUser | nullThe current user instance. This provides access to all user-level operations from the base SDK.
userInfoESPRMUserInfo | nullThe current user's information object containing profile details.
authInstanceESPRMAuth | nullThe authentication instance that provides authentication methods. All authentication methods from the base SDK are automatically mapped to the UserStore.

Example Usage​

// Get user instance
const user = userStore.user;
if (user) {
  // Access user methods from base SDK
  // See: https://espressif.github.io/esp-rainmaker-app-sdk-ts/classes/ESPRMUser.ESPRMUser.html
}

// Get user info
const userInfo = userStore.userInfo;
if (userInfo) {
  console.log("User name:", userInfo.name);
  console.log("User email:", userInfo.email);
}

// Get auth instance
const authInstance = userStore.authInstance;
// Authentication methods are available directly on userStore

UserStore Methods​

Login​

To log in a user with email and password, use the login() method. This automatically sets the user instance and syncs user data if autoSync is enabled.

/*
- email: User's email address
- password: User's password
*/

try {
  const result = await userStore.login(email, password);
  if (result.success) {
    console.log("Login successful");
    // User instance is automatically set
    // User info and other stores are synced if autoSync is enabled
  }
} catch (error) {
  console.error("Login failed:", error);
}

Request Login OTP​

To request an OTP for login via email or phone number, use the requestLoginOTP() method.

/*
- userName: User's email or phone number
*/

try {
  const result = await userStore.requestLoginOTP(userName);
  if (result.success) {
    console.log("OTP sent successfully");
    // Proceed to loginWithOTP
  }
} catch (error) {
  console.error("OTP request failed:", error);
}

Login With OTP​

To log in a user using OTP verification code, use the loginWithOTP() method. Must be called after requestLoginOTP.

/*
- userName: User's email or phone number
- verificationCode: OTP verification code received
*/

try {
  const result = await userStore.loginWithOTP(userName, verificationCode);
  if (result.success) {
    console.log("Login successful");
    // User instance is automatically set
  }
} catch (error) {
  console.error("OTP login failed:", error);
}

Logout​

To log out the current user and clear all store data, use the logout() method.

try {
  const result = await userStore.logout();
  if (result.success) {
    console.log("Logged out successfully");
    // All stores are automatically cleared
  }
} catch (error) {
  console.error("Logout failed:", error);
}

Set User Instance​

To set the user instance manually, use the setUserInstance() method. If autoSync is enabled, this will automatically sync user info and other stores.

/*
- userInstance: The user instance to set
*/

try {
  const userInstance = await authInstance.getLoggedInUser();
  if (userInstance) {
    await userStore.setUserInstance(userInstance);
    // User info and stores are synced if autoSync is enabled
  }
} catch (error) {
  console.error("Error setting user instance:", error);
}

Set User Info​

To manually set the user information in the store, use the setUserInfo() method.

/*
- userInfo: The user information object
*/

userStore.setUserInfo(userInfo);

Sync User Info From Cloud​

To fetch the latest user information from the cloud and update the store, use the syncUserInfoFromCloud() method.

try {
  await userStore.syncUserInfoFromCloud();
  console.log("User info synced:", userStore.userInfo);
} catch (error) {
  console.error("Error syncing user info:", error);
}

Initiate Delete Account​

To initiate the account deletion process by requesting a verification code, use the initiateDeleteAccount() method.

try {
  const response = await userStore.initiateDeleteAccount();
  console.log("Deletion code sent:", response);
} catch (error) {
  console.error("Error initiating account deletion:", error);
}

Delete Account​

To confirm and complete the account deletion using the verification code, use the deleteAccount() method.

/*
- verificationCode: Verification code received via email
*/

try {
  const response = await userStore.deleteAccount(verificationCode);
  if (response.status === "success") {
    console.log("Account deleted successfully");
    // All stores are automatically cleared
  }
} catch (error) {
  console.error("Error deleting account:", error);
}

Clear Store​

To clear the user and userInfo from the store, use the clear() method. This is called automatically during logout.

userStore.clear();

Add Custom Property​

To dynamically add an observable property to the store with getter and setter methods, use the addProperty() method.

/*
- propertyName: Name of the property to add
- initialValue: Initial value for the property
*/

userStore.addProperty("customData", {});
// Creates: customData, getCustomData(), setCustomData(value)

SDK Methods Available via User Instance​

The UserStore automatically maps all methods from the ESPRMUser instance. These methods are available directly on the user property. For detailed documentation on these methods, refer to the ESPRMUser API Reference.

User Profile Methods​

Password Management Methods​

Security Methods​

Group Management Methods​

Node Management Methods​

Automation Methods​

SDK Methods Available via Auth Instance​

The UserStore automatically maps all authentication methods from the ESPRMAuth instance. For detailed documentation, refer to the ESPRMAuth API Reference and Authentication documentation.

Authentication Methods​

Reactive Updates​

The UserStore is reactive, so you can observe changes:

import { useEffect } from 'react';

useEffect(() => {
  console.log("User info updated:", userStore.userInfo);
}, [userStore.userInfo]);

useEffect(() => {
  console.log("User instance changed:", userStore.user);
}, [userStore.user]);

Automatic Store Synchronization​

When autoSync is enabled in CDF configuration, the UserStore automatically synchronizes with other stores:

  • NodeStore: Automatically syncs node list when user logs in
  • GroupStore: Automatically syncs group list when user logs in
  • SubscriptionStore: Automatically subscribes to listeners when user logs in

This happens automatically in the setUserInstance method when autoSync is enabled.

Additional Resources​

On this page