React hook for accessing and updating the current user's profile — name, email, metadata, and MFA status with the HelloJohn React SDK.

useUser

Name: HelloJohn
Availability: InStock
Rating: 4.9 (20000 reviews)
Author: HelloJohn Contributors

The useUser hook provides access to the current user's profile and methods to update it.

import { useUser } from "@hellojohn/react";

const { user, isLoading, updateUser } = useUser();

Return Value

Property	Type	Description
`user`	`User \| null`	Current user object, or `null` if not authenticated
`isLoading`	`boolean`	`true` on initial load
`updateUser`	`(data: UpdateUserInput) => Promise<{ error }>`	Update user profile

User Object

interface User {
  id: string;
  email: string;
  emailVerified: boolean;
  firstName: string | null;
  lastName: string | null;
  name: string | null;           // firstName + lastName
  avatarUrl: string | null;
  phoneNumber: string | null;
  phoneVerified: boolean;
  metadata: Record<string, unknown>;
  mfaFactors: MFAFactor[];
  oauthConnections: OAuthConnection[];
  createdAt: Date;
  updatedAt: Date;
  lastSignInAt: Date | null;
}

Usage

Display User Profile

import { useUser } from "@hellojohn/react";

function Profile() {
  const { user, isLoading } = useUser();

  if (isLoading) return <Spinner />;
  if (!user) return null;

  return (
    <div>
      <img src={user.avatarUrl ?? "/default-avatar.png"} alt="Avatar" />
      <h1>{user.name ?? user.email}</h1>
      <p>{user.email} {user.emailVerified ? "✅" : "(unverified)"}</p>
    </div>
  );
}

Update User Profile

import { useUser } from "@hellojohn/react";
import { useState } from "react";

function EditProfile() {
  const { user, updateUser } = useUser();
  const [error, setError] = useState<string | null>(null);

  async function handleSave(data: { firstName: string; lastName: string }) {
    const { error } = await updateUser(data);
    if (error) setError(error.message);
  }

  // ...
}

updateUser Parameters

Parameter	Type	Description
`firstName`	`string`	Updated first name
`lastName`	`string`	Updated last name
`email`	`string`	New email (triggers re-verification)
`phoneNumber`	`string`	Phone number
`avatarUrl`	`string`	Avatar image URL
`metadata`	`object`	Custom metadata (merged with existing)
`currentPassword`	`string`	Required when changing email or password
`newPassword`	`string`	New password

Access Custom Metadata

Store and retrieve application-specific data on the user:

// Read metadata
const plan = user?.metadata?.plan as string;
const onboardingComplete = user?.metadata?.onboardingComplete as boolean;

// Update metadata (merged, not replaced)
await updateUser({
  metadata: {
    onboardingComplete: true,
    preferredLanguage: "en",
  },
});

Check MFA Status

const { user } = useUser();

const hasMFA = user?.mfaFactors.length > 0;
const hasTOTP = user?.mfaFactors.some(f => f.type === "totp");
const hasPasskey = user?.mfaFactors.some(f => f.type === "passkey");

useUser

On this page