useUser()

The useUser() hook is a convenient way to access the current User data where you need it. This hook provides the user data and helper methods to manage the current active session.

useUser() returns

isSignedIn boolean

A boolean that returns true if the user is signed in.

isLoaded boolean

A boolean that until OneAuxilia loads and initializes, will be set to false. Once OneAuxilia loads, isLoaded will be set to true.

user User

The User object for the currently active user. If the user is not signed in, user will be null.

How to use the useUser() hook

Retrieve the current user data with the useUser() hook

The following example demonstrates how to use the useUser() hook to access the user object, which includes the current user's data, like the user's full name. The isLoaded and isSignedIn properties are used to handle the loading state and to check if the user is signed in, respectively.

For more information on the User object, see the reference.

home.tsx

import { useUser } from "@oneauxilia/oneauxilia-react";

export default function Home() {
  const { isSignedIn, user, isLoaded } = useUser();

  if (!isLoaded) {
    // Handle loading state however you like
    return null;
  }

  if (isSignedIn) {
    return <div>Hello {user.fullName}!</div>;
  }

  return <div>Not signed in</div>;
}

Update the current user data with the useUser() hook

The following example demonstrates how to use the useUser() hook to access the user object, which includes the update method for updating the user's data.

For more information on the update() method, see the User reference.

home.tsx

import { useUser } from "@oneauxilia/oneauxilia-react";

export default function Home() {
  const { isLoaded, user } = useUser();

  if (!isLoaded) {
    // Handle loading state however you like
    return null;
  }

  if (!user) return null;

  const updateUser = async () => {
    await user.update({
      firstName: "John",
      lastName: "Doe",
    });
  };

  return (
    <>
      <button onClick={updateUser}>Click me to update your name</button>
      <p>user.firstName: {user?.firstName}</p>
      <p>user.lastName: {user?.lastName}</p>
    </>
  );
}

Reload user data with the useUser() hook

To retrieve the latest user data after updating the user elsewhere, use the user.reload() method.

For more information on the reload() method, see the User reference.

home.tsx

import { useUser } from "@oneauxilia/oneauxilia-react";

export default function Home() {
  const { isLoaded, user } = useUser();

  if (!isLoaded) {
    // Handle loading state however you like
    return null;
  }

  if (!user) return null;

  const updateUser = async () => {
    // Update data via an API endpoint
    const updateMetadata = await fetch("/api/updateMetadata");

    // Check if the update was successful
    if (updateMetadata.message !== "success") {
      throw new Error("Error updating");
    }

    // If the update was successful, reload the user data
    await user.reload();
  };

  return (
    <>
      <button onClick={updateUser}>Click me to update your metadata</button>
      <p>user role: {user?.publicMetadata.role}</p>
    </>
  );
}

PreviousClient-side Helpers NextuseOneAuxilia()

Last updated 10 months ago

import { useUser } from "@oneauxilia/oneauxilia-react"; export default function Home() { const { isSignedIn, user, isLoaded } = useUser(); if (!isLoaded) { // Handle loading state however you like return null; } if (isSignedIn) { return <div>Hello {user.fullName}!</div>; } return <div>Not signed in</div>; }

import { useUser } from "@oneauxilia/oneauxilia-react"; export default function Home() { const { isLoaded, user } = useUser(); if (!isLoaded) { // Handle loading state however you like return null; } if (!user) return null; const updateUser = async () => { await user.update({ firstName: "John", lastName: "Doe", }); }; return ( <> <button onClick={updateUser}>Click me to update your name</button> <p>user.firstName: {user?.firstName}</p> <p>user.lastName: {user?.lastName}</p> </> ); }

import { useUser } from "@oneauxilia/oneauxilia-react"; export default function Home() { const { isLoaded, user } = useUser(); if (!isLoaded) { // Handle loading state however you like return null; } if (!user) return null; const updateUser = async () => { // Update data via an API endpoint const updateMetadata = await fetch("/api/updateMetadata"); // Check if the update was successful if (updateMetadata.message !== "success") { throw new Error("Error updating"); } // If the update was successful, reload the user data await user.reload(); }; return ( <> <button onClick={updateUser}>Click me to update your metadata</button> <p>user role: {user?.publicMetadata.role}</p> </> ); }