Skip to main content

​
useUser()

The useUser() hook exposes the active User object, allowing you to seamlessly integrate the user’s profile information—such as their first name, last name, profile image, and custom public metadata—directly into your frontend interface.

​
Import

import { useUser } from "@wacht/react-router";

​
Anatomy

​
loading
boolean
Indicates whether the SDK is actively verifying the user’s identity asynchronously.
​
user
CurrentUser & { refetch: () => void } | null
The active CurrentUser object (including a refetch method to manually reload it), or null if the user is completely logged out.
​
error
Error | null
Any error encountered during the user fetch operation.
​
Profile Management Methods
Functions
​
Email Management Methods
Functions
​
Phone Management Methods
Functions
​
Authenticator (TOTP) Methods
Functions
​
Backup Code Methods
Functions
​
Social & SSO Methods
Functions
​
Passkey Methods
Functions

​
Usage: Personalized Greetings

The hallmark of a great user experience is personalization. You can easily access the user object to populate dashboard headers or welcome messages. 
import { useUser } from "@wacht/react-router";

export function WelcomeBanner() {
  const { loading, user } = useUser();

  if (loading || !user) {
    return null; // Fail silently if not logged in
  }

  return (
    <div className="bg-blue-50 border border-blue-100 rounded-lg p-6 mb-8">
      <h2 className="text-xl font-bold text-blue-900 tracking-tight">
        Welcome back, {user.firstName || "friend"} {/* Fallback if no first name */}
      </h2>
      <p className="text-blue-700 mt-1">
        Your primary email is currently mapped to {user.primaryEmailAddress}.
      </p>
    </div>
  );
}

​
Accessing Custom Metadata

Wacht allows you to attach custom JSON metadata to individual User objects from the Dashboard or Backend API. This is incredibly useful for storing application-specific state (like a user’s theme preference, onboarding status, or stripe customer ID) directly on the identity layer. If a piece of metadata is flagged as public, it becomes securely accessible directly from the frontend React SDK via this hook: 
import { useUser } from "@wacht/react-router";

export function ThemeController() {
  const { loading, user } = useUser();

  if (loading || !user) return null;

  // Access the custom "publicMetadata" object securely attached via the backend
  const userPreferredTheme = user.publicMetadata.theme || "light";

  return (
    <div className="text-sm text-zinc-500 mt-4">
      System rendering in module: <span className="font-bold">{userPreferredTheme}</span>
    </div>
  );
}

​
Updating User Data

The user object returned by this hook is a rich instance possessing its own suite of update functions. You can programmatically update a user’s profile directly from the client (provided the updates conform to your deployment’s configuration policies). 
const handleUpdateName = async () => {
  try {
    const updatedUser = await user.update({ firstName: "Jonathan" });
    console.log("Profile successfully updated!", updatedUser);
  } catch (err) {
    console.error("Failed to update profile:", err);
  }
};