use-user.mdx

title	useUser()
description	Access and manage the current user's data in your React application with Clerk's useUser() hook.
sdk	chrome-extension, expo, nextjs, react, react-router, tanstack-react-start

The useUser() hook provides access to the current user's User object, which contains all the data for a single user in your application and provides methods to manage their account. This hook also allows you to check if the user is signed in and if Clerk has loaded and initialized.

Examples

Get the current user

Update user data

The following example uses the useUser() hook to access the User object, which calls the update() method to update the current user's information.

```tsx {{ filename: 'src/pages/Example.tsx' }} import { useUser } from '@clerk/react'

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

// Handle loading state
if (!isLoaded) return <div>Loading...</div>

// Protect the page from unauthenticated users
if (!isSignedIn) return <div>Sign in to view this page</div>

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

return (
  <>
    <button onClick={updateUser}>Update your name</button>
    <p>user.firstName: {user.firstName}</p>
    <p>user.lastName: {user.lastName}</p>
  </>
)

}

</If>

<If sdk="nextjs">
```tsx {{ filename: 'app/page.tsx' }}
'use client'

import { useUser } from '@clerk/nextjs'

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

  // Handle loading state
  if (!isLoaded) return <div>Loading...</div>

  // Protect the page from unauthenticated users
  if (!isSignedIn) return <div>Sign in to view this page</div>

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

  return (
    <>
      <button onClick={updateUser}>Update your name</button>
      <p>user.firstName: {user.firstName}</p>
      <p>user.lastName: {user.lastName}</p>
    </>
  )
}

```tsx {{ filename: 'app/routes/home.tsx' }} import { useUser } from '@clerk/react-router'

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

// Handle loading state
if (!isLoaded) return <div>Loading...</div>

// Protect the page from unauthenticated users
if (!isSignedIn) return <div>Sign in to view this page</div>

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

return (
  <>
    <button onClick={updateUser}>Update your name</button>
    <p>user.firstName: {user.firstName}</p>
    <p>user.lastName: {user.lastName}</p>
  </>
)

}

</If>

<If sdk="chrome-extension">
```tsx {{ filename: 'src/routes/page.tsx' }}
import { useUser } from '@clerk/chrome-extension'

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

  // Handle loading state
  if (!isLoaded) return <div>Loading...</div>

  // Protect the page from unauthenticated users
  if (!isSignedIn) return <div>Sign in to view this page</div>

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

  return (
    <>
      <button onClick={updateUser}>Update your name</button>
      <p>user.firstName: {user.firstName}</p>
      <p>user.lastName: {user.lastName}</p>
    </>
  )
}

```tsx {{ filename: 'app/routes/index.tsx' }} import { useUser } from '@clerk/tanstack-react-start' import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({ component: Home, })

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

// Handle loading state
if (!isLoaded) return <div>Loading...</div>

// Protect the page from unauthenticated users
if (!isSignedIn) return <div>Sign in to view this page</div>

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

return (
  <>
    <button onClick={updateUser}>Update your name</button>
    <p>user.firstName: {user.firstName}</p>
    <p>user.lastName: {user.lastName}</p>
  </>
)

}

</If>

<If sdk="expo">
```tsx {{ filename: 'app/(user)/index.tsx' }}
import { useUser } from '@clerk/expo'
import { Text, View, TouchableOpacity } from 'react-native'

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

  // Handle loading state
  if (!isLoaded) return <View>Loading...</View>

  // Protect the page from unauthenticated users
  if (!isSignedIn) return <View>Sign in to view this page</View>

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

  return (
    <View>
      <TouchableOpacity onPress={updateUser}>
        <Text>Update your name</Text>
      </TouchableOpacity>
      <Text>user.firstName: {user.firstName}</Text>
      <Text>user.lastName: {user.lastName}</Text>
    </View>
  )
}

Reload user data

The following example uses the useUser() hook to access the User object, which calls the reload() method to get the latest user's information.

```tsx {{ filename: 'src/pages/Home.tsx' }} import { useUser } from '@clerk/react'

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

// Handle loading state
if (!isLoaded) return <div>Loading...</div>

// Protect the page from unauthenticated users
if (!isSignedIn) return <div>Sign in to view this page</div>

const updateUser = async () => {
  // Update data via an API endpoint
  const updateMetadata = await fetch('/api/updateMetadata', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      role: 'admin',
    }),
  })

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

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

return (
  <>
    <button onClick={updateUser}>Update your metadata</button>
    <p>user role: {user.publicMetadata.role}</p>
  </>
)

}

</If>

<If sdk="nextjs">
```tsx {{ filename: 'app/page.tsx' }}
'use client'

import { useUser } from '@clerk/nextjs'

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

  // Handle loading state
  if (!isLoaded) return <div>Loading...</div>

  // Protect the page from unauthenticated users
  if (!isSignedIn) return <div>Sign in to view this page</div>

  const updateUser = async () => {
    // Update data via an API endpoint
    const updateMetadata = await fetch('/api/updateMetadata', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        role: 'admin',
      }),
    })

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

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

  return (
    <>
      <button onClick={updateUser}>Update your metadata</button>
      <p>user role: {user.publicMetadata.role}</p>
    </>
  )
}

```tsx {{ filename: 'app/routes/home.tsx' }} import { useUser } from '@clerk/react-router'

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

// Handle loading state
if (!isLoaded) return <div>Loading...</div>

// Protect the page from unauthenticated users
if (!isSignedIn) return <div>Sign in to view this page</div>

const updateUser = async () => {
  // Update data via an API endpoint
  const updateMetadata = await fetch('/api/updateMetadata', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      role: 'admin',
    }),
  })

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

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

return (
  <>
    <button onClick={updateUser}>Update your metadata</button>
    <p>user role: {user.publicMetadata.role}</p>
  </>
)

}

</If>

<If sdk="chrome-extension">
```tsx {{ filename: 'src/routes/page.tsx' }}
import { useUser } from '@clerk/chrome-extension'

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

  // Handle loading state
  if (!isLoaded) return <div>Loading...</div>

  // Protect the page from unauthenticated users
  if (!isSignedIn) return <div>Sign in to view this page</div>

  const updateUser = async () => {
    // Update data via an API endpoint
    const updateMetadata = await fetch('/api/updateMetadata', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        role: 'admin',
      }),
    })

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

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

  return (
    <>
      <button onClick={updateUser}>Update your metadata</button>
      <p>user role: {user.publicMetadata.role}</p>
    </>
  )
}

```tsx {{ filename: 'app/routes/index.tsx' }} import { useUser } from '@clerk/tanstack-react-start' import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({ component: Home, })

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

// Handle loading state
if (!isLoaded) return <div>Loading...</div>

// Protect the page from unauthenticated users
if (!isSignedIn) return <div>Sign in to view this page</div>

const updateUser = async () => {
  // Update data via an API endpoint
  const updateMetadata = await fetch('/api/updateMetadata', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      role: 'admin',
    }),
  })

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

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

return (
  <>
    <button onClick={updateUser}>Update your metadata</button>
    <p>user role: {user.publicMetadata.role}</p>
  </>
)

}

</If>

<If sdk="expo">
```tsx {{ filename: 'app/(user)/index.tsx' }}
import { useUser } from '@clerk/expo'
import { Text, View, TouchableOpacity } from 'react-native'

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

  // Handle loading state
  if (!isLoaded) return <View>Loading...</View>

  // Protect the page from unauthenticated users
  if (!isSignedIn) return <View>Sign in to view this page</View>

  const updateUser = async () => {
    // Update data via an API endpoint
    const updateMetadata = await fetch('/api/updateMetadata', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        role: 'admin',
      }),
    })

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

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

  return (
    <View>
      <TouchableOpacity onPress={updateUser}>
        <Text>Update your metadata</Text>
      </TouchableOpacity>
      <Text>user role: {user.publicMetadata.role}</Text>
    </View>
  )
}