$sessionStore
The $sessionStore store provides a convenient way to access the current user's Session object, as well as helpers for setting the active session.
How to use the $sessionStore store
The following example demonstrates how to use the $sessionStore store to access the Session object. The Session object is used to access the lastActiveAt property, which is a Date object used to show the time the session was last active.
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}Feedback
Last updated on