useUserUpdateRequest

The useUserUpdateRequest hook is a custom React hook designed for updating user profile information in your application. It provides an easy-to-use interface for developers to securely modify various user properties. The hook returns an updateUser function, which accepts an object following the UserFields interface to update the user profile information.

This hook can be used in scenarios where you want to allow users to update their profile information, such as when they edit their account settings, complete onboarding steps, or update their preferences.

UserFields interface

The updateUser function provided by the useUserUpdateRequest hook accepts an object with properties that match the UserFields interface. The UserFields interface includes the following properties:

By providing an object following the UserFields interface, the updateUser function allows you to update the necessary properties in the user profile while ensuring the restricted properties remain untouched.

The userUpdate function

The updateUser function, provided by the useUserUpdateRequest hook, allows you to conveniently and securely handle user profile updates, including email verification when necessary.

Output

The updateUser function returns an object with the following properties:

Example Usage

In this example, the useUserUpdateRequest hook is imported and used in the UserProfileEdit component. The updateUser function is called with the userFields object when the user saves their profile information. If email verification is required (isEmailVerificationRequired is true), the verifyEmailFn function is used to handle the email verification process. Once the email is verified or if email verification is not required, you can handle the successful update, such as by showing a success message or redirecting the user to another page.

import { useUserUpdateRequest } from '@dynamic-labs/sdk-react';

function UserProfileEdit() {
  const { updateUser } = useUserUpdateRequest();

  const handleSave = async (userFields) => {
    const {
      isEmailVerificationRequired,
      updateUserProfileResponse,
      verifyEmailFn,
    } = await updateUser(userFields);

    if (isEmailVerificationRequired) {
      // Trigger the email verification process
      // Obtain the verificationToken from the user (e.g., from a user-input field)
      const verificationToken = 'user-provided-verification-token';
      await verifyEmailFn(verificationToken);
      // Handle successful email verification, e.g., show a success message or redirect
    } else {
      // Handle successful update without email verification, e.g., show a success message or redirect
    }
  };

  return (
    // Render your component with user fields input and save button
    // ...
  );
}

CodeSandbox

Integration with useEmailVerificationRequest

The useUserUpdateRequest hook is designed to work seamlessly with the useEmailVerificationRequest hook.

To handle email verification in another view or component, you can directly use the useEmailVerificationRequest hook, which provides the verifyEmail function. This allows you to verify a user's email address after they update their email in their profile. Using both hooks together ensures a streamlined user experience while maintaining security and data integrity.