āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/astro/locals ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Through Astro locals, Clerk's Auth and current User{{ target: '_blank' }} objects can be accessed between middlewares and pages. These locals are injected when you configure the provided middleware.
locals.auth()Astro.locals.auth() returns an Auth object. This JavaScript object contains important information like session data, your user's ID, as well as the ID of the active organization. Learn more about the Auth object here{{ target: '_blank' }}.
locals.auth() optionsAn optional object that can be used to configure the behavior of the locals.auth() function. It accepts the following properties:
treatPendingAsSignedOut?: A boolean that indicates whether to treat pending session status as signed out. Defaults to true.
</Properties>
You can use the isAuthenticated property from the auth() local to protect your pages and forms.
<CodeBlockTabs options={["Protect a page", "Protect a form"]}>
---
const { isAuthenticated, userId, redirectToSignIn } = Astro.locals.auth()
if (!isAuthenticated) {
return redirectToSignIn()
}
---
<div>Protected page</div>
---
if (Astro.request.method === 'POST') {
if (!Astro.locals.auth().isAuthenticated) {
throw new Error('You must be signed in to add an item to your cart')
}
const data = await Astro.request.formData()
console.log('add item action', data)
}
---
<form method="POST">
<input value="test" type="text" name="name" />
<button type="submit">Add to Cart</button>
</form>
The following example uses locals.auth() to protect the route based on token type:
(acceptsToken: 'any') from the request.session_token, it logs that the request is from a user session.export const GET: APIRoute = ({ locals }) => {
// Use `locals.auth()` to protect a route based on token type
const authObject = locals.auth({ acceptsToken: 'any' })
if (authObject.tokenType === 'session_token') {
console.log('This is a session token from a user')
} else {
console.log(`This is a ${authObject.tokenType} token`)
}
return new Response(JSON.stringify({}))
}
locals.currentUser()Current user data is important for data enrichment. The currentUser() local fetch the current user's Backend User{{ target: '_blank' }} object, which includes all of the user's information and provides a set of methods to manage their account.
Under the hood, this local:
GET /v1/users/me endpoint.For more information on currentUser(), see the reference{{ target: '_blank' }}.
---
if (Astro.request.method === 'POST') {
const user = await Astro.locals.currentUser()
if (!user) {
throw new Error('You must be signed in to use this feature')
}
const data = await Astro.request.formData()
const serverData = {
usersHobby: data.get('hobby'),
userId: user.id,
profileImage: user.imageUrl,
}
console.log('add item action completed with user details ', serverData)
}
---
<form method="POST">
<input value="soccer" type="text" name="hobby" />
<button type="submit">Submit your hobby</button>
</form>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā