Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@clerk/astro
Advanced tools
@clerk/astro
Overview
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.
Getting Started
Prerequisites
- Astro 3.2 or later
- Node.js
>=18.17.0or later
Installation
Add @clerk/astro as a dependency
With npm
npm install @clerk/astro
With yarn
yarn add @clerk/astro
With pnpm
pnpm add @clerk/astro
Build
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
Usage
Set environment variables
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
Update env.d.ts
/// <reference types="astro/client" />
/// <reference types="@clerk/astro/env" />
Add integrations
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',
});
Add a middleware file
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();
Use components inside .astro files
---
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.
Support
You can get in touch with us in any of the following ways:
- Join our official community Discord server
- Create a GitHub Discussion
- Contact options listed on our Support page
Contributing
We're open to all community contributions! If you'd like to contribute in any way, please read our contribution guidelines) .
Security
@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.
License
This project is licensed under the MIT license.
See LICENSE for more information.
FAQs
Clerk SDK for Astro
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 8 open source maintainers collaborating on the project.
Package last updated on 26 Jul 2024
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.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025