@clerk/astro
Advanced tools
Clerk is the easiest way to add authentication and user management to your Astro application. Add sign up, sign in, and profile management to your Astro application in minutes.
>=18.17.0 or laterAdd @clerk/astro as a dependency
With npm
npm install @clerk/astro
With yarn
yarn add @clerk/astro
With pnpm
pnpm add @clerk/astro
To build the package locally with the TypeScript compiler, run:
npm run build
To build the package in watch mode, run the following:
npm run dev
PUBLIC_CLERK_PUBLISHABLE_KEY=pk_(test|live)_xxxxxxx
CLERK_SECRET_KEY=sk_(test|live)_xxxxxxx
PUBLIC_CLERK_SIGN_IN_URL=/sign-in # update this if sign in page exists on another path
PUBLIC_CLERK_SIGN_UP_URL=/sign-up # update this if sign up page exists on another path
env.d.ts/// <reference types="astro/client" />
/// <reference types="@clerk/astro/env" />
Follow the instructions in our documentation.
Example configuration file
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
import clerk from '@clerk/astro';
export default defineConfig({
integrations: [clerk()],
adapter: node({ mode: 'standalone' }),
output: 'server',
});
This step is required in order to use SSR or any control component. Create a middleware.ts file inside the src/ directory.
import { clerkMiddleware } from '@clerk/astro/server';
export const onRequest = clerkMiddleware();
---
import { SignedIn, SignedOut, UserButton, SignInButton } from "@clerk/astro/components";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
</head>
<body>
<header>
<h1>{title}</h1>
<nav>
<SignedOut>
<SignInButton mode="modal" />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</nav>
</header>
<article>
<slot />
</article>
</body>
</html>
For further details and examples, please refer to our Documentation.
You can get in touch with us in any of the following ways:
We're open to all community contributions! If you'd like to contribute in any way, please read our contribution guidelines) .
@clerk/astro follows good practices of security, but 100% security cannot be assured.
@clerk/astro is provided "as is" without any warranty. Use at your own risk.
For more information and to report security issues, please refer to our security documentation.
This project is licensed under the MIT license.
See LICENSE for more information.
FAQs
Clerk SDK for Astro
The npm package @clerk/astro receives a total of 1,747 weekly downloads. As such, @clerk/astro popularity was classified as popular.
We found that @clerk/astro demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.