Use Clerk with Astro and React
Astro provides an integration that enables server-side rendering and client-side hydration for your React components. This guide demonstrates how to use Clerk with Astro and React.
If you have not set up your Astro application to work with Clerk, visit the Astro quickstart.
Install @astrojs/react
Add the Astro React integration to your project:
Update astro.config.mjs
Add Clerk and React integrations to your Astro configuration:
Use Clerk components
You can use Clerk's prebuilt components in your Astro pages or regular React components.
Astro pages
The following example demonstrates how to use Clerk components in Astro pages.
React components
The following example demonstrates how to use Clerk components in React components.
Use stores in your React components
Clerk Astro provides a set of useful stores that give you access to the Clerk
object, and helper methods for signing in and signing up.
The following example demonstrates how to use a Clerk Astro store.
Read user and session data
Learn how to use Clerk's hooks and helpers to access the active session and user data in your Astro application.
Client-side helpers
Learn more about Astro client-side helpers and how to use them.
Feedback
Last updated on