āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/_partials/astro/user-store ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
The following example demonstrates how to use the $userStore to access the User object. It returns undefined while Clerk is still loading and null if the user is not signed in.
For more information, 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 <div>Not signed in</div>
}
return <div>Hello {user.fullName}!</div>
}
<script setup>
import { useStore } from '@nanostores/vue'
import { $userStore } from '@clerk/astro/client'
const user = useStore($userStore)
</script>
<template>
<div v-if="user === undefined">
<!-- Handle loading state however you like -->
</div>
<div v-else-if="user === null">Not signed in</div>
<div v-else>Hello {{ user.fullName }}!</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'
</script>
{#if $user === undefined}
<!-- Handle loading state however you like -->
{:else if $user === null}
<div>Not signed in</div>
{:else}
<div>Hello {$user.fullName}!</div>
{/if}
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā