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.
---
if (!Astro.locals.auth().userId) {
return Astro.redirect('/login')
}
const user = await Astro.locals.currentUser()
---
<div>{JSON.stringify(user)}</div>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.
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.
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
Last updated on