║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: '$userStore' description: The $userStore store provides a convenient way to access current user data and helper methods for managing the active user. sdk: astro

The $userStore store provides a convenient way to access current User{{ target: '_blank' }} data and helper methods for managing the active user.

How to use the $userStore store

Retrieve the current user data

<Include src="_partials/astro/user-store" />

Update the current user data

The following example demonstrates how to use the $userStore store to update the current user's data on the client-side.

For more information on the update() method, see the User reference{{ target: '_blank' }}.

<CodeBlockTabs options={['React', 'Vue', 'Svelte']}>

import { useStore } from '@nanostores/react'
import { $userStore } from '@clerk/astro/client'

export default function User() {
  const user = useStore($userStore)

  if (user === undefined) {
    // Handle loading state however you like
    return null
  }

  if (user === null) 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>
    </>
  )
}

<script setup>
import { useStore } from '@nanostores/vue'
import { $userStore } from '@clerk/astro/client'

const user = useStore($userStore)

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

<template>
  <div v-if="user === undefined">
    <!-- Handle loading state however you like -->
  </div>

  <div v-else-if="user !== null">
    <button @click="updateUser">Click me to update your name</button>
    <p>user.firstName: {{ user.firstName }}</p>
    <p>user.lastName: {{ user.lastName }}</p>
  </div>
</template>

<script>
  // The $ prefix is reserved in Svelte for its own reactivity system.
  // Alias the imports to avoid conflicts.
  import { $userStore as user } from '@clerk/astro/client'

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

{#if $user === undefined}
  <!-- Handle loading state however you like -->
{:else if $user !== null}
  <button on:click={updateUser}>Click me to update your name</button>
  <p>user.firstName: {$user.firstName}</p>
  <p>user.lastName: {$user.lastName}</p>
{/if}

</CodeBlockTabs>

Reload user data

The following example demonstrates how to use the $userStore store to reload the current user's data on the client-side.

<Include src="_partials/user-reload" />

For more information on the reload() method, see the User reference{{ target: '_blank' }}.

<CodeBlockTabs options={['React', 'Vue', 'Svelte']}>

import { useStore } from '@nanostores/react'
import { $userStore } from '@clerk/astro/client'

export default function User() {
  const user = useStore($userStore)

  if (user === undefined) {
    // Handle loading state however you like
    return null
  }

  if (user === null) 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>
    </>
  )
}

<script setup>
import { useStore } from '@nanostores/vue'
import { $userStore } from '@clerk/astro/client'

const user = useStore($userStore)

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.value.reload()
}
</script>

<template>
  <div v-if="user === undefined">
    <!-- Handle loading state however you like -->
  </div>

  <div v-else-if="user !== null">
    <button @click="updateUser">Click me to update your metadata</button>
    <p>user role: {{ user?.publicMetadata.role }}</p>
  </div>
</template>

<script>
  // The $ prefix is reserved in Svelte for its own reactivity system.
  // Alias the imports to avoid conflicts.
  import { useStore } from '@nanostores/svelte'
  import { $userStore as userStore } from '@clerk/astro/client'

  const user = useStore(userStore)

  const updateUser = async () => {
    if ($user) {
      try {
        // Update data via an API endpoint
        const response = await fetch('/api/updateMetadata')
        const updateMetadata = await response.json()

        // 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()
      } catch (error) {
        console.error('Failed to update metadata:', error)
        // Handle the error appropriately
      }
    }
  }
</script>

{#if $user === undefined}
  <!-- Handle loading state however you like -->
{:else if $user !== null}
  <button on:click={updateUser}>Click me to update your metadata</button>
  <p>user role: {$user.publicMetadata?.role}</p>
{/if}

</CodeBlockTabs>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║