āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/_partials/astro/auth-store ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
The following example demonstrates how to use the $authStore to access the current auth state. It uses userId to detect if the user is signed in.
<CodeBlockTabs options={['React', 'Vue', 'Svelte']}>
import { useStore } from '@nanostores/react'
import { $authStore } from '@clerk/astro/client'
export default function ExternalData() {
const { userId } = useStore($authStore)
if (userId === undefined) {
// Handle loading state however you like
return <div>Loading...</div>
}
if (userId === null) {
// Handle signed out state however you like
return <div>Sign in to view this page</div>
}
return <div>...</div>
}
<script setup>
import { useStore } from '@nanostores/vue'
import { $authStore } from '@clerk/astro/client'
const auth = useStore($authStore)
</script>
<template>
<div v-if="auth.userId === undefined">Loading...</div>
<div v-else-if="auth.userId === null">Sign in to view this page</div>
<div v-else>...</div>
</template>
<script>
// The $ prefix is reserved in Svelte for its own reactivity system.
// Alias the imports to avoid conflicts.
import { $authStore as auth } from '@clerk/astro/client'
</script>
{#if $auth.userId === undefined}
<div>Loading...</div>
{:else if $auth.userId === null}
<div>Sign in to view this page</div>
{:else}
<div>...</div>
{/if}
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā