Displaying & Updating User Info

Using our UI

The Dynamic Widget UI component and Dynamic Embedded Widget UI component both contain a user profile section where the user can see their profile information and update it easily.

You can check it out at https://demo.dynamic.xyz/.

Using your UI

This guide will help you to create a user profile inside your own custom UI, including everything you see in the regular Dynamic Widget UI component/Dynamic Embedded Widget UI component described above.

Setup

Show the user’s profile based on whether they are logged in or not

How: Check if the user is logged in or not

Hook/Component: useIsLoggedIn

Notes: We start here assuming you have signup/login implemented already

React provides the useIsLoggedIn hook to check authentication status and conditionally render components.

React

import { useIsLoggedIn } from "@dynamic-labs/sdk-react-core";

const isLoggedIn = useIsLoggedIn();

return <>{isLoggedIn ? <Profile /> : </Login>}</>

Profile Info

Show user profile information

How: Fetch info from user object on useDynamicContext

Hook/Component: useDynamicContext

Notes: The format of the user can be found here: userProfile. For working with custom metadata fields and storing additional user data, see User Metadata.

React provides the useDynamicContext hook to access user information and display profile details.

React

import { useDynamicContext } from "@dynamic-labs/sdk-react-core";

const { user } = useDynamicContext();

return (
  <div className="user-details">
    {user?.firstName && <p>First name: {user.firstName} </p>}
    {user?.email && <p>E-Mail: {user.email} </p>}
    {user?.alias && <p>Alias: {user.alias} </p>}
    {user?.lastName && <p>Last name: {user.lastName} </p>}
    {user?.jobTitle && <p>Job: {user.jobTitle} </p>}
    {user?.phoneNumber && <p>Phone: {user.phoneNumber} </p>}
    {user?.tShirtSize && <p>Tshirt size: {user.tShirtSize} </p>}
    {user?.team && <p>Team: {user.team} </p>}
    {user?.country && <p>Country: {user.country} </p>}
    {user?.username && <p>Username: {user.username} </p>}
    {user?.metadata && Object.keys(user.metadata).length > 0 && (
      <div>
        <h4>Custom Metadata Fields:</h4>
        <p><em>Additional user data and preferences stored in metadata</em></p>
        {Object.entries(user.metadata).map(([key, value]) => (
          <p key={key}><strong>{key}:</strong> {String(value)}</p>
        ))}
      </div>
    )}
  </div>
);

Allow user to update their profile information

How: useUserUpdateRequest and useOtpVerificationRequest

Hook/Component: useUserUpdateRequest

Notes: Use the appropriate verification flag: isEmailVerificationRequired for email changes; isSmsVerificationRequired for phone changes. Metadata updates and general text fields typically do not require OTP.

Updating Email

React

import { useUserUpdateRequest, useOtpVerificationRequest } from "@dynamic-labs/sdk-react-core";
import { useState } from "react";

const { updateUser } = useUserUpdateRequest();
const { verifyOtp } = useOtpVerificationRequest();

const [showVerifyEmailForm, setShowVerifyEmailForm] = useState(false);
const [loading, setLoading] = useState(false);

const onSubmitEmailUpdate = async (firstName: string, email: string, metadata?: Record<string, any>) => {
  try {
    setLoading(true);
    const { isEmailVerificationRequired } = await updateUser({ firstName, email, metadata });
    if (isEmailVerificationRequired) setShowVerifyEmailForm(true);
  } finally {
    setLoading(false);
  }
};

const onVerifyEmailOtp = async (verificationToken: string) => {
  try {
    setLoading(true);
    await verifyOtp(verificationToken); // Uses active email verification context
  } finally {
    setLoading(false);
    setShowVerifyEmailForm(false);
  }
};

Updating Phone

React

import { useUserUpdateRequest, useOtpVerificationRequest } from "@dynamic-labs/sdk-react-core";
import { useState } from "react";

const { updateUser } = useUserUpdateRequest();
const { verifyOtp } = useOtpVerificationRequest();

const [showVerifySmsForm, setShowVerifySmsForm] = useState(false);
const [loading, setLoading] = useState(false);

const onSubmitPhoneUpdate = async (firstName: string, phoneNumber: string, metadata?: Record<string, any>) => {
  try {
    setLoading(true);
    // phoneNumber should be E.164 format, e.g. [phone]
    const { isSmsVerificationRequired } = await updateUser({ firstName, phoneNumber, metadata });
    if (isSmsVerificationRequired) setShowVerifySmsForm(true);
  } finally {
    setLoading(false);
  }
};

const onVerifySmsOtp = async (verificationToken: string) => {
  try {
    setLoading(true);
    await verifyOtp(verificationToken); // Uses active SMS verification context
  } finally {
    setLoading(false);
    setShowVerifySmsForm(false);
  }
};

Updating Meta

React

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

const { updateUser } = useUserUpdateRequest();

const onSubmitMetadataOnly = async (metadata: Record<string, any>) => {
  // Updating only metadata typically does not require OTP
  await updateUser({ metadata });
};

Updating General

React

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

const { updateUser } = useUserUpdateRequest();

const onSubmitGeneral = async (fields: { firstName?: string; lastName?: string; username?: string }) => {
  // General fields (no email/phone change) typically do not require OTP
  await updateUser(fields);
};

Socials

Show users linked social accounts, allow linking/unlinking

How: useSocialAccounts hook from sdk-react-core

Hook/Component: useSocialAccounts

Notes: None

Use the useSocialAccounts hook to manage social account linking and unlinking with a comprehensive UI component.

React

import { useSocialAccounts } from "@dynamic-labs/sdk-react-core";
import { SocialIcon } from '@dynamic-labs/iconic';

const Avatar = ({ avatarUrl }) => {
  return (
    <div className="avatar">
      <img src={avatarUrl} alt="avatar" />
    </div>
  );
};


const Icon = ({ provider }) => {
  return (
    <div className="icon-container">
    <SocialIcon name={provider} />
    </div>
  );
};

const UserProfileSocialAccount = ({ provider }) => {
  const {
    linkSocialAccount,
    unlinkSocialAccount,
    isProcessing,
    isLinked,
    getLinkedAccountInformation,
  } = useSocialAccounts();

  const isProviderLinked = isLinked(provider);
  const connectedAccountInfo = getLinkedAccountInformation(provider);

  return (
    <div className="social-account">
      <div className="icon">
        {isProviderLinked ? (
          <Avatar avatarUrl={connectedAccountInfo?.avatar} />
        ) : (
          <Icon provider={provider} />
        )}
      </div>
      <div className="label">
        <p>{isProviderLinked ? connectedAccountInfo?.publicIdentifier : provider}</p>
      </div>
      {isProviderLinked ? (
        <button
          onClick={() => unlinkSocialAccount(provider)}
          disabled={isProcessing}
        >
          Disconnect
        </button>
      ) : (
        <button
          onClick={() => linkSocialAccount(provider)}
          disabled={isProcessing}
        >
          Connect
        </button>
      )}
    </div>
  );
};

const Socials = () => {
  const providers = [
    "discord",
    "facebook",
    "github",
    "google",
    "instagram",
    "twitch",
    "twitter",
  ];

  return (
    <div className="social-accounts">
      {providers.map((provider) => (
        <UserProfileSocialAccount key={provider} provider={provider} />
      ))}
    </div>
  );
};

Working with User Metadata

User metadata provides a powerful way to store additional information beyond the standard profile fields. This is perfect for storing user preferences, application state, custom attributes, and integration data.

What is Metadata?

Metadata is a flexible key-value storage system that allows you to:

• Store user preferences (theme, language, notification settings)
• Track application state (onboarding progress, feature flags)
• Store business-specific data (subscription tiers, referral codes)
• Maintain integration data (external service IDs, webhook configs)

Metadata Examples

// User preferences
metadata: {
  theme: 'dark',
  language: 'en',
  notifications_enabled: true
}

// Application state
metadata: {
  onboarding_completed: true,
  feature_flags: ['beta_features', 'advanced_analytics']
}

// Business data
metadata: {
  subscription_tier: 'premium',
  referral_code: 'USER123',
  last_purchase_date: '2024-01-15'
}

Best Practices

• Size limit: Metadata is limited to 2KB total
• Key naming: Use descriptive, lowercase keys with underscores
• Value types: Supports strings, numbers, booleans, and nested objects
• Validation: Always validate on your backend before storing

For how to add metadata to the user and update it, see Custom Information Capture.

• Updated the “Allow user to update their profile information” section with distinct “Updating Email”, “Updating Phone”, “Updating Meta”, and “Updating General” subsections for both React and React Native, and used isSmsVerificationRequired for phone updates.