Skip to content

astro

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

astro

README.md


@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.0 or 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:

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.