Docs

Read session and user data in your Astro app with Clerk

Clerk provides helpers that you can use to access the active session and user data in your Astro application.

Server-side

The following example uses the auth() local to validate an authenticated user and the currentUser() local to access the Backend API User object for the authenticated user.

src/pages/me.astro
---
if (!Astro.locals.auth().userId) {
  return Astro.redirect('/login')
}

const user = await Astro.locals.currentUser()
---

<div>{JSON.stringify(user)}</div>
src/api/me.ts
export async function GET({ locals }) {
  if (!locals.auth().userId) {
    return new Response('Unauthorized', { status: 401 })
  }

  const currentUser = await locals.currentUser()

  return new Response(JSON.stringify(currentUser))
}

Client-side

Clerk Astro provides a set of useful stores that give you access to many important objects, such as the Clerk, User, and Session object.

$authStore

The following example demonstrates how to use the $authStore to access auth information for the active user, such as the userId and sessionId.

components/example.tsx
import { useStore } from '@nanostores/react'
import { $authStore } from '@clerk/astro/client'

export default function Example() {
  const { userId, sessionId } = useStore($authStore)

  // In case the user signs out while on the page.
  if (!userId) {
    return null
  }

  return (
    <div>
      Hello, {userId} your current active session is {sessionId}
    </div>
  )
}

$userStore

The following example demonstrates how to use the $userStore store to access information about the active user, such as their firstName.

components/example.tsx
import { useStore } from '@nanostores/react'
import { $userStore } from '@clerk/astro/client'

export default function Example() {
  const user = useStore($userStore)

  if (!user) {
    return null
  }

  return <div>Hello, {user.firstName} welcome to Clerk</div>
}

Feedback

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

Last updated on