Community SDK support for Astro
- Category
- Community
- Published
You can now secure your Astro website with Clerk!
Install the package
To get up and running with Clerk and Astro, start by installing the astro-clerk-auth and @astrojs/node packages:
npm i astro-clerk-auth @astrojs/nodeAdd environment variables
Before you start using the Clerk integration, you'll first need to set the following environment variables:
PUBLIC_ASTRO_APP_CLERK_PUBLISHABLE_KEY=<your-publishable-key>
CLERK_SECRET_KEY=<your-secret-key>
PUBLIC_ASTRO_APP_CLERK_SIGN_IN_URL=/sign-in
PUBLIC_ASTRO_APP_CLERK_SIGN_UP_URL=/sign-upExtend the types
Update the env.d.ts file inside your Astro project:
/// <reference types="astro/client" />
/// <reference types="astro-clerk-auth/env" />Add the Clerk integration
Open astro.config.mjs file and add the clerk() integration, and set the output to server:
import { defineConfig } from "astro/config";
import node from "@astrojs/node";
import clerk from "astro-clerk-auth";
export default defineConfig({
integrations: [
clerk(),
],
output: "server",
adapter: node({
mode: "standalone",
}),
});Use the middleware
This example showcases how to use the clerkMiddleware and the createRouteMatcher in Astro:
import { clerkMiddleware, createRouteMatcher } from "astro-clerk-auth/server";
const isProtectedPage = createRouteMatcher(['/user(.*)'])
export const onRequest = clerkMiddleware((auth, context, next) => {
if (isProtectedPage(context.request) && !auth().userId) {
return auth().redirectToSignIn();
}
return next();
});Use the components
The package exports the Clerk prebuilt UI components as Astro components and can be used anywhere inside the website:
---
import { SignedIn, SignedOut } from "astro-clerk-auth/components/control";
import { UserButton, SignIn } from "astro-clerk-auth/components/interactive";
---
<Layout title="Welcome to Astro + Clerk">
<SignedIn>
<UserButton />
</SignedIn>
<SignedOut>
<SignIn routing="hash" />
</SignedOut>
</Layout>Congratulations, you have secured your Astro website with Clerk!
To learn more, check out the repo on GitHub, or jump right in with these starters for Javascript and React.
