Skip to main content
Docs

$authStore

The $authStore store provides a convenient way to access the current auth state and helper methods for managing the active session.

$authStore.get() returns

  • Name
    userId
    Type
    string
    Description

    The ID of the current user.

  • Name
    sessionId
    Type
    string
    Description

    The ID of the current session.

  • Name
    orgId
    Type
    string
    Description

    The ID of the user's active organization.

  • Name
    orgRole
    Type
    string
    Description

    The current user's role in their active organization.

  • Name
    orgSlug
    Type
    string
    Description

    The URL-friendly identifier of the user's active organization.

How to use the $authStore store

The following example demonstrates how to use the $authStore store to access the current auth state. It uses userId to detect if the user is signed in.

components/external-data.tsx
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>
}
components/external-data.vue
<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>
components/external-data.svelte
<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}

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on