āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/astro/client-side-helpers/session-store ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
$sessionStore'
description: Clerk's $sessionStore nanostore provides a convenient way to access the current user Session object, as well as helpers to set the session.
sdk: astroThe $sessionStore store provides a convenient way to access the current user's Session{{ target: '_blank' }} object, as well as helpers for setting the active session.
$sessionStore storeThe following example demonstrates how to use the $sessionStore store to access the session object, which has the lastActiveAt property on it. The lastActiveAt property is used to display the last active time of the current session to the user.
<CodeBlockTabs options={['React', 'Vue', 'Svelte']}>
import { useStore } from '@nanostores/react'
import { $sessionStore } from '@clerk/astro/client'
export default function Session() {
const session = useStore($sessionStore)
if (session === undefined) {
// Add logic to handle loading state
return null
}
if (session === null) {
// Add logic to handle not signed in state
return null
}
return (
<div>
<p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
</div>
)
}
<script setup>
import { useStore } from '@nanostores/vue'
import { $sessionStore } from '@clerk/astro/client'
const session = useStore($sessionStore)
</script>
<template>
<div v-if="session === undefined">
<!-- Add logic to handle loading state -->
</div>
<div v-else-if="session === null">
<!-- Add logic to handle not signed in state -->
</div>
<div v-else>
<p>This session has been active since {{ session.lastActiveAt.toLocaleString() }}</p>
</div>
</template>
<script>
// The $ prefix is reserved in Svelte for its own reactivity system.
// Alias the imports to avoid conflicts.
import { $sessionStore as session } from '@clerk/astro/client'
</script>
{#if $session === undefined}
<!-- Add logic to handle loading state -->
{:else if $session === null}
<!-- Add logic to handle not signed in state -->
{:else}
<div>
<p>This session has been active since {$session.lastActiveAt.toLocaleString()}</p>
</div>
{/if}
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā