Install the package

To get up and running with Clerk and Astro, start by installing the astro-clerk-auth and @astrojs/node packages:

Add environment variables

Before you start using the Clerk integration, you'll first need to set the following environment variables:

Extend the types

Update the env.d.ts file inside your Astro project:

Add the Clerk integration

Open astro.config.mjs file and add the clerk() integration, and set the output to server:

Use the middleware

This example showcases how to use the clerkMiddleware and the createRouteMatcher in Astro:

Use the components

The package exports the Clerk prebuilt UI components as Astro components and can be used anywhere inside the website:

Congratulations, you have secured your Astro website with Clerk!

To learn more, check out the repo on GitHub.